Animated Video
- 95 installs
- 98 repo stars
- Updated April 20, 2026
- bluzir/claude-code-design
animated-video is a Claude Code skill that builds motion design as standalone HTML animations or Remotion MP4 video.
About
This skill builds animated motion design such as explainers, transition reels, and product intros. It chooses between a standalone HTML path using a Remotion-compatible in-browser Stage/Sprite timeline engine and a Remotion path for long-form or MP4-export video. A developer uses it when producing web animations or exportable video from a Claude Code session.
- Two paths: standalone HTML Stage/Sprite engine or Remotion for MP4
- Remotion-compatible in-browser primitives (Stage, Sprite, useTime, Easing)
- Popmotion fallback for spring physics and gesture tracking
Animated Video by the numbers
- 95 all-time installs (skills.sh)
- Ranked #796 of 1,335 Generative Media skills by installs in the Skillselion catalog
- Data as of Aug 1, 2026 (Skillselion catalog sync)
animated-video capabilities & compatibility
- Capabilities
- video generation · ui design
- Works with
- chrome
- Use cases
- video generation · ui design
What animated-video says it does
Build animated motion design (explainer, transition reel, product intro).
For long-form (>60s), multi-scene narrative, or MP4-export needs.
npx skills add https://github.com/bluzir/claude-code-design --skill animated-videoAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 95 |
|---|---|
| repo stars | ★ 98 |
| Last updated | April 20, 2026 |
| Repository | bluzir/claude-code-design ↗ |
What it does
Build explainer or product-intro motion design as standalone HTML animation or Remotion MP4 video.
Who is it for?
Developers producing web explainer animations or exportable video from a design brief.
Skip if: Static UI work with no motion, or simple CSS transitions that do not need a timeline engine.
When should I use this skill?
When building an explainer, transition reel, product intro, or MP4 video animation.
What you get
A rendered HTML animation or an MP4 video built from a timeline of animated scenes.
- Standalone HTML animation
- Remotion MP4 video
- Animated scene compositions
By the numbers
- Two build paths (standalone HTML vs Remotion)
- Standalone HTML path targets animations under ~60s
Files
Animated Video
Two paths depending on complexity. Decide first, tell the user which path you're taking.
Phase 0 — Context pre-flight (auto-detect, ONE question max)
Before deciding Path A vs B, silently check for context: 1. Read .claude/design-tokens.json if exists 2. Bash(ls ~/.claude/design-systems/ 2>/dev/null) — brand folder match 3. Glob codebase tokens 4. Scan brief for github / Figma / image / PRD attachment → dispatch ingestion skills
If nothing — ONE AskUserQuestion: design system / codebase / screenshot / Figma / none / decide. Report "Using <context>. Proceeding."
Path A — Standalone HTML with Stage/Sprite
For any animation that can live in one HTML file (explainer reel, product intro, transition sequences, hero animations — <60s typical).
Uses the Remotion-compatible in-browser engine in starters/animations.jsx. Same mental model as Remotion — different runtime (no build step, runs under Babel standalone).
Available primitives:
| Primitive | Role |
|---|---|
<Stage duration width height [id] [loop] [showControls]> | Root composition. Owns one RAF clock, scale-to-fit canvas, scrubber UI, play/pause. Reads/writes position in localStorage. |
<Sprite start end [easing]> | Active only in [start..end]ms window. Children can be element or (localT) => element. Unmounts when out of range. |
useTime({ stopAt? }) | Returns current ms. Inside Stage: reads shared clock (free). Standalone: spawns its own RAF (costlier). |
useSprite() | Returns local t ∈ [0,1] within the current Sprite. |
Easing | linear, inQuad, outQuad, inOutCubic, outQuart, inOutExpo, spring(stiffness, damping) |
interpolate(t, [in], [out], { clamp?, easing? }) | Piecewise lerp. Supports numbers and hex colors. |
<FadeIn>, <FadeOut>, <SlideIn from=...>, <ScaleIn from=...>, <Reveal from=...> | Entry/exit sugar. Persist after their animation window (unlike Sprite). |
<Transition from to duration> | Standalone one-shot wrapper (no Stage needed). |
Steps:
1. Invoke Skill: frontend-design for aesthetic direction 2. Create artifacts/<slug>.html with React + Babel + animations.jsx 3. Bash(cp starters/animations.jsx "$(dirname <html>)/") — copy starter next to the HTML 4. Run /serve (required for external .jsx CORS) 5. Compose the scene. Pattern:
function Scene() {
const t = useTime(); // Stage-shared clock
// drive properties via interpolate()
const bg = interpolate(t, [0, 2000, 5000], ['#fef9f3', '#f3d8a8', '#8a5a22'], { easing: Easing.inOutCubic });
return (
<div style={{ position: 'absolute', inset: 0, background: bg }}>
<FadeIn start={0} duration={500}>
<h1>Entry stays visible after 500ms</h1>
</FadeIn>
<Reveal start={400} duration={700} from="bottom" distance={40}>
<p>Fade + slide combo</p>
</Reveal>
<Sprite start={1500} end={3500} easing={Easing.outQuart}>
{(local) => <div style={{ opacity: local, transform: `scale(${local})` }}>Bounded — disappears after 3500</div>}
</Sprite>
</div>
);
}
function App() {
return <Stage duration={5000} width={1920} height={1080} loop={false}><Scene/></Stage>;
}6. /done http://127.0.0.1:4567/artifacts/<slug>.html — verify scrubber works, animation plays cleanly, console clean 7. For exporting frames/seeking for PPTX: external tools can send window.postMessage({ seekMs: N, playing: false }, '*') — Stage listens and jumps
Path B — Remotion (MP4 export, multi-scene video)
For long-form (>60s), multi-scene narrative, or MP4-export needs.
1. Delegate to Skill: remotion-best-practices — full Remotion workflow 2. Set up artifacts/<slug>-remotion/ as a separate Remotion project 3. Return a preview HTML and MP4 artifact when done
When to pick which
| Need | Path |
|---|---|
| Single scene, any length | A |
| Product intro, explainer under a minute | A |
| Multi-scene narrative | B |
| MP4 export required | B |
| Browser-only preview (ship an HTML) | A |
| Exact frame timing (e.g. 30fps video) | B (Remotion is frame-based) |
| Physics / gesture-driven | A with Popmotion <script src> fallback, or B |
Popmotion fallback
For real spring physics, keyframe math, or gesture tracking beyond what Easing.spring() supports, add:
<script src="https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js"></script>and use window.popmotion directly.
Verify
Path A: /done <url> — scrubber reaches end, clicking bar seeks, play/pause toggles, console clean. If the user wants PPTX frames of this animation: seek via postMessage before each screenshot.
Path B: Remotion preview server at localhost:3000 + exported MP4.
Related skills
Remotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.451k4.2k
Ai Video GenerationGenerate videos using 40+ AI models including Veo, Seedance, and others via inference.sh442k665Ai Image GenerationGenerate images using 50+ AI models including FLUX, Gemini, and Replicate via inference.sh441k665Ai Avatar VideoGenerate videos featuring AI avatars for product demos, tutorials, marketing, or explainers441k665Remotion RenderRender videos programmatically using React components and Remotion framework441k665
Remotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k665FAQ
When should you use Remotion instead of the standalone HTML path?
Use Remotion for long-form (>60s), multi-scene narrative, or MP4-export needs; use the standalone HTML Stage/Sprite path for single-scene, browser-only animations.
How do you add real spring physics beyond Easing.spring()?
Add the Popmotion script from unpkg and use window.popmotion directly for spring physics, keyframe math, or gesture tracking.