motion-frames skill
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.
Is the motion-frames skill safe?
Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.
No findings.
Install the motion-frames skill
A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.
git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design mkdir -p ~/.claude/skills cp -r /tmp/open-design/design-templates/motion-frames ~/.claude/skills/motion-frames
In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub
The instructions your agent would load
SKILL.md as published, without the frontmatter. Read it on GitHub
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
typography contrast — pick the most expressive serif / display token in the DS for the headline; the body / mono token labels everything else.
- Read the active DESIGN.md (injected above). Motion lives or dies on
- Compose the canvas as a 16:9 hero with these layers, back to front:
subtle dotted grid texture (CSS background, radial-gradient dots at 22–32px intervals).
- Stage — full-bleed . Off-white or DS-canvas background, very
Ultra-thin strokes (0.5–1px) in DS-foreground at low opacity. These rotate at different speeds (60s, 90s, 180s).
- Concentric rings — 2–3 SVG circles radiating from a focal point.
monogram drawn as inline SVG. ~28% of the canvas wide.
- Focal mark — a wireframe globe, a stylized object, or a typographic
the rings (e.g. "Hola · Bonjour · 你好 · नमस्ते"). They co-rotate with the ring, with paths counter-rotated so the words stay upright.
- Ring labels — short words / phonetic tokens placed around one of
accent on one word. Add a subtle letterSpacing + opacity reveal animation (@keyframes type-in).
- Headline — bottom-left or center-bottom. Display serif, italic
issue number) and a thin baseline rule. Static.
- Frame chrome — corner stamps (top-left lab tag, top-right brand or
- 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:
can capture it deterministically.
- <!doctype html> through , CSS inline.
- All motion uses CSS — no scripts, so HyperFrames or any frame-grabber
- data-od-id on stage, focal, ring, headline, chrome.
- Self-check:
velocity, not parallax tricks).
- 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
- Accent appears once — usually the italic word in the headline.
Output contract
Emit between tags:
<artifact identifier="motion-slug" type="text/html" title="Motion — Title">
<!doctype html>
<html>...</html>
</artifact>One sentence before the artifact, nothing after.
More skills from nexu-io/open-design
- Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
- Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
- Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
- Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
- Acard-twitterTwitter quote or data card designed to pair with a post.
- Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
- Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
- Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
- Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
- Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.