From design
Create timeline-based motion design and animated videos in HTML. Trigger: 'animation', 'motion design', 'explainer video', 'intro animation', 'cinematic'.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design:animated-videoThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use the `animations.jsx` starter:
Use the animations.jsx starter:
<script type="text/babel" src="starters/animations.jsx"></script>
It provides:
<Stage> — auto-scaling container with scrubber, play/pause, and
persistent playback position<Sprite start={t1} end={t2}> — appears within a time rangeuseTime() — current time in secondsuseSprite() — normalized progress 0->1 inside a SpriteEasing — easeIn, easeOut, easeInOut, cubic, elastic, etc.interpolate(t, [0, 1], [from, to]) — value mapping with optional easingfadeIn, slideUp, scaleInA typical scene structure:
<Stage duration={12}>
<Sprite start={0} end={3}>
{/* Scene 1: Logo entrance */}
<LogoReveal />
</Sprite>
<Sprite start={2.5} end={6}>
{/* Scene 2: Title with overlap from scene 1 */}
<TitleScene />
</Sprite>
<Sprite start={5.5} end={12}>
{/* Scene 3: Final cards */}
<CardsReveal />
</Sprite>
</Stage>
Overlap scenes by ~0.5s for natural crossfades. Hard cuts work for specific effects but rarely as defaults.
easeOut (start fast, settle)easeIn (start slow, accelerate away)easeInOutfunction LogoReveal() {
const t = useSprite(); // 0 -> 1 over the sprite's range
const scale = interpolate(t, [0, 0.6], [0.8, 1], Easing.easeOut);
const opacity = interpolate(t, [0, 0.3], [0, 1]);
return (
<div style={{ transform: `scale(${scale})`, opacity }}>
<Logo />
</div>
);
}
For UI micro-animations — hover, click feedback, state transitions — use CSS transitions or React state. Stage is for timed cinematic content.
Don't hand-roll setTimeout chains or requestAnimationFrame loops.
Almost always the timeline primitive is enough. The exceptions:
For those, use Popmotion or a similar library:
<script src="https://unpkg.com/[email protected]/dist/popmotion.min.js"></script>
npx claudepluginhub cekrauseee/design --plugin designProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.