Chris EichlerAI-first Product
& Marketing

Motion Graphics with Claude


Why code and not an AI video model

With video models like Kling or Veo, you roll the dice. If you don't like a scene, you generate again, pay again and hope the rest stays the same.

HyperFrames works differently. Claude writes animated HTML, a headless browser plays the page, records it frame by frame, and FFmpeg turns it into an MP4. Because every frame comes from code, you say "bigger font, green bars", and exactly that changes. It costs a few tokens, not a new generation run.

HyperFrames is open source, made by HeyGen and available under the Apache 2.0 license on GitHub.

Step 1: Check the prerequisites

You need three things:

  • Claude Code on a Pro or Max plan, in the terminal or the desktop app
  • Node.js 22 or newer. Check with node -v
  • FFmpeg. Check with ffmpeg -version, install on a Mac with brew install ffmpeg

If something's missing, just tell Claude Code: "Check whether Node 22 and FFmpeg are installed and install whatever is missing." It asks before installing anything.

Step 2: Install HyperFrames

In the terminal:

npx skills add heygen-com/hyperframes

This gives Claude Code the HyperFrames skills: how a composition is structured, how timing and animation work, how to render. Alternatively, give Claude the GitHub URL and write "Set up HyperFrames for me".

Then restart Claude Code once so the skills are loaded.

Step 3: Describe your first video

Create an empty project folder and open Claude Code in it. Then describe what the video should achieve. Not a step-by-step recipe with seconds and effects, but goal, audience and look. Claude plans the rest.

A prompt to start with:

Build me a 15-second vertical video (1080x1920) with HyperFrames.

Goal: Explain in three steps how my newsletter works:
1. You sign up, 2. every Friday you get one workflow,
3. you rebuild it in 10 minutes.

Audience: marketers and founders, not technical.
Look: dark background, one accent color (orange), big clear type,
calm motion, no wild transitions.
Max 6 words per on-screen text.

Check the result yourself before you show it to me.

The last line matters. Claude can look at frames as images and catch issues like clipped text before you ever see them.

Step 4: Preview and change it with a sentence

For the preview:

npx hyperframes preview

This opens a studio in your browser where you play and scrub the video. Now comes the real advantage. Instead of regenerating, you tell Claude what should change:

  • "Scene 2 is too fast, give it one more second."
  • "Make the text in the last scene bigger, it's unreadable on a phone."
  • "Swap orange for my green #2BB673."

Claude changes exactly that spot in the code and leaves the rest as it was.

Step 5: Render

When you're happy:

npx hyperframes render

You get an MP4 you can upload right away. Run npx hyperframes check first, it scans the composition for common problems like missing files or low contrast.

How I use it: my own library

I don't let Claude animate freely every time. For my reels I built a small library: simplified interfaces (chat, list, inbox), terminal and Git repos, and explainer graphics (flow, comparison, number). For each sentence in a reel, Claude picks the matching module and only fills in the content.

That gives me two things. Every insert looks like it came from the same studio, and the results are predictable because Claude doesn't reinvent the wheel each time. If you make videos regularly, this is the next step after your first one: have Claude turn your best results into a skill of your own.

Common mistakes

  • Too much recipe in the prompt. If you dictate every second, you get exactly that and nothing more. Describe the feeling and the goal, not the keyframes.
  • AI music and AI sound effects. They still sound artificial. Use royalty-free music, for example from Pixabay, and give Claude the file.
  • Treating the first draft as final. It rarely is. Plan for two or three rounds of changes.
  • Underestimating your plan's usage. Longer videos take time: in Julian Ivanov's tests, a cut short from raw footage took 15 to 20 minutes, an ad around 40 minutes, a one-minute explainer about an hour (YouTube, Oct 1, 2026). That eats noticeably into your usage limits.

Next steps

  • Let it cut raw footage: Drop a talking-head video into the folder and let Claude remove flubs and pauses, add captions and build in graphics. Nate Herk walks through the process in detail (YouTube, Sep 25, 2026).
  • Add a voice: With an ElevenLabs key you get voiceover and transcription. Transcription also works locally and for free with Whisper.
  • Your own skill: After three or four videos you like, have Claude build a skill from them. From then on you never start from zero.

Sources:

Ideas on AI-first Product Management & Marketing, straight to your inbox.

No spam, unsubscribe at any time

Chris Eichler