Skip to content
Get packs

Motion Frames

Generates a looping, animated CSS hero graphic for video intros or landing pages.

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill teaches the agent to build a single-page animated hero visual, the kind of big banner you see at the top of a landing page or the opening frame of a video. Instead of a static picture, the result has moving parts that loop smoothly: a rotating ring of text, an abstract animated globe, a ticking timer, and floating labels that drift at different speeds. The animation is done with plain CSS, so the output is a web page file you can open in a browser or record as a video.

Great for

  • Marketers who need an eye-catching animated header for a product or campaign page
  • Motion or video creators who want a looping title card or poster frame
  • Front-end designers looking for a starting point for CSS-only motion effects

Skip it if

  • Projects that need static, print-ready or accessibility-critical layouts, since continuous motion can be distracting or problematic for some users
  • Anyone expecting interactive features or real data, because the included example is a decorative visual rather than a functional app

Try asking

  • “Make a looping animated hero banner for my SaaS landing page with a rotating text ring and a globe”
  • “Create a cinematic looping title card for a 10-second video intro with a neon accent colour”
  • “Build a desktop hero graphic with a ticking monospace timer and floating parallax labels”
Step-by-step guide: how to use Motion FramesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    motion-frames.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip motion-frames.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip motion-frames.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

  • Name the brand, text for the rotating ring, and colours you want so the agent can fill the layout instead of using placeholders.
  • Ask for a specific duration or loop length if you plan to export the animation as video.
  • Test the result in a browser and check that the motion is not too fast or too busy for your audience.

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything 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.