Edit video with Claude Code: the complete HyperFrames guide

You can now edit video from the command line, simply by describing what you want. HyperFrames, HeyGen's free, open-source framework, turns Claude Code into a video editor: you describe the edit, it writes the code, animates and renders to MP4. Without opening CapCut or Premiere.

This guide takes you from zero to your first professional-looking video, with prompts ready to copy and adapt to your case.

What it is and how it works

HyperFrames is an open-source framework (Apache 2.0) that lets AI agents compose videos by writing HTML, CSS and JavaScript. Since the models are already excellent at writing web code, editing video simply becomes "writing a page and animating it".

Something important to understand: Claude Code does not "see" your video or generate images on its own. Claude is the director and orchestrator. It works with two components:

• The framework (free): HyperFrames builds the composition, timing, captions, transitions, zooms and the final render to MP4.
• External connections (optional): ElevenLabs for premium voices, Kie.ai for AI images, Suno for generated music.

The synchronization trick: instead of "watching" the video, Claude transcribes it with Whisper and generates millisecond-precise timestamps, word by word. With those exact times it can nail a caption, an image or a sound effect at exactly the right millisecond. That is why the cuts and the sound effects land perfectly.

Good news: TTS voices with Kokoro, transcription and the whole render run locally and for free. You only need the paid APIs if you want to raise the quality or produce at scale.

Requirements and installation

Before you start, you need:

• Claude Code installed (desktop app, terminal, VS Code or wherever you use it).
• Node.js 22 or higher: check it with node --version
• FFmpeg: to encode the final MP4 (brew install ffmpeg on Mac; on Windows, depending on your system).

Recommended installation

Create a folder for your project and open it in Claude Code. Run this command or just tell Claude directly:

npx skills add heygen-com/hyperframes

Hi, please install the HyperFrames skill in this project.
Run: npx skills add heygen-com/hyperframes
When it finishes, restart the session and confirm that the slash commands are registered.

The slash commands that get registered

• /hyperframes: Composition authoring: structure, timing, captions, transitions, TTS.
• /hyperframes-cli: Work cycle: init, lint, preview, render.
• /hyperframes-media: Pre-processing assets: TTS, transcription, background removal.
• /website-to-hyperframes: Turn a full URL into a video.
• /gsap: Animation help: timelines, easing, motion.

Your first video, step by step

There are three ways to start:

1. Website to video: you give it a URL and HyperFrames builds a full commercial. Ideal for a quick first result.
2. Editing your recording: you have an MP4 and want captions, overlays, music and images. The most useful day-to-day case.
3. Creating from scratch: you describe the video and Claude builds the whole thing: titles, motion graphics, narration and music.

The recommended workflow

1. Create the project folder and open it in Claude Code. If you are going to edit an MP4, drag it into that folder. Everything is local.
2. Give the first prompt. Tell it what you have and what you want. Ask it to ask you questions before starting.
3. Claude transcribes with Whisper and generates millisecond-precise timestamps. On that base, it syncs everything.
4. HyperFrames Studio opens with a live preview. If the link does not appear, tell it "run my local server".
5. Iterate with small, concrete changes until you like it.
6. Final render: ask it to "render in high quality" or use the export button in the preview.

Using /hyperframes: I have an MP4 called demo.mp4 in this project. It is an intro I recorded to camera, in Spanish, horizontal 16:9 format.

I want us to edit it. Add:
- Automatic captions synced with what I say
- An overlay at the top that says "Edited by Claude Code"
- Soft background music that does not cover my voice
- A fade to black at the end

Before starting, transcribe the video with Whisper to get millisecond-precise timestamps. If you have any doubts, ask me. And if you need any access or API, let me know.

Before generating anything with /hyperframes, make me a storyboard in HTML: list the scenes with their duration, the copy for each caption, which image or overlay goes where and the shot direction (zoom, transition). I will review it, correct you, and only then do we build it. That way we do not spend extra tokens.

