Huzaifa Dhapai

How to Make Professional Motion Animated Videos with AI

  • 4 min read
  • ai video

Thanks for commenting “video”. This is the full breakdown of how I made the LLM explainer video, written so you can follow it even if you have never written a line of code.

What you need

  • Claude (the desktop app works well), which writes the animation for you.
  • HyperFrames, a free open-source tool that turns that animation into an MP4 video.
  • ElevenLabs (optional), for a natural-sounding AI voiceover.
  • Node.js, a free program HyperFrames needs to run. Download it from nodejs.org and install it like any normal app. Any version from 22 up works.
  • FFmpeg, a free tool HyperFrames uses to build the final video file. If you don’t have it, Claude can install it for you during setup in Step 2.
  • About 30 to 60 minutes for your first video.

How it works (no code needed to understand it)

Think of it as a three-step assembly line:

  1. You describe the video in normal English: topic, length, style, colours.
  2. Claude builds the scenes. It writes a web page where text, shapes and icons move on screen exactly like you described.
  3. HyperFrames records that page frame by frame and stitches the frames into a normal MP4 you can post anywhere.

Because the video comes from a page that Claude wrote, changing something is as simple as telling Claude “make the title bigger” or “slow down scene 2”. No timelines, no keyframes.

Step 1: Write your script first

Before touching any tool, write what the video will say. Keep it short: 30 to 45 seconds works best for Reels and Shorts. One idea per video.

Let Claude write the script

Ask Claude to “write a 40-second script on [topic], one short sentence per scene, in simple English”. Short sentences are what make animated videos feel sharp.

Step 2: Set up HyperFrames

Open Claude Code (it lives inside the Claude desktop app) and paste this:

Set up HyperFrames for me. Install the HyperFrames skills and create a new project called my-video. I am not technical, so explain what you are doing in simple words.

Behind the scenes, Claude will run the official setup commands (npx skills add heygen-com/hyperframes --full-depth and npx hyperframes init my-video). You just approve each step when it asks. These “skills” teach Claude how to build video scenes correctly, which is why the results look polished instead of messy.

Step 3: Describe the video

This is the most important step. The more specific your description, the more professional the result. Use a prompt like this, and swap in your own details:

Using /hyperframes, create a 40-second vertical video (1080x1920) explaining [your topic]. Here is the script: [paste script]. Style: clean, minimal, off-white background, dark text, one orange accent colour, modern sans-serif font. Each sentence gets its own scene. Animate text sliding in smoothly, highlight the key word in the accent colour, and use simple icons and diagrams. Add captions.

Step 4: Add the voiceover

Generate your narration in ElevenLabs: paste the script, pick a voice, and download the audio file. Then tell Claude:

Add this voiceover file to the video and sync every scene to the narration. Add captions that match the words.

HyperFrames also has built-in text-to-speech if you want to skip ElevenLabs, but a dedicated voice tool usually sounds more natural.

Step 5: Preview and refine

Ask Claude to open the preview so you can watch the video before it is final. Then give feedback the way you would to a human editor:

  • “The text in scene 3 is too small. Make it bigger.”
  • “Slow down the transition between scene 2 and 3.”
  • “Make the keyword orange.”
  • “The ending feels abrupt. Add a call to action scene.”

Repeat until you are happy. Each change takes seconds.

Step 6: Render the final MP4

When it looks right, tell Claude:

Render the final video to MP4.

Under the hood this runs npx hyperframes render. You will get a normal video file you can upload to Instagram, LinkedIn or YouTube.

What makes a video look professional

The tool matters less than these habits:

  • One idea per video. If you need two ideas, make two videos.
  • Few words on screen. Never show a paragraph. Show 3 to 6 words at a time.
  • One accent colour. Use it only on the words that matter.
  • One font family. Big, bold headings; lighter secondary text.
  • Smooth, not flashy. Gentle slides and fades beat spinning and bouncing.
  • Captions always on. Most people watch with sound off.
  • Space to breathe. Leave empty room around text.
  • Match visuals to voice. Whatever is said should appear on screen at the same moment.

Common mistakes to avoid

  • Vague prompts. “Make a cool video about AI” gives generic results. Give topic, script, colours, font style and length.
  • Skipping the script. Without a script, the animation has nothing to follow.
  • Making it too long. Under 45 seconds keeps people watching.
  • Changing everything at once. Ask for one or two fixes per message so you can see what worked.
  • Not previewing. Always preview before rendering the final file.

Quick prompt template

Copy, fill in the brackets, and paste into Claude Code:

Using /hyperframes, create a [length]-second vertical video about [topic]. Script: [script]. Style: [background colour], [text colour], accent colour [colour], [font style]. Scenes: one per sentence, with smooth text animations, icons and simple diagrams. Add captions and sync to this voiceover: [attach audio]. Show me a preview first.