Make motion graphics with Claude Code, without After Effects

What you need

• Claude Code. It needs a paid Claude plan (Pro, Max, Team or Enterprise) or a Console account. The free claude.ai plan does not include Claude Code.
• Node.js 22 or newer and FFmpeg. HyperFrames needs both.
• HyperFrames. HeyGen's open-source framework that turns HTML into MP4. It is free under the Apache 2.0 licence, with no per-render fees.
• Optional: an ElevenLabs account for the voiceover and a Suno account for the music. We used both, but you can skip either one.

Install Claude Code and HyperFrames

Open Terminal and install Claude Code with Anthropic's native installer:

curl -fsSL https://claude.ai/install.sh | bash

Open a new terminal window and run claude --version to check it worked. Then add the HyperFrames skills, so Claude knows how to write video compositions:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Start Claude in a folder for your video by typing claude.

Write the script and make the voiceover

Write your narration first, because the voice decides the timing of every scene. Keep it short. Ours is about 120 words and runs 55 seconds.

Paste the script into ElevenLabs Text to Speech, choose a voice, generate it and download the MP3. If you change one line later, you only need to regenerate that line and join it on. We did exactly that when we changed the ending.

Create the project from your voiceover

Make a vertical project and hand it the voiceover. HyperFrames transcribes it locally, so Claude gets the exact second each word is spoken:

npx hyperframes init my-video --resolution=portrait --audio voiceover.mp3

Use --resolution=landscape for a 1920×1080 YouTube version. Those word timings are what let every word, slam and glitch land exactly on the voice.

Tell Claude what the video should look like

This is the step that replaces After Effects. You describe the video and Claude writes it as HTML and GSAP animation. Ours started from a prompt like this:

Make a 9:16 kinetic-typography explainer timed to voiceover.mp3.
Dark grid background, bold white text, orange accent words,
glitch cuts between scenes, a code editor and a preview panel,
and an orange full-screen slam for "THIS IS CRAZY".
End on our logo with a "Visit fynl.io" button.

Name the look, the colours, the moments that should hit hard, and how it ends. The full prompt pack is in the second PDF below.

Change it by asking, not by dragging keyframes

Preview it in your browser:

npx hyperframes preview

Then ask for changes in plain words, for example: make this transition smoother, change the colour, slow this part down, swap the brand to fynl.io. Claude rewrites the code and you refresh. There are no layers and no keyframes to move by hand.

Add music and render the MP4

For music we used Suno: an instrumental with the style dark cinematic tech, pulsing synth bass, glitchy electronic percussion, 120 bpm, no vocals. We mixed it well under the voice and let it duck whenever the voice speaks, so the words stay clear.

When it looks right, render:

npx hyperframes render --quality high --output video.mp4

For the horizontal version, copy the project, switch it to 1920×1080, and render again. Claude can lay out both from the same code.

Questions people also ask

Sources

• HyperFrames on GitHub (HeyGen) — install, requirements and licence
• HyperFrames documentation
• Claude Code setup — Anthropic documentation
• ElevenLabs Text to Speech
• Suno
• FFmpeg download
• Node.js download