animated-video

Name: animated-video
Author: bluzir

93installs10forks

How to install animated-video?

bluzir/claude-code-design/animated-video

$npx -y skills add bluzir/claude-code-design --skill animated-video

Installs into the current project.

Summary

Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.jsx for in-browser compositions or Remotion for full video/MP4 workflows.

Files · 1

View on GitHub

SKILL.md

1	# Animated Video
2
3	Two paths depending on complexity. Decide first, tell the user which path you're taking.
4
5	## Phase 0 — Context pre-flight (auto-detect, ONE question max)
6
7	Before deciding Path A vs B, silently check for context:
8	1. `Read .claude/design-tokens.json` if exists
9	2. `Bash(ls ~/.claude/design-systems/ 2>/dev/null)` — brand folder match
10	3. `Glob` codebase tokens
11	4. Scan brief for github / Figma / image / PRD attachment → dispatch ingestion skills
12
13	If nothing — ONE `AskUserQuestion`: design system / codebase / screenshot / Figma / none / decide. Report "Using <context>. Proceeding."
14
15	## Path A — Standalone HTML with Stage/Sprite
16
17	For any animation that can live in one HTML file (explainer reel, product intro, transition sequences, hero animations — <60s typical).
18
19	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).
20
21	Available primitives:
22
23	\| Primitive \| Role \|
24	\|---\|---\|
25	\| `<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. \|
26	\| `<Sprite start end [easing]>` \| Active only in `[start..end]`ms window. Children can be element or `(localT) => element`. Unmounts when out of range. \|
27	\| `useTime({ stopAt? })` \| Returns current ms. Inside Stage: reads shared clock (free). Standalone: spawns its own RAF (costlier). \|
28	\| `useSprite()` \| Returns local t ∈ [0,1] within the current Sprite. \|
29	\| `Easing` \| `linear`, `inQuad`, `outQuad`, `inOutCubic`, `outQuart`, `inOutExpo`, `spring(stiffness, damping)` \|
30	\| `interpolate(t, [in], [out], { clamp?, easing? })` \| Piecewise lerp. Supports numbers and hex colors. \|
31	\| `<FadeIn>`, `<FadeOut>`, `<SlideIn from=...>`, `<ScaleIn from=...>`, `<Reveal from=...>` \| Entry/exit sugar. Persist after their animation window (unlike Sprite). \|
32	\| `<Transition from to duration>` \| Standalone one-shot wrapper (no Stage needed). \|
33
34	Steps:
35
36	1. Invoke `Skill: frontend-design` for aesthetic direction
37	2. Create `artifacts/<slug>.html` with React + Babel + `animations.jsx`
38	3. `Bash(cp starters/animations.jsx "$(dirname <html>)/")` — copy starter next to the HTML
39	4. Run `/serve` (required for external `.jsx` CORS)
40	5. Compose the scene. Pattern:
41
42	```jsx
43	function Scene() {
44	const t = useTime(); // Stage-shared clock
45	// drive properties via interpolate()
46	const bg = interpolate(t, [0, 2000, 5000], ['#fef9f3', '#f3d8a8', '#8a5a22'], { easing: Easing.inOutCubic });
47	return (
48	<div style={{ position: 'absolute', inset: 0, background: bg }}>
49	<FadeIn start={0} duration={500}>
50	<h1>Entry stays visible after 500ms</h1>
51	</FadeIn>
52	<Reveal start={400} duration={700} from="bottom" distance={40}>
53	<p>Fade + slide combo</p>
54	</Reveal>
55	<Sprite start={1500} end={3500} easing={Easing.outQuart}>
56	{(local) => <div style={{ opacity: local, transform: `scale(${local})` }}>Bounded — disappears after 3500</div>}
57	</Sprite>
58	</div>
59	);
60	}
61
62	function App() {
63	return <Stage duration={5000} width={1920} height={1080} loop={false}><Scene/></Stage>;
64	}
65	```
66
67	6. `/done http://127.0.0.1:4567/artifacts/<slug>.html` — verify scrubber works, animation plays cleanly, console clean
68	7. For exporting frames/seeking for PPTX: external tools can send `window.postMessage({ seekMs: N, playing: false }, '*')` — Stage listens and jumps
69
70	## Path B — Remotion (MP4 export, multi-scene video)
71
72	For long-form (>60s), multi-scene narrative, or MP4-export needs.
73
74	1. Delegate to `Skill: remotion-best-practices` — full Remotion workflow
75	2. Set up `artifacts/<slug>-remotion/` as a separate Remotion project
76	3. Return a preview HTML and MP4 artifact when done
77
78	## When to pick which
79
80	\| Need \| Path \|
81	\|---\|---\|
82	\| Single scene, any length \| A \|
83	\| Product intro, explainer under a minute \| A \|
84	\| Multi-scene narrative \| B \|
85	\| MP4 export required \| B \|
86	\| Browser-only preview (ship an HTML) \| A \|
87	\| Exact frame timing (e.g. 30fps video) \| B (Remotion is frame-based) \|
88	\| Physics / gesture-driven \| A with Popmotion `<script src>` fallback, or B \|
89
90	## Popmotion fallback
91
92	For real spring physics, keyframe math, or gesture tracking beyond what `Easing.spring()` supports, add:
93	```html
94	<script src="https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js"></script>
95	```
96	and use `window.popmotion` directly.
97
98	## Verify
99
100	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 befor

People who liked this also viewed

6 picks

