What kind of output does motion-frames produce?

It produces a single-frame motion-design composition with looping CSS animations, rendered as a hero video poster.

When should I use motion-frames?

Use it when the brief asks for motion design or an animated hero graphic.

Can I use the output with other tools?

Yes, the hero video poster can be handed straight to HyperFrames or any keyframe-based exporter.

Does motion-frames support multiple frames or video editing?

No, it produces a single-frame composition only.

Motion Frames Skill

SkillMedia

motion-frames is a skill that gives an AI agent a single-frame motion-design composition built from looping CSS animations. It includes a rotating type ring, an animated globe, a ticking timer, and parallax labels, and renders as a hero video poster. Use it when a brief asks for motion design or an animated hero graphic.

Use Motion Frames Skill in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Motion Frames Skill and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Motion Frames Skill skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

No other account needed.

Have an AI agent that can load and run skills.

Motion Frames SkillStart free

What your AI can do with it

Build a rotating type ring with looping CSS animation
Animate a globe inside the composition
Add a ticking timer to the frame
Place parallax labels across the scene
Render the composition as a hero video poster

Getting started

Have an AI agent that can load and run skills.
Add the motion-frames skill to that agent.
Give the agent a brief that asks for motion design or an animated hero.
Let the skill produce the single-frame composition.
Hand the rendered hero video poster to HyperFrames or any keyframe-based exporter.

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-gradient dots 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.
Animate with @keyframes only — no JS:
- rotate-slow, rotate-med, rotate-fast for rings.
- globe-spin for the focal mark.
- pulse for the focal dot, ~2s, easing.
- marquee-fade to 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-id on 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: 99k
Forks: 11k
Last commit: Oct 2026

Questions

What kind of output does motion-frames produce?: It produces a single-frame motion-design composition with looping CSS animations, rendered as a hero video poster.
What animations are included in the composition?: The composition includes a rotating type ring, an animated globe, a ticking timer, and parallax labels.
When should I use motion-frames?: Use it when the brief asks for motion design or an animated hero graphic.
Can I use the output with other tools?: Yes, the hero video poster can be handed straight to HyperFrames or any keyframe-based exporter.
Does motion-frames support multiple frames or video editing?: No, it produces a single-frame composition only.

Advanced

Item type: skill
Key: motion-frames-2
Source: github.com/nexu-io/open-design

github.com/nexu-io/open-design