Motion Frames Skill
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.
1---2name: motion-frames3description: A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.4---5
6# Motion Frames Skill
7
8Produce a single full-bleed motion composition. Inline CSS animations only —
9the page is the loop. Treat it as a poster frame that an exporter (HyperFrames,
10Lottie, etc.) can capture into a video.
11
12## Workflow
13
141. **Read the active DESIGN.md** (injected above). Motion lives or dies on
15 typography contrast — pick the most expressive serif / display token in
16 the DS for the headline; the body / mono token labels everything else.
172. **Compose** the canvas as a 16:9 hero with these layers, back to front:
18 - **Stage** — full-bleed `<main>`. Off-white or DS-canvas background, very
19 subtle dotted grid texture (CSS background, `radial-gradient` dots at
20 22–32px intervals).
21 - **Concentric rings** — 2–3 SVG circles radiating from a focal point.
22 Ultra-thin strokes (0.5–1px) in DS-foreground at low opacity. These
23 rotate at different speeds (60s, 90s, 180s).
24 - **Focal mark** — a wireframe globe, a stylized object, or a typographic
25 monogram drawn as inline SVG. ~28% of the canvas wide.
26 - **Ring labels** — short words / phonetic tokens placed around one of
27 the rings (e.g. "Hola · Bonjour · 你好 · नमस्ते"). They co-rotate with
28 the ring, with `<text>` paths counter-rotated so the words stay upright.
29 - **Headline** — bottom-left or center-bottom. Display serif, italic
30 accent on one word. Add a subtle `letterSpacing` + opacity reveal
31 animation (`@keyframes type-in`).
32 - **Frame chrome** — corner stamps (top-left lab tag, top-right brand or
33 issue number) and a thin baseline rule. Static.
343. **Animate** with `@keyframes` only — no JS:
35 - `rotate-slow`, `rotate-med`, `rotate-fast` for rings.
36 - `globe-spin` for the focal mark.
37 - `pulse` for the focal dot, ~2s, easing.
38 - `marquee-fade` to reveal headline once on load.
394. **Write** a single HTML document:
40 - `<!doctype html>` through `</html>`, CSS inline.
41 - All motion uses CSS — no scripts, so HyperFrames or any frame-grabber
42 can capture it deterministically.
43 - `data-od-id` on stage, focal, ring, headline, chrome.
445. **Self-check**:
45 - The composition still reads as a poster with motion paused at frame 0.
46 - At least 3 layers move at different speeds (depth comes from delta
47 velocity, not parallax tricks).
48 - Accent appears once — usually the italic word in the headline.
49
50## Output contract
51
52Emit between `<artifact>` tags:
53
54```
55<artifact identifier="motion-slug" type="text/html" title="Motion — Title">
56<!doctype html>
57<html>...</html>
58</artifact>
59```
60
61One sentence before the artifact, nothing after.
gabrielmoreira