Claude Code video generation

HyperFrames workflow

HyperFrames is an HTML/GSAP video composition framework by HeyGen. It's lightweight, MIT-licensed and uses a single paused GSAP timeline that the renderer steps through frame-by-frame.

設置

1. Install Node.js 22+ and FFmpeg
2. npx hyperframes init my-video
3. Ask Claude Code to write an HTML composition with a paused GSAP timeline
4. npx hyperframes render --quality delivery --output out.mp4

Key rules

• One paused GSAP timeline registered on window.__timelines[id]
• No Date.now() or unseeded Math.random()
• Escape all user text before inserting into HTML
• The renderer controls time — no requestAnimationFrame loops

適合用途

Simple explainers, data animations, product demos. Fast startup, minimal dependencies.

Remotion workflow

Remotion lets you build video scenes as React components. It has a rich ecosystem of packages for animations, transitions, audio and data-driven content.

設置

1. Install Node.js 22+
2. npx create-video@latest my-video
3. Ask Claude Code to write React components for each scene
4. npx remotion render src/index.ts MyComp out.mp4

Key rules

• Use useCurrentFrame() and useVideoConfig() for timing
• Deterministic rendering — no side effects in render
• Audio must be declared with <Audio> components

適合用途

Complex compositions, data-driven dashboards, projects that need npm packages or heavy interactivity. More setup, more flexibility.

HyperFrames vs Remotion

Templates & starting points

Starting from scratch with Claude Code works, but you'll reinvent layout patterns, timing curves and responsive sizing every time. Options:

• claudemotion.tv templates — 18 original HyperFrames-based styles with connected Skills that guide your agent. No manual coding required. See the styles →
• HyperFrames community — check the HyperFrames GitHub for starter examples. The community is small but growing.
• Remotion templates — the Remotion team maintains starter kits for common patterns (text animations, social posts, data visualizations).
• Build your own — prompt Claude Code to create a base template, then iterate. Works best if you understand HTML animation fundamentals.

Rendering to MP4

Both frameworks render locally. Requirements:

• FFmpeg + ffprobe — both must be installed and on your PATH
• Node.js 22+
• Rendering a 15-second video takes 10–60 seconds depending on complexity and hardware
• Verify the result: ffprobe -v error -show_entries format=duration -of csv=p=0 out.mp4

When to use a toolkit instead

Building from scratch is great for learning, but a toolkit saves time for production work: