`. Off-white or DS-canvas background, very\n subtle dotted grid texture (CSS background, `radial-gradient` dots at\n 22–32px intervals).\n - **Concentric rings** — 2–3 SVG circles radiating from a focal point.\n Ultra-thin strokes (0.5–1px) in DS-foreground at low opacity. These\n rotate at different speeds (60s, 90s, 180s).\n - **Focal mark** — a wireframe globe, a stylized object, or a typographic\n monogram drawn as inline SVG. ~28% of the canvas wide.\n - **Ring labels** — short words / phonetic tokens placed around one of\n the rings (e.g. \"Hola · Bonjour · 你好 · नमस्ते\"). They co-rotate with\n the ring, with `` paths counter-rotated so the words stay upright.\n - **Headline** — bottom-left or center-bottom. Display serif, italic\n accent on one word. Add a subtle `letterSpacing` + opacity reveal\n animation (`@keyframes type-in`).\n - **Frame chrome** — corner stamps (top-left lab tag, top-right brand or\n issue number) and a thin baseline rule. Static.\n3. **Animate** with `@keyframes` only — no JS:\n - `rotate-slow`, `rotate-med`, `rotate-fast` for rings.\n - `globe-spin` for the focal mark.\n - `pulse` for the focal dot, ~2s, easing.\n - `marquee-fade` to reveal headline once on load.\n4. **Write** a single HTML document:\n - `` through ``, CSS inline.\n - All motion uses CSS — no scripts, so HyperFrames or any frame-grabber\n can capture it deterministically.\n - `data-od-id` on stage, focal, ring, headline, chrome.\n5. **Self-check**:\n - The composition still reads as a poster with motion paused at frame 0.\n - At least 3 layers move at different speeds (depth comes from delta\n velocity, not parallax tricks).\n - Accent appears once — usually the italic word in the headline.\n\n## Output contract\n\nEmit between `` tags:\n\n```\n\n\n...\n\n```\n\nOne sentence before the artifact, nothing after.","tags":["motion","frames","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-motion-frames","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/motion-frames","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (2,592 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:25.574Z","embedding":null,"createdAt":"2026-05-01T18:52:33.411Z","updatedAt":"2026-05-11T06:52:25.574Z","lastSeenAt":"2026-05-11T06:52:25.574Z","tsv":"'0':393 '0.5':180 '1':89 '16':129 '180s':196 '1px':181 '2':123,167 '22':162 '28':213 '2s':330 '3':168,300,396 '32px':163 '4':341 '5':377 '60s':194 '9':130 '90s':195 'accent':263,410 'activ':92 'add':267 'anim':15,19,64,273,301 'appear':411 'around':225 'artifact':429 'ask':47 'back':135 'background':149,156 'base':41 'baselin':297 'bleed':59,141 'bodi':117 'bonjour':232 'bottom':254,259 'bottom-left':253 'brand':290 'brief':46 'canva':126,148,216 'captur':84,364 'center':258 'center-bottom':257 'check':380 'chrome':279,376 'circl':170 'co':237 'co-rot':236 'come':403 'compos':124 'composit':11,61,382 'concentr':165 'contract':421 'contrast':102 'corner':280 'counter':245 'counter-rot':244 'css':14,63,155,348,353 'data':368 'data-od-id':367 'delta':405 'depth':402 'desig':50 'design':10 'design.md':93 'determinist':366 'die':99 'differ':192,400 'display':108,260 'document':346 'dot':152,160,329 'drawn':209 'ds':112,147,184 'ds-canva':146 'ds-foreground':183 'e.g':230 'eas':331 'els':122 'emit':422 'etc':82 'everyth':121 'export':42,79 'express':106 'fade':334 'fast':315 'focal':174,197,323,328,373 'foreground':185 'frame':3,7,52,76,278,361,392 'frame-grabb':360 'front':137 'full':58,140 'full-ble':57,139 'globe':20,201,319 'globe-spin':318 'grabber':362 'gradient':159 'grid':153 'hand':33 'headlin':115,252,337,375,419 'hero':28,131 'hola':231 'html':345 'hyperfram':36,80,357 'id':370 'inject':94 'inlin':62,211,349 'interv':164 'issu':292 'ital':262,415 'js':306 'keyfram':40,274,303 'keyframe-bas':39 'lab':285 'label':24,120,219 'layer':134,397 'least':395 'left':255,284 'letterspac':270 'live':97 'load':340 'loop':13,70 'lotti':81 'low':187 'mark':198,324 'marque':333 'marquee-fad':332 'med':312 'mono':118 'monogram':208 'motion':2,9,49,51,60,96,351,389 'motion-design':8 'motion-fram':1 'move':398 'noth':430 'number':293 'object':204 'od':369 'off-whit':142 'one':226,265,425 'opac':188,271 'output':420 'page':67 'parallax':23,408 'path':243 'paus':390 'phonet':222 'pick':103 'place':224 'point':175 'poster':30,75,387 'produc':54 'puls':325 'radial':158 'radial-gradi':157 'radiat':171 'read':90,384 'render':25 'reveal':272,336 'right':289 'ring':18,166,218,229,241,317,374 'rotat':16,190,238,246,308,311,314 'rotate-fast':313 'rotate-m':310 'rotate-slow':307 'rule':298 'script':355 'self':379 'self-check':378 'sentenc':426 'serif':107,261 'short':220 'singl':6,56,344 'single-fram':5 'skill':53 'skill-motion-frames' 'slow':309 'source-nexu-io' 'speed':193,401 'spin':320 'stage':138,372 'stamp':281 'static':299 'stay':250 'still':383 'straight':34 'stroke':179 'styliz':203 'subtl':151,269 'svg':169,212 'tag':286,424 'textur':154 'thin':178,296 'tick':21 'timer':22 'token':109,119,223 'top':283,288 'top-left':282 'top-right':287 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'treat':71 'trick':409 'type':17,276 'type-in':275 'typograph':207 'typographi':101 'ultra':177 'ultra-thin':176 'upright':251 'use':43,352 'usual':413 'veloc':406 'video':29,87 'white':144 'wide':217 'wirefram':200 'word':221,249,266,416 'workflow':88 'write':342 'नमस्ते':234 '你好':233","prices":[{"id":"1762a498-99a5-47dd-b434-4316cec165b9","listingId":"5c9c2af3-f5fd-4e09-8f16-02066a9ffdca","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-01T18:52:33.411Z"}],"sources":[{"listingId":"5c9c2af3-f5fd-4e09-8f16-02066a9ffdca","source":"github","sourceId":"nexu-io/open-design/motion-frames","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/motion-frames","isPrimary":false,"firstSeenAt":"2026-05-01T18:52:33.411Z","lastSeenAt":"2026-05-11T06:52:25.574Z"},{"listingId":"5c9c2af3-f5fd-4e09-8f16-02066a9ffdca","source":"skills_sh","sourceId":"nexu-io/open-design/motion-frames","sourceUrl":"https://skills.sh/nexu-io/open-design/motion-frames","isPrimary":true,"firstSeenAt":"2026-05-07T20:42:43.259Z","lastSeenAt":"2026-05-07T22:41:45.477Z"}],"details":{"listingId":"5c9c2af3-f5fd-4e09-8f16-02066a9ffdca","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"motion-frames","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"4d4dbcf75a5f47b7da0315a17c194bc3399993b9","skill_md_path":"skills/motion-frames/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/motion-frames"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"motion-frames","description":"A single-frame motion-design composition with looping CSS animations —\nrotating type ring, animated globe, ticking timer, parallax labels.\nRenders as a hero video poster you can hand straight to HyperFrames or\nany keyframe-based exporter. Use when the brief asks for \"motion design\",\n\"animated hero\", \"loop\", \"video poster\", \"title card\", or pairs Open\nClaude Design with HyperFrames for a kinetic export."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/motion-frames"},"updatedAt":"2026-05-11T06:52:25.574Z"}}