Type

animated-video

93installs10forks

View on GitHub

How to install animated-video?

bluzir/claude-code-design/animated-video

$npx -y skills add bluzir/claude-code-design --skill animated-video

Installs into the current project.

Summary

Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.jsx for in-browser compositions or Remotion for full video/MP4 workflows.

Files · 1

View on GitHub

SKILL.md

1	# Animated Video
2
3	Two paths depending on complexity. Decide first, tell the user which path you're taking.
4
5	## Phase 0 — Context pre-flight (auto-detect, ONE question max)
6
7	Before deciding Path A vs B, silently check for context:
8	1. `Read .claude/design-tokens.json` if exists
9	2. `Bash(ls ~/.claude/design-systems/ 2>/dev/null)` — brand folder match
10	3. `Glob` codebase tokens
11	4. Scan brief for github / Figma / image / PRD attachment → dispatch ingestion skills
12
13	If nothing — ONE `AskUserQuestion`: design system / codebase / screenshot / Figma / none / decide. Report "Using <context>. Proceeding."
14
15	## Path A — Standalone HTML with Stage/Sprite
16
17	For any animation that can live in one HTML file (explainer reel, product intro, transition sequences, hero animations — <60s typical).
18
19	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).
20
21	Available primitives:
22
23	\| Primitive \| Role \|
24	\|---\|---\|
25	\| `<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. \|
26	\| `<Sprite start end [easing]>` \| Active only in `[start..end]`ms window. Children can be element or `(localT) => element`. Unmounts when out of range. \|
27	\| `useTime({ stopAt? })` \| Returns current ms. Inside Stage: reads shared clock (free). Standalone: spawns its own RAF (costlier). \|
28	\| `useSprite()` \| Returns local t ∈ [0,1] within the current Sprite. \|
29	\| `Easing` \| `linear`, `inQuad`, `outQuad`, `inOutCubic`, `outQuart`, `inOutExpo`, `spring(stiffness, damping)` \|
30	\| `interpolate(t, [in], [out], { clamp?, easing? })` \| Piecewise lerp. Supports numbers and hex colors. \|
31	\| `<FadeIn>`, `<FadeOut>`, `<SlideIn from=...>`, `<ScaleIn from=...>`, `<Reveal from=...>` \| Entry/exit sugar. Persist after their animation window (unlike Sprite). \|
32	\| `<Transition from to duration>` \| Standalone one-shot wrapper (no Stage needed). \|
33
34	Steps:
35
36	1. Invoke `Skill: frontend-design` for aesthetic direction
37	2. Create `artifacts/<slug>.html` with React + Babel + `animations.jsx`
38	3. `Bash(cp starters/animations.jsx "$(dirname <html>)/")` — copy starter next to the HTML
39	4. Run `/serve` (required for external `.jsx` CORS)
40	5. Compose the scene. Pattern:
41
42	```jsx
43	function Scene() {
44	const t = useTime(); // Stage-shared clock
45	// drive properties via interpolate()
46	const bg = interpolate(t, [0, 2000, 5000], ['#fef9f3', '#f3d8a8', '#8a5a22'], { easing: Easing.inOutCubic });
47	return (
48	<div style={{ position: 'absolute', inset: 0, background: bg }}>
49	<FadeIn start={0} duration={500}>
50	<h1>Entry stays visible after 500ms</h1>
51	</FadeIn>
52	<Reveal start={400} duration={700} from="bottom" distance={40}>
53	<p>Fade + slide combo</p>
54	</Reveal>
55	<Sprite start={1500} end={3500} easing={Easing.outQuart}>
56	{(local) => <div style={{ opacity: local, transform: `scale(${local})` }}>Bounded — disappears after 3500</div>}
57	</Sprite>
58	</div>
59	);
60	}
61
62	function App() {
63	return <Stage duration={5000} width={1920} height={1080} loop={false}><Scene/></Stage>;
64	}
65	```
66
67	6. `/done http://127.0.0.1:4567/artifacts/<slug>.html` — verify scrubber works, animation plays cleanly, console clean
68	7. For exporting frames/seeking for PPTX: external tools can send `window.postMessage({ seekMs: N, playing: false }, '*')` — Stage listens and jumps
69
70	## Path B — Remotion (MP4 export, multi-scene video)
71
72	For long-form (>60s), multi-scene narrative, or MP4-export needs.
73
74	1. Delegate to `Skill: remotion-best-practices` — full Remotion workflow
75	2. Set up `artifacts/<slug>-remotion/` as a separate Remotion project
76	3. Return a preview HTML and MP4 artifact when done
77
78	## When to pick which
79
80	\| Need \| Path \|
81	\|---\|---\|
82	\| Single scene, any length \| A \|
83	\| Product intro, explainer under a minute \| A \|
84	\| Multi-scene narrative \| B \|
85	\| MP4 export required \| B \|
86	\| Browser-only preview (ship an HTML) \| A \|
87	\| Exact frame timing (e.g. 30fps video) \| B (Remotion is frame-based) \|
88	\| Physics / gesture-driven \| A with Popmotion `<script src>` fallback, or B \|
89
90	## Popmotion fallback
91
92	For real spring physics, keyframe math, or gesture tracking beyond what `Easing.spring()` supports, add:
93	```html
94	<script src="https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js"></script>
95	```
96	and use `window.popmotion` directly.
97
98	## Verify
99
100	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 befor

People who liked this also viewed

6 picks

Type