Prompt library

HyperFrames maps natural-language adjectives to the framework's technical parameters. You do not need to know code: using the right word gets you the right result.

Captions and subtitles

Describe the energy of the captions and Claude picks the typeface, size and animation:

• Hype: Heavy bold, scale-pop, 72-96px
• Corporate: Clean sans, fade + slide, 56-72px
• Tutorial: Monospace, typewriter, 48-64px
• Storytelling: Serif, slow fade, 44-56px
• Social: Rounded, bounce, 56-80px

Add hype-style captions with scale-pop, word by word, synced with my voice. Make brand names bigger and in the accent color, give the emotional words a bounce and highlight numbers differently. Fix mistranscribed words and make sure the captions do NOT overlap.

Change the captions to karaoke style: each word lights up at the exact moment I say it. Keep a maximum of 4-5 words on screen at a time so they read well on mobile.

Hand-drawn highlights (marker highlights)

• highlight: Marker sweep over key phrases
• circle: Hand-drawn ellipse around a word
• burst: Radiating lines for hype moments
• scribble: Chaotic scribble to cross something out
• sketchout: Drawn box for callouts

Add a yellow sweep marker highlight over the phrase "totally free", circle "Claude Code" with a hand-drawn circle and put burst lines around "without opening CapCut".

AI images inside the video

Claude can generate AI images and place them in sync with your script. The recommended service is Kie.ai (a credit-based marketplace that also includes Suno for music).

I want to add AI-generated images to the video. You take care of generating them with Kie.ai (I will give you the documentation and my API key). Steps:
1. Analyze the transcript and decide which images are worth it and at what moment they go.
2. Generate a script to create them IN PARALLEL (all at the same time).
3. Insert them in sync with what I say.

Style: hand-written, handmade look, neutral colors, stick figures. I want something visual that even a child would understand. Nothing corporate. Horizontal, covering the whole screen.

For the opening scene I am giving you logo.png (it is in the project). Integrate it there. The left and right sides of the frame are free. If you want, take a screenshot of that frame to see the layout and place it wherever it fits without covering my face.

Colorization and color grading

Since HyperFrames renders HTML/CSS, the color grade is applied with CSS filters and layers with blend modes. It is like a lightweight LUT: fast, non-destructive and reversible.

Apply a cinematic teal & orange color grade to the clip using CSS filters: raise the contrast a little (~1.1) and the saturation (~1.15), push the shadows toward cyan-blue and the skin tones toward warm. Add a subtle gradient layer with a "teal in shadows / orange in highlights" blend mode. Make sure my skin looks natural. Show me the before and after in preview.

Other looks available:

• Warm vintage: "warm grade with fine grain and a slight vignette"
• Clean tech: "cool grade, high contrast, clean whites"
• Moody / cinema: "crushed shadows, low saturation, strong vignette"
• Pastel soft: "lower the contrast, lift the shadows, pastel tone"
• Punchy social: "saturate hard, high contrast, colors that pop"
• B&W editorial: "black and white with editorial contrast"

Define a brand palette (I will give you 2-3 colors) and apply it consistently: captions, overlays, AI image backgrounds and color grade. The video should feel like a single piece. Use CSS variables for the colors so we can adjust them quickly.

Audio: voice, music and effects

TTS runs locally and for free with Kokoro (no API key). For premium quality, connect ElevenLabs.

Generate the narration for this script with local TTS (Kokoro). Use a professional, warm voice at 1.0x and sync it with the scenes. Leave natural breaths between sentences.

I did not like the free voiceover. Generate a new one with ElevenLabs (I will give you my API key). Choose a voice that sounds familiar and pleasant in Spanish, and adjust the timing to the scenes. Do not render yet, just give it to me in preview so I can listen first.

Use assets/musica.mp3 as background music. Lower its volume so it sits under my voice (ducking), raise it a little in the intro and the outro, and fade in at the start and fade out at the end.

