Skip to content
Get packs

Motion Frames Design

Creates a looping, animated single-frame hero poster in HTML/CSS for video export

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

What it does

This skill teaches an AI agent to build a single animated web page that works like a looping motion-graphics poster. It lays out a widescreen composition with rotating rings, a spinning globe-style graphic, rotating words and a headline that fades in, all animated with plain CSS rather than JavaScript. The result can be captured frame by frame into a video by a tool such as HyperFrames.

Great for

  • Designers who need a quick animated hero banner or title card concept
  • Marketers preparing looping video posters for launches or landing pages
  • Teams that want an HTML starting point to export into video with HyperFrames or a similar tool

Skip it if

  • Projects needing complex interactive animation or JavaScript-driven behaviour, since the skill forbids scripts by design
  • Production video editing that requires timeline control; the output is one composition, not a full video project

Try asking

  • “Design an animated hero with a rotating type ring around a wireframe globe and the headline 'Reach every country.' Loop at 12 seconds.”
  • “Create a title card with slow rotating concentric rings and a fading headline for a product video.”
  • “Make a looping video poster with multilingual words orbiting a focal mark, ready for HyperFrames export.”
Step-by-step guide: how to use Motion Frames DesignInstall, 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

  • Provide or select a design system first, since the skill reads the active DESIGN.md for fonts and colours.
  • Check the page with animations paused at frame 0 to confirm it still reads as a poster.
  • Name the headline and loop length explicitly in your request so the agent can set the animation timings.

What's inside

  • example.html
  • 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.