Make a Reel from a text prompt

You can make an Instagram Reel, a TikTok or a YouTube Short from a text prompt by asking Claude Code to build it with HyperFrames. Claude Code turns your description into a small web page with a timed animation, HyperFrames captures that page frame by frame, and FFmpeg encodes the frames and the sound into an MP4 you can post.

This guide walks through the whole loop once, from an empty folder to a 1080 x 1920 video, and shows the prompt shape that gives predictable results.

Set up Claude Code and HyperFrames

You need three things:

• Claude Code. It comes with a paid Claude plan that includes it (Pro or higher). Install it with the official guide at code.claude.com/docs and sign in. It runs in a terminal on a Mac or a Windows computer. No computer? Claude Code also runs in the cloud from the Claude app; see making Reels from your phone.
• Node.js 22 or newer and FFmpeg. HyperFrames needs both. FFmpeg is the tool that turns frames and audio into a video file.
• HyperFrames. Free, open-source software by HeyGen (github.com/heygen-com/hyperframes). You do not install it by hand: the npx hyperframes commands fetch it when they run.

You can ask Claude Code to check and install what is missing. It asks for permission before it runs a command, so read each request and allow it.

Start a project folder

Make a folder for your videos, open a terminal in it and type claude. Every video lives in its own project folder. The prompt below asks Claude Code to create one with the HyperFrames starter:

npx hyperframes init tip-reel --non-interactive --resolution portrait

portrait gives the vertical 1080 x 1920 canvas that Reels, TikTok and Shorts use.

Write the prompt in five parts

A vague prompt ("make a cool reel about captions") makes Claude Code guess, and guesses are where generic videos come from. Answer five questions instead: the canvas, what happens when, the look, the sound and how to finish. Here is a complete prompt for a six-second hook:

Make this with HyperFrames. The brief is complete: build it straight away, no interview.

FORMAT: 1080x1920, 30 fps, 6.0 s. Run npx hyperframes init tip-reel --non-interactive --resolution portrait, then work in tip-reel/.
SCENES:
- 0.0 to 0.3 s: dark background, nothing else.
- 0.3 s: "STOP" slams in centered at y 640 (scale 1.4 to 1 in 0.3 s, expo.out).
- 0.9 s: "WRITING" slams in at y 860 the same way.
- 1.5 s: "LONG CAPTIONS" slams in at y 1080 in yellow.
- 1.8 to 4.8 s: hold still so people can read.
- 4.8 s: all words drop 60 px and fade out in 0.2 s.
STYLE: background #0A0A0B, text #FFFFFF, accent #FFE600. A bold condensed font from a local font file, caps, 150 px. All text inside x 60 to 940, y 250 to 1440.
SOUND: sfx/hit.wav at 0.3, 0.9 and 1.5 s, volume 0.6.
RENDER: run npx hyperframes check and fix every error, snapshot 0.6, 2.0 and 4.0 s and look at the frames, then render to renders/tip.mp4 and tell me the path.

Put a short hit sound in the project's sfx folder first, or delete the SOUND line. The guide to prompt structure explains each of the five parts in detail.

Let Claude Code build, check and render

After you press Enter, Claude Code works through the brief:

1. It writes index.html: the layout in HTML and CSS, the motion as a paused GSAP timeline, and each sound as an <audio> tag with a start time and a volume.
2. It runs npx hyperframes check, which looks for broken structure, runtime errors, layout and contrast problems, and fixes what it reports.
3. It takes snapshots at the times you named and looks at them. This is where clipped words and text under the app buttons get caught.
4. It runs npx hyperframes render. HyperFrames opens the page in its own copy of Chrome, steps through it one frame at a time (6 seconds at 30 fps is 180 frames) and FFmpeg encodes the result with the sound mixed in.

The MP4 lands in renders/. Send it to your phone and post it like any other video.

Change it by talking

Because the video is a text file, changes are a sentence away: "make the yellow line bigger", "hold the words until 5 seconds", "try a white background". Claude Code edits the page and renders again. The same input always renders the same frames, so nothing shifts that you did not ask to change.

If you plan to reuse a design, ask Claude Code to turn the words and colors into variables. Then a new version is one line, and you can render many versions at once with batch rendering.

When something looks wrong

Try it without buying anything

The free starter kit has three prompts written in this five-part format, five sound effects, one finished template and three UI Motion animations, so you can run this whole loop today. The full pack adds 250 prompts and 60 templates built the same way.