Quick Setup for Cross-Platform Video Rendering

Install Node.js 22 (winget on Windows: winget install OpenJS.NodeJS.LTS; nvm on macOS/Linux) and FFmpeg 7 (winget/apt/brew installs). Verify with node --version and ffmpeg -version. Choose an AI code agent: Claude Code (Anthropic native installer) or Codex CLI (npm install -g @openai/codex). Add HyperFrames skills via npx skills add heygen-com/hyperframes—these teach agents framework patterns like data-attributes, paused GSAP timelines, and sub-composition wiring. Initialize a project with npx hyperframes init my-video, selecting starters like blank, warm grain, or Swiss grid.

This skips React build pipelines (unlike Remotion), enabling agent-driven edits to plain index.html files.

Agentic Iteration with Live Preview

Launch your agent in the project directory (cd my-video then claude). Prefix prompts with /hyperframes for skill context, e.g., /hyperframes Build a 5-second intro saying 'Hello HyperFrames' with fade-in. Agent edits index.html; run npx hyperframes preview in another terminal for a browser studio that auto-reloads on saves—no rebuild loop.

Iterate conversationally: prompt for bigger title + subtitle like 'Made with HyperFrames', and preview updates instantly. Agents leverage skills for correct patterns, producing clean, centered animations in seconds.

Validation and Deterministic Rendering

Before rendering, run npx hyperframes check: lints for missing data-attributes, validates WCAG AA contrast in headless Chrome, and inspects for layout overflow. Zero errors? Render with npx hyperframes render: headless Chromium steps frames deterministically (pausing time), FFmpeg encodes to MP4. A 5-second clip renders in ~6 seconds.

This pipeline—prompt → preview → check → render—ensures production-ready videos without broken frames, all open-source and fully deterministic.