Hyperframes: HTML Video Gen Beats React Remotion
Hyperframes uses HTML for smoother AI-generated videos than Remotion's React approach, enabling direct animation of landing pages, CodePens, or websites via 7-step agent pipelines.
HTML Renders Natural Animations Better Than React
Hyperframes builds video compositions as HTML pages, allowing you to paste landing pages, design system components, or CodePen demos for animation—unlike Remotion's React-based system. This HTML bet excels for AI agents writing videos and DOM-based visual editors. Evidence from Ben Leu's comparison (Hyperframes engineer): same prompt yields clunky movements in Remotion but fluid fades, particles, and growth effects in Hyperframes. HTML expresses visuals more intuitively, producing 10-second clips with professional smoothness using Gap animations—a robust JS library for playful, pro-grade motion. Trade-off: AI video quality isn't 100% high-end yet, but user workflows, prompts, and data improve it over time.
Cold Start: Prompt to Preview in Seconds
Install via Cloud Code by pasting setup commands, which add 5 agent skills including Gap animations. Restart Claude desktop app to access. For cold starts, prompt specifically: video length (e.g., 10s), assets, colors, typography, text. Agent generates code; run hyperframes preview for editable DOM view with play button, or hyperframes render for MP4 output to folder. Result: simple intros like "Introducing Lumen, built for quiet work" with clean fades—ready in minutes without manual coding.
Warm Start Pipeline Turns Websites into Videos
Feed URLs for 20-second clips (e.g., "Create 20s product launch from linear.app like Apple keynote"). Triggers 7-step agent workflow: 1) Capture/understand (DOM text, headings, CSS, SVG logos); 2) Design; 3) Script; 4) Storyboard; 5) VO; 6) Timing; 7) Build/validate. Outputs: font growths, UI popups, particle effects, purpose-built taglines, human/agent visuals, ending logos. Enrich captures with Gemini Vision API key (.env file) for detailed image descriptions beyond DOM (e.g., site section visuals). Works on any site (Airbnb, Twitter, framer.com). Iteration prompts: "Swap to dark mode, add fade-out, lower third at 3s with name/title." Use vocabulary like caption tones, transitions, audio-reactive animation for refined outputs—full guide skimmable for agent skills.