Skip to content
Get packs

Liquid Background Hero

Creates a fluid, gradient-animated hero background with a quote overlay as a single HTML file

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
3 files

What it does

This skill teaches an AI agent to produce a single HTML page with a soft, flowing, colour-blended background and a large quote on top, suitable for a video intro frame, a website hero banner, or a poster. It guides the agent to build the effect with CSS gradients and animations (with canvas or WebGL as options) so the file opens by double-clicking, with no external image files. It also sets a restrained four-colour palette and typography choices and asks for reduced motion support.

Great for

  • Designers who need a quick animated backdrop for a landing page hero or video title card
  • Marketers making social or poster visuals with a single headline quote
  • Creators who want a polished motion background without learning WebGL

Skip it if

  • Projects needing exact brand colours or fonts that differ from the built-in palettes, since the skill prescribes its own styles
  • Users who need a production-grade WebGL shader; the skill itself says the WebGL option should be used sparingly

Try asking

  • “Turn my product tagline into a 1920x1080 liquid background hero for a video intro”
  • “Make a 9:16 poster background with the quote 'Less noise, more signal' in the Ocean Aqua palette”
  • “Build a landing page hero with a fluid gradient background and a short subtitle”
Step-by-step guide: how to use Liquid Background HeroInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    frame-liquid-bg-hero.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip frame-liquid-bg-hero.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip frame-liquid-bg-hero.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Specify the palette by name (Solar Peach, Ocean Aqua, Aurora Violet, Forest Mint) and the aspect ratio, 16:9 or 9:16, to avoid defaults.
  • Provide the exact quote you want; the skill asks the agent to use real content rather than placeholder text.
  • The WebGL option loads a library from the jsdelivr CDN, so check that the page works offline if you need it to.

What's inside

  • example.html
  • open-design.json
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.