motion-frames
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.
DeepseekModel
Curated skill
Quality Excellent · 90
v1.0.0
Get
https://deepseekmodel.com/api/download.php?id=nexu-io-open-design-design-templates-motion-frames-skill-md&format=skill
Download .skill
Standard format with system_prompt and model_config, ready for any agent framework
The actual content of the system_prompt field in the .skill file.
name motion-frames description 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. triggers ["motion design","motion graphic","animated hero","loop animation","video poster","title card","hyperframes","kinetic typography","动态设计","动效"] od {"mode":"prototype","platform":"desktop","scenario":"marketing","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"example_prompt":"Design an animated hero — a rotating type ring around a wireframe globe, with the headline ‘Reach every country.’ Loop at 12s, ready for HyperFrames export."} 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.
Keywords that activate this skill. Click one to copy it.
This skill does not provide trigger words.
The downloaded .skill package contains the following fields.
| Field | Description |
|---|---|
| format | Format tag (skill/v1) |
| skill_id | Unique skill ID |
| name | Skill name |
| version | Version |
| description | Description |
| category | Categories (array) |
| trigger_words | Trigger words |
| tags | Tags |
| source | Source |
| source_url | Source URL (this page) |
| exported_at | Exported at (set per download) |
| system_prompt | System prompt body |
| model_config | Model config: provider / model / temperature / max_tokens / top_p |
| examples | Examples |
| install_guide | Import guide for Coze / Dify / Claude / custom frameworks |
The same skill can be exported in different platform formats.
