[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7CZFBTN4GJSJF4VDDP3KW1B":3,"skill-same:01M7CZFBTN4GJSJF4VDDP3KW1B":76},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":13,"repositoryHtmlUrl":53,"repositoryHomepageUrl":54,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":69},"01M7CZFBTN4GJSJF4VDDP3KW1B","motion-frames",null,"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.","qelvora1\u002Fopen-design","qelvora1","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F294549645?v=4","01M7CYQMFVAA6E5YHKCNNCBXJS","01M7CYQMGFRBPABV2BSD9VB71Z",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fdesign-templates\u002Fmotion-frames\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: motion-frames\ndescription: |\n  A single-frame motion-design composition with looping CSS animations —\n  rotating type ring, animated globe, ticking timer, parallax labels.\n  Renders as a hero video poster you can hand straight to HyperFrames or\n  any keyframe-based exporter. Use when the brief asks for \"motion design\",\n  \"animated hero\", \"loop\", \"video poster\", \"title card\", or pairs Open\n  Claude Design with HyperFrames for a kinetic export.\ntriggers:\n  - \"motion design\"\n  - \"motion graphic\"\n  - \"animated hero\"\n  - \"loop animation\"\n  - \"video poster\"\n  - \"title card\"\n  - \"hyperframes\"\n  - \"kinetic typography\"\n  - \"动态设计\"\n  - \"动效\"\nod:\n  mode: prototype\n  platform: desktop\n  scenario: marketing\n  preview:\n    type: html\n    entry: index.html\n  design_system:\n    requires: true\n    sections: [color, typography, layout, components]\n  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.\"\n---\n\n# Motion Frames Skill\n\nProduce a single full-bleed motion composition. Inline CSS animations only —\nthe page is the loop. Treat it as a poster frame that an exporter (HyperFrames,\nLottie, etc.) can capture into a video.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Motion lives or dies on\n   typography contrast — pick the most expressive serif \u002F display token in\n   the DS for the headline; the body \u002F mono token labels everything else.\n2. **Compose** the canvas as a 16:9 hero with these layers, back to front:\n   - **Stage** — full-bleed `\u003Cmain>`. 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 \u002F phonetic tokens placed around one of\n     the rings (e.g. \"Hola · Bonjour · 你好 · नमस्ते\"). They co-rotate with\n     the ring, with `\u003Ctext>` 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   - `\u003C!doctype html>` through `\u003C\u002Fhtml>`, 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 `\u003Cartifact>` tags:\n\n```\n\u003Cartifact identifier=\"motion-slug\" type=\"text\u002Fhtml\" title=\"Motion — Title\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\nOne sentence before the artifact, nothing after.\n","# Motion Frames Skill\n\nProduce a single full-bleed motion composition. Inline CSS animations only —\nthe page is the loop. Treat it as a poster frame that an exporter (HyperFrames,\nLottie, etc.) can capture into a video.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Motion lives or dies on\n   typography contrast — pick the most expressive serif \u002F display token in\n   the DS for the headline; the body \u002F mono token labels everything else.\n2. **Compose** the canvas as a 16:9 hero with these layers, back to front:\n   - **Stage** — full-bleed `\u003Cmain>`. 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 \u002F phonetic tokens placed around one of\n     the rings (e.g. \"Hola · Bonjour · 你好 · नमस्ते\"). They co-rotate with\n     the ring, with `\u003Ctext>` 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   - `\u003C!doctype html>` through `\u003C\u002Fhtml>`, 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 `\u003Cartifact>` tags:\n\n```\n\u003Cartifact identifier=\"motion-slug\" type=\"text\u002Fhtml\" title=\"Motion — Title\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\nOne sentence before the artifact, nothing after.\n",{"od":23,"name":5,"triggers":38,"description":49},{"mode":24,"preview":25,"platform":28,"scenario":29,"design_system":30,"example_prompt":37},"prototype",{"type":26,"entry":27},"html","index.html","desktop","marketing",{"requires":31,"sections":32},true,[33,34,35,36],"color","typography","layout","components","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.",[39,40,41,42,43,44,45,46,47,48],"motion design","motion graphic","animated hero","loop animation","video poster","title card","hyperframes","kinetic typography","动态设计","动效","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.\n","main","29240bc3ff7b5db56f8a41965213220446fcb96d","design-templates\u002Fmotion-frames","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design","https:\u002F\u002Fopen-design.ai","https:\u002F\u002Fgithub.com\u002Fqelvora1","2026-10-01 22:47:24",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":31},[59,62,65],{"tool":60,"command":61},"npx","npx skills add qelvora1\u002Fopen-design --skill motion-frames",{"tool":63,"command":64},"bunx","bunx skills add qelvora1\u002Fopen-design --skill motion-frames",{"tool":66,"command":67},"pnpm","pnpm dlx skills add qelvora1\u002Fopen-design --skill motion-frames","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fdesign-templates\u002Fmotion-frames\u002FSKILL.md",[70],{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"example.html","REFERENCE","参考文档",8402,"https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fdesign-templates\u002Fmotion-frames\u002Fexample.html",[77,84,91,98,105,114],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":18},"01M7D3A2Y3ZTSPJJSCEHTWDN2P","Beta Skill","Instruction-only fixture skill.","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fskills\u002Fbeta\u002FSKILL.md",[],[],{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":18},"01M7D3A1MHKESXV45VYXKPCDRN","Alpha Skill","First fixture skill with a runnable demo.","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fskills\u002Falpha\u002FSKILL.md",[],[],{"skillNo":92,"name":93,"nameZh":6,"description":94,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":97,"publishedAt":18},"01M7D3A0HSH085FTGATVBG43YG","Deck One","A small deck template fixture.","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fdesign-templates\u002Fdeck-one\u002FSKILL.md",[],[],{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":18},"01M7D39Y0372ZQ6GTWFAJ7DEVJ","youtube-clipper","YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-clipper\u002FSKILL.md",[],[],{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":109,"licenseFileUrl":110,"sourceHtmlUrl":111,"categories":112,"keywords":113,"publishedAt":18},"01M7D39SMB0RHRGGQY24YVD8N5","writing-guidelines","Review docs\u002Fprose for Writing Guidelines compliance. Use when asked to \"review my docs\", \"check writing style\", \"audit prose\", \"review docs voice and tone\", or \"check this page against the writing handbook\".","MIT","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-guidelines\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-guidelines\u002FSKILL.md",[],[],{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":18},"01M7D39NNKF0JDA1J6ZJJQVVCV","wpds","WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fwpds\u002FSKILL.md",[],[]]