Motion Frames Skill
SkillMediaMotion-frames is a skill that guides an AI agent to build a single-frame motion-design composition as a self-contained HTML file with looping CSS animations, a rotating type ring, animated globe, ticking timer, and parallax labels. The motion claude skill outputs a 16:9 hero poster that exporters like HyperFrames can capture frame by frame into video.
Available today. Use it from your connected AI after setup.
No other account needed.
Have a project design system with color, typography, layout, and components defined, since the skill styles against it.
Then ask your AI: use the Motion Frames Skill skill
What your AI can do with it
- Composes a 16:9 motion-design hero scene with layered SVG shapes, ring labels, and a headl
- Animates everything with CSS @keyframes only, no JavaScript
- Rotates concentric rings at different speeds with counter-rotated upright text labels
- Reveals the headline with a type-in letterSpacing and opacity animation
- Styles the output against the project's design system (color, typography, layout, componen
- Produces a single self-contained HTML file ready for HyperFrames or any keyframe-based exp
Getting started
- Have a project design system with color, typography, layout, and components defined, since the skill styles against it.
- Install the motion-frames skill so the agent can load it.
- Ask the agent for an animated hero or motion-design poster, describing the scene, headline, and loop length.
- Preview the generated HTML file, then hand it to HyperFrames or another keyframe-based exporter to render video.
What this skill tells your AI
The instructions your AI receives, as published by nexu-io/open-design in design-templates/motion-frames/SKILL.md and read by ahel’s review.
Produce a single full-bleed motion composition. Inline CSS animations only — the page is the loop. Treat it as a poster frame that an exporter (HyperFrames, Lottie, etc.) can capture into a video.
Workflow
- Read the active DESIGN.md (injected above). Motion lives or dies on typography contrast — pick the most expressive serif / display token in the DS for the headline; the body / mono token labels everything else.
- Compose the canvas as a 16:9 hero with these layers, back to front:
- Stage — full-bleed
<main>. Off-white or DS-canvas background, very subtle dotted grid texture (CSS background,radial-gradientdots at 22–32px intervals). - Concentric rings — 2–3 SVG circles radiating from a focal point. Ultra-thin strokes (0.5–1px) in DS-foreground at low opacity. These rotate at different speeds (60s, 90s, 180s).
- Focal mark — a wireframe globe, a stylized object, or a typographic monogram drawn as inline SVG. ~28% of the canvas wide.
- Ring labels — short words / phonetic tokens placed around one of
the rings (e.g. "Hola · Bonjour · 你好 · नमस्ते"). They co-rotate with
the ring, with
<text>paths counter-rotated so the words stay upright. - Headline — bottom-left or center-bottom. Display serif, italic
accent on one word. Add a subtle
letterSpacing+ opacity reveal animation (@keyframes type-in). - Frame chrome — corner stamps (top-left lab tag, top-right brand or issue number) and a thin baseline rule. Static.
- Stage — full-bleed
- Animate with
@keyframesonly — no JS:rotate-slow,rotate-med,rotate-fastfor rings.globe-spinfor the focal mark.pulsefor the focal dot, ~2s, easing.marquee-fadeto reveal headline once on load.
- Write a single HTML document:
<!doctype html>through</html>, CSS inline.- All motion uses CSS — no scripts, so HyperFrames or any frame-grabber can capture it deterministically.
data-od-idon stage, focal, ring, headline, chrome.
- Self-check:
- The composition still reads as a poster with motion paused at frame 0.
- At least 3 layers move at different speeds (depth comes from delta velocity, not parallax tricks).
- Accent appears once — usually the italic word in the headline.
Output contract
Emit between <artifact> tags:
<artifact identifier="motion-slug" type="text/html" title="Motion — Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
Signals
- GitHub stars
- 98k
- Forks
- 11k
- Last commit
- Sep 2026
Others that do the same job
Questions
- Does the animation use JavaScript?
- No. All motion is done with CSS @keyframes, rotating rings, globe spin, pulsing focal dot, and the headline reveal. There are no scripts in the output.
- What does the output look like?
- A single self-contained HTML document with inline CSS, composed as a 16:9 full-bleed hero with a dotted grid stage, concentric rings, a focal mark, ring labels, a headline, and static frame chrome.
Advanced
- Item type
- skill
- Key
motion-frames-2- Source
- github.com/nexu-io/open-design