I am giving you the assets/sfx folder with several sound effects named after what they do. Analyze it and place them in sync: the "click" when a highlighted word appears, a "whoosh" on the strong transitions and a "pop" when the logo comes in. They should land exactly on the timestamp, not before or after.

Close-ups, zoom and motion

The difference between an amateur video and a pro one is usually the motion. Describe how the motion should feel and Claude picks the right easing.

Motion vocabulary:

• smooth: Natural deceleration (standard)
• snappy: Fast and decisive (high energy)
• bouncy: Bounces and settles (dynamic)
• dramatic: Starts strong, long glide (emphasis)
• dreamy: Slow and symmetrical (cinematic)

Give all the images a subtle Ken Burns effect: alternate slow zoom-in and zoom-out, and a gentle pan from left to right. Dreamy, slow motion (1-2s). When two images are back to back, add a transition between them.

At the moment where I say "totally free", do a quick punch-in (snappy, 0.2s) on my face for emphasis, and go back to the normal shot after the phrase. It should feel intentional, not abrupt.

Add transitions between all the scenes (hard cuts look like a mistake). For the informative parts use calm crossfades; for the final reveal use a dramatic zoom. Maximum 2 types to keep it consistent.

Video styles

A video looks pro when it has a single clear identity. Name the style in your first prompt and everything (typography, color, motion, transitions) aligns on its own:

• Warm grain / analog: Warm, fine grain, elegant serif. For storytelling and lifestyle.
• Minimal Swiss / editorial: Clean grid, neutral sans, precise cuts. For explaining with seriousness.
• High-energy social: Hype captions, scale-pop, SFX, fast zooms. For TikTok / Reels / Shorts.
• Hand-drawn / sketch: Hand-drawn illustrations, stick figures. For accessible explainers.
• Cold tech / clinical: Cool, high contrast, monospace. For product / SaaS.
• Cinematic / film: Teal-orange, slow motion, vignette. For hero videos and trailers.

The style of the whole video is [high-energy social]. Apply it consistently: matching typography, hype captions with scale-pop, punchy color grade, fast whip-pan style transitions and SFX on the moments of emphasis. If anything falls outside that mood, adjust it so everything matches.

Render and export

Always iterate in draft quality and save high for the end:

• draft: For fast iteration (saves resources and tokens)
• standard: For reviewing and asking for feedback
• high: For the final delivery

npx hyperframes render --output final.mp4

I like it now. Render in high quality and download it for me. Then generate a vertical 9:16 variation for Reels: transform the format, rearrange the text and the framing so it looks good on mobile.

Scaling to production

The first video is the slowest. The real power shows up when you turn a result you love into a reusable skill: after that you just hand it the material and it does everything.

I loved how this edit turned out. Create a skill that captures this whole workflow: transcribe, captions in style X, generate hand-drawn images, teal-orange color grade, Ken Burns on images, SFX from my folder, music and final fade. Document the steps so that next time I only give you a new MP4 and you edit it the same way without me repeating anything.

I have a new video, clip-02.mp4, in the project. Edit it with my editing skill. Let me know when it is in preview.

Checklist before the first final render

• Claude Code + Node 22 + FFmpeg installed; HyperFrames skill registered
• MP4 or material inside the project folder; clear names
• Storyboard approved before rendering
• Captions synced, not overlapping, with highlights on key words
• Consistent color grade across all scenes
• Voice above the music (ducking); SFX on the right timestamps
• Motion throughout: Ken Burns, punch-ins, maximum 2 transition types
• One single style from start to finish
• Render in high + a format variation if you need it
• Skill created to repeat it at scale without repeating instructions

Sources: official HyperFrames documentation (HeyGen). HyperFrames is open-source (Apache 2.0). The external APIs (ElevenLabs, Suno, Kie.ai) are optional and paid.