Motion Graphics from a Prompt

Generate animated title cards, product launches, and visual content — no After Effects, no React, just HTML.

Examples

These were created with Hyperframes + Claude Code in a single session — from idea to MP4 in under 5 minutes each.

Product Promo

HeyGen product promo — animated text, voiceover, motion graphics. Built from a single prompt.

Architecture Explainer

Minerva AI Tutor architecture — animated system diagram with TTS voiceover explaining how each component works.

The Problem

Motion graphics traditionally require After Effects, Remotion (React), or hiring a designer. AI agents can write code — but most video tools don’t speak code. There’s no way to go from “make me a product launch video” to a rendered MP4 without a human in the middle.

How It Works

Describe what you want → AI agent writes HTML + GSAP → Preview in browser → Render to MP4

Hyperframes turns HTML into video. Your AI coding agent (Claude Code, Cursor, Copilot) writes the HTML composition, and Hyperframes renders it frame-by-frame into a video file.

Build It

1. Install and scaffold

   npx hyperframes init my-video
   cd my-video
   

   This creates a project with an empty composition, installs AI skills, and sets up the preview server. The skills tell your AI agent how to write valid Hyperframes compositions.

2. Describe what you want to your AI agent

   Open the project in Claude Code (or your preferred AI agent) and describe the video:

   Create a 15-second product launch video for "Acme AI" —
   dark background, animated headline that types in letter by letter,
   stats that count up (10K users, 99.9% uptime, 50ms latency),
   and a logo reveal at the end. Vertical 9:16 for social.
   

   The agent uses the installed Hyperframes skills to write a valid HTML composition with GSAP animations.

   Write like you’re briefing a designer, not writing code. Describe the vibe, the content, and the pacing. The AI agent handles the implementation — data-start, data-duration, class="clip", GSAP timeline registration, etc.

3. Preview and iterate

   npx hyperframes dev
   

   Opens a browser preview at localhost:3002 with hot reload. Edit the composition (or ask your agent to), and changes appear instantly.

   Common follow-ups:

   • “Make the text bigger”
   • “Change the background to a gradient”
   • “Speed up the transitions”
   • “Add a sound effect when the stats appear”
4. Render to MP4

   npx hyperframes render
   

   Captures every frame via headless Chrome, encodes with FFmpeg. Output lands in renders/.

   Flag	What it does	Default
   --fps 24|30|60	Frame rate	30
   --quality draft|standard|high	Render quality	standard
   --format mp4|webm	Output format	mp4

   Use --quality draft while iterating — it’s significantly faster. Switch to standard or high for the final export.

What Makes a Good Prompt

Based on testing 13+ videos in a single session:

Approach	Result
”Make a video about X”	Works, but generic. Agent defaults to dark bg + centered text.
”Make a video about X, inspired by [specific style]“	Much better. Give a reference and the agent adapts.
”Make a video about X” + 2-3 rounds of feedback	Best results. Start broad, then refine (“make it more playful”, “less corporate”).

1-3 prompts gets you a good result if you describe the idea clearly. Complex compositions (multi-scene, data-driven) take 3-6 prompts.

Beyond Text and Shapes

Hyperframes renders anything a browser can render. This means:

• SVG animations — Logo reveals, icon transitions, animated illustrations
• Canvas/WebGL — Particle systems, generative art, 3D scenes
• Data visualizations — Charts, graphs, dashboards that animate
• Game-like content — Simulations, interactive-looking demos
• Math-driven patterns — Physics simulations, algorithmic art

If you can build it in a browser, Hyperframes can turn it into a video.

Add Audio

Hyperframes supports audio tracks natively. You can:

1. Use HeyGen TTS to generate voiceover (see Voices)
2. Add music as an <audio> element with data-start and data-volume
3. Synthesize sounds programmatically (sorting visualizers, game SFX)

<audio id="voiceover" data-start="0" data-track-index="5"
       data-volume="0.9" src="voiceover.wav"></audio>
<audio id="music" data-start="0" data-track-index="6"
       data-volume="0.3" src="background.mp3"></audio>

---

Next Steps

Data Visualization Videos

Turn data into animated video — charts, dashboards, algorithmic visualizations.

Automated Pipeline

CI/CD integration for continuous video generation from data.

Hyperframes Docs

Full framework reference — data attributes, templates, rendering options.