Make a video by describing it.

First, what is HyperFrames? Think of a video as a website — text, images, a logo, some motion. That's a website with animation. HyperFrames takes that website and records it, frame by frame, into a video.

A traditional video editor makes you move every clip. HyperFrames lets you describe the whole thing in a sentence, and AI does the rest. You stop dragging clips on a timeline. You start describing the video you want.

The whole setup is 3 steps.

install hyperframes video editor

If the command didn't work, open a Terminal and run this yourself:

npx skills add heygen-com/hyperframes

Two sentences → a real video.

Now we'll make your first video. Here's the prompt — paste it into Claude and hit enter:

Create an 8-second landscape video explaining the health benefits of sleep, and choose one strong animated visual metaphor that makes the idea instantly understandable. Keep it fast to render.

Claude creates a plan and builds the video. Give it a few minutes — around 5 is normal, so if it's still working, it's not stuck.

Want to watch it?

Type in Claude:

launch preview

It opens the HyperFrames preview studio in your browser. If you're in Claude Desktop, you can also click the link to see the video play.

A vague prompt gives you a vague video.

Good HyperFrames prompts have 3 parts:

• The source — a website link, a topic, or a script. What's the video ABOUT?
• The length — how many seconds. "15 seconds", "30 seconds", "1 minute".
• The vibe — the feeling. "Bold and cinematic", "clean and minimal", "warm", "dark and techy".

Same idea as the sleep video, with way more pizzazz. This one uses the faceless-explainer workflow — if Claude doesn't have it yet, it offers to install it; say yes.

Using hyperframes and /faceless-explainer, create a 30-second faceless explainer about the health benefits of gyokuro tea. Do not make it educational-looking. Make it feel like the opening sequence of a high-budget Netflix investigation: dark cinematic typography, mysterious animated diagrams, fast evidence-board transitions, one shocking hook in the first 3 seconds, and a satisfying "now I finally get it" visual metaphor by the end.

Point Claude at a website. It matches your brand.

Give Claude a real URL and it builds the video from the website's colors, fonts, and screens — AI visits the page and matches your brand. This uses the website-to-video workflow; say yes if it offers to install it.

Using hyperframes and /website-to-video, create a 25-second cinematic product launch video from blotato.com. Capture the website's actual colors, typography, UI, and brand feel, then turn it into a premium Apple-keynote-style reveal with dramatic pacing, animated UI zooms, 3 big benefit cards, clean voiceover, subtle sound effects, and a final CTA. Make it feel like this tiny website is announcing the future.

Turn a plain talking-head clip into a polished edit.

Point Claude at a plain talking-head video (you talking to camera). This one prompt cleans up the recording AND turns it into a fully animated edit — cards, captions, visual metaphors, the works. You do not need to understand every line. Copy it, give Claude your video, and watch what it does. If Claude asks to add a workflow for this, say yes.

Turn a talking-head explainer into a designed motion-graphics edit. Transcribe for word-level timing, then clean the take first: cut false starts, stutters, repeats, and filler, and trim pauses over 0.3s, all transcript-located, seamless, audio + video together. Split the cleaned script into concept beats; for each concept invent the strongest visual metaphor (object, mechanism, diagram, comparison) that makes it instantly legible. No bullet lists or icon rows; vary the forms beat to beat.

One visual system throughout:

Palette (light, blue): soft white radial-gradient bg (#ffffff→#f4f6fb→#e8edf7) with faint blue blobs; accent #2563eb, secondary #38bdf8, ink #0f172a, muted #64748b, cards #fff.

Type: bold grotesque (Archivo/Sora) 800-900 for headlines/numbers, clean sans (Inter/Outfit) for body; only the emphasized keyword is blue.

Motion: white cards (~22px radius, soft shadow) that rise + fade in and settle, no jitter. One paused, seek-safe GSAP timeline; 1920×1080@30.

3 graphic roles: (a) full-frame opaque cards replacing the face, showing metaphors, quotes, comparisons, steps, titles; (b) transparent overlays over the face, like a blue "pill" keyword pop, lower-thirds, captions; (c) one recurring spine motif for the video's throughline that returns at each section marker and pays off at the climax.

Sync: align each graphic to its spoken line, cut to a card as the concept lands, return to the presenter between sections. Hold settled cards for their beat; keep pops brief. Output one MP4 at the source aspect ratio.

Every scene is a plain file you can open and fix.

HyperFrames doesn't just hand you a finished video and hide how it got there — it shows its work, and you can edit any part. The AI always runs through 7 steps, and each one leaves you a text file you can open and tweak:

• Capture — it grabs your website's look (colors, fonts, images).
• Design — it writes a DESIGN.md file: your brand rules for the video.
• Script — it writes the narration into a SCRIPT.md file.
• Storyboard — it plans each scene in a STORYBOARD.md file.
• Voiceover — it makes the narration audio and lines up the timing.
• Build — it writes the actual video scenes.
• Validate — it checks each scene looks right before finishing.

You don't have to touch any of these — but when one scene feels off, you don't re-roll the whole video. Just open STORYBOARD.md, change that ONE scene (make it slower, swap the mood, change the words), and tell Claude to rebuild just that scene.

Add-ons — a recipe for each kind of video.

What you installed is general-purpose HyperFrames; it can make any video. It also has optional workflow skills — import the one that matches what you're making and it already knows the best steps for that job. The ones worth grabbing:

Two more are for developers — /pr-to-video (GitHub code changes) and /remotion-to-hyperframes (porting Remotion videos). Skip those if not relevant.

Easiest way to import them, same as before — just tell Claude:

install all the hyperframes workflows

Claude grabs them all. After that, just describe your video and Claude routes it to the most appropriate workflow.

Not on Claude Code? It still works.

HyperFrames isn't locked to Claude Code. The same tool works in other AI coding agents. Setup is identical: make a folder, open your agent in it, and install HyperFrames the same way — tell your agent "install hyperframes", or run npx skills add heygen-com/hyperframes yourself. Only the trigger changes a little:

• Codex — start your message with /hyperframes, then describe the video. Like "/hyperframes make a 15-second product intro, bold and cinematic."
• Google Antigravity — no command needed. Just describe the video in the agent sidebar and Antigravity loads HyperFrames on its own. Name a workflow (like /faceless-explainer) when you want to be exact.
• Also runs in Cursor, Gemini CLI, and GitHub Copilot CLI — same install.

Everything else in this guide works the same — the prompts, the preview, the save. Totally fine to use the AI agent you already have.

FAQ