Edit Entire Videos With Claude And Hyperframes

You drop a raw video file into a folder. Claude Code reads it, transcribes it, cuts the filler words and false starts, drafts a plan for motion graphics that match what you said, then renders the whole thing as a finished MP4. A 50-second raw clip that used to take 90 minutes to cut and animate manually in Premiere now takes about 8 minutes of conversation with Claude.

What You'll Learn

• Drop in a raw clip, get back an edited video with motion graphics, captions, and renders
• Step-by-step setup of all three tools: Hyperframes, video-use, and the starter project
• The exact prompts I use to trim, animate, and render
• Token cost reality check, plus when to pick Hyperframes vs Remotion

You don't need to be a video editor. You don't need to know how to code. You need to know how to describe what you want, and you need to be specific about it. Everything in this guide is teaching Claude what "good" looks like for your style of video, one project at a time.

The Tech Stack

Three pieces of software, two free and one with a small monthly cost. You install everything once.

• Claude Code (desktop app): the orchestrator that talks to every other tool. $20/mo Pro plan or higher.
• video-use: reads your raw video, cuts filler/silence/retakes. Free, open source.
• Hyperframes: renders motion graphics plus the final MP4. Free, open source.
• ElevenLabs API (Scribe): transcribes your video so cuts hit word boundaries. Free tier covers most.

Why Claude Desktop, not VS Code: if you've never coded before, the desktop app feels a lot less scary. Same Claude Code under the hood, just a friendlier window. Once you get comfortable, switch to VS Code if you want to see all your project files at once.

Step 1: Install Claude Code (Desktop App)

1. Open claude.com/download in your browser. Make sure the one you grab says "Claude Code."
2. Download for your operating system (Mac, Windows, or Linux). Normal app installer, no terminal commands yet.
3. Sign in with a paid plan. You need at least the Pro plan ($20/mo) for Claude Code. If you already pay for Claude on the web, the same login works.
4. Open the app and pick a folder. Pick a fresh empty folder for this project, something like ~/Documents/video-editor. This becomes your studio.

Step 2: Set Up Your Project (Two Paths)

Option A: the starter kit (recommended). Nate Herkelman put together a complete starter project that already has the folder structure, example videos, and the right Claude skills wired up.

git clone https://github.com/nateherkai/hyperframes-student-kit.git ~/Documents/video-editor
cd ~/Documents/video-editor
npm install

If you don't want to touch the terminal, paste the GitHub URL into Claude Code and say: "Clone this repo and set it up as my project." Claude will run the commands for you.

Option B: build from scratch. Use this prompt the first time you open the app:

I'm setting up this project to be my video editing studio.
I want you to look at these two GitHub repos and pull in the skills and important info we need so I can give you a raw video file and you can edit it, remove filler words, and add motion graphics.
Hyperframes: https://github.com/heygen-com/hyperframes
video-use: https://github.com/browser-use/video-use
Set up the folder structure, install the skills, and tell me when you're ready for me to drop in a clip.

What "skills" means here: skills are little instruction packs Claude installs into your project that teach it how to use a specific tool. The Hyperframes skill teaches Claude how to render motion graphics. The video-use skill teaches it how to trim raw footage. You're not coding anything.

Step 3: Connect The Repos

If you went with Option B, these are the three repos you're wiring in. All free, all open source:

• heygen-com/hyperframes: HTML to MP4 renderer. This is what builds the motion graphics.
• browser-use/video-use: reads your raw video, transcribes, cuts filler/silence.
• nateherkai/hyperframes-student-kit: starter project with the right folder structure already set up.

Once Claude has finished setting these up, you should see a project folder with subdirectories for assets, clips, transcripts, compositions, and renders. If you don't, paste the setup prompt again and tell Claude to verify the structure.

Step 4: Add Your ElevenLabs API Key

video-use needs a transcription engine to know where to cut. Three options: a free local Whisper model, the OpenAI Whisper API, or ElevenLabs Scribe. I use ElevenLabs because it's noticeably better at finding the right moments to cut.

1. Go to elevenlabs.io and sign up. Free tier is plenty for getting started. The Scribe transcription model is included.
2. Open Developers > API Keys (bottom left of the dashboard). Click "Create Key." Name it something like "video-editor." Copy the value.
3. Drop the key into a .env file. Don't paste your API key directly into Claude's chat, since that key would stay in your conversation history forever. Instead, in Claude Code say: "Create a .env file in the project root with my ElevenLabs key." Claude will create it and ask you to paste the key into the file directly.

# inside .env
ELEVENLABS_API_KEY=your_key_here

Don't commit your .env: if your project folder is connected to GitHub, make sure .env is in your .gitignore. The starter kit already does this. If you set up from scratch, ask Claude: "Add .env to .gitignore."

Step 5: Drop In Your Raw Video

1. Drop the file into the assets folder: video-projects/{your-project-name}/assets/clips/raw.mp4. Name it whatever, just remember the name.
2. Reference the file with the @ sign. In Claude Code, the @ symbol pulls up files in your project. Type "@raw" and pick the file you just added.
3. Send the trim prompt:

Use the video-use tool to edit this clip: @raw.mp4
Analyze the audio and transcript. Remove filler words, silences, and any retakes. Give me a clean cut.
Don't add any motion graphics yet, that's a separate step. I just want a trimmed version that sounds tight.

Claude will transcribe the clip, scan it for filler patterns and false starts, and come back with a list of proposed cuts. It usually asks a few taste questions like "leave this trailing word as a natural breath, or cut it?" Answer them, then say "make it as punchy as possible." Two minutes later you've got an edited.mp4 in your project folder.

Why this step matters: the cuts have to be word-accurate, otherwise your motion graphics will sync to the wrong moments. ElevenLabs Scribe (or Whisper) gives Claude word-by-word timestamps. After this step you'll have an edited video AND a transcripts.json file with every word and its exact time. The motion graphics step uses both.

Step 6: Plan The Motion Graphics

Now you tell Claude exactly what you want to see on screen, when, and what it should look like. The trick: don't try to do everything in one prompt. Use Plan mode in Claude Code so you can review the beat-by-beat scene plan before Claude burns tokens building it.

How to describe motion graphics:

• Pick a moment in the script (a specific phrase you said)
• Describe what should appear visually (a card, an icon, a stat, a comparison)
• Describe where on the screen (left, right, full, lower third)
• Describe the style or mood (liquid glass, brutalist, dark mode, soft glow)
• Tell Claude to sync the entrance to the exact word you said

Add motion graphics to @edited.mp4 using Hyperframes.
Here's what I want, by moment:
[01] When I say 'this is going to be the example video,' pop up a liquid glass card on the left half of the screen with the title and karaoke-style subtitles underneath.
[02] When I say 'I might make a few mistakes,' add a card at the bottom that says 'mistakes will be cut,' plus a small animation on the right showing scissors trimming text.
[03] When I talk about the full pipeline, animate a horizontal flow on a liquid glass card showing 'raw file > edit > graphics > render.'
[04] In the last 5 seconds, transition my face cam to a vertical-cropped right half of the screen with rounded corners and a drop shadow. Reveal a dark modern background. Put 'Thanks for watching' text on the left half.
Make every motion graphic sync to the exact second I say the trigger word.
Use Plan mode first, show me the beat plan before you start rendering.

Use Plan mode every time. It's the difference between a clean render and burning 80,000 tokens on the wrong direction. It shows you the timeline, the anchor word for each beat, and the visual concept for each scene before any code gets written.

Step 7: Preview, Iterate, Render

Claude generates the HTML compositions and runs the first render. You're not done. The first pass almost never matches what's in your head, and that's expected.

1. Open the preview. In the desktop app, top right corner there's a preview pane. You can also click the localhost link Claude prints to open it full-screen in your browser. Watch the whole clip.
2. Note what's wrong. Common first-pass issues: a card covers your face, a background grid stays visible too long, a transition crops the wrong side, an animation lands a beat early. Write all of it down before you reply.
3. Send one revision message. Don't fix issues one at a time, that wastes tokens. Bundle every change into a single message with specific instructions: "in beat 1 scale the card down 20%, in beat 4 crop both sides instead of just the right side," etc.
4. Use the timeline editor for fast tweaks. Hyperframes has a built-in timeline panel. Drag scenes, change start times, or delete a beat directly. These changes write back into the code, and Claude picks them up on the next render.
5. Render the final. When the preview looks right, say "render the final." Claude exports the MP4 to your renders folder, ready to upload.

Preview audio may be loud: there's a known quirk where the localhost preview triples the audio level on some setups. The actual rendered file is fine. Turn your volume down and trust the render.

The Prompts I Actually Use

Prompt 1: trim and clean (video-use)

Use the video-use tool on @raw.mp4. Transcribe with ElevenLabs Scribe.
Remove filler words, silences over 0.5 seconds, and any retakes. Snap cuts to word boundaries with 50ms leads. Make it as punchy as possible without sounding clipped.
Return an edited.mp4 plus a transcripts.json with word-level timestamps.

Prompt 2: talking head + motion graphics

Add motion graphics to @edited.mp4 using Hyperframes.
Aesthetic: iOS 26 liquid glass cards over a lightly dimmed talking head.
Color palette: teal accent, graphite base, occasional copper highlight.
For each beat below, sync the animation to the exact word in transcripts.json:
[BEAT 1: 'open the example'] full-screen title card, karaoke subtitles underneath
[BEAT 2: 'three steps'] left-side card with a 1, 2, 3 vertical list animating in
[BEAT 3: 'here's the result'] right-side card showing the actual deliverable I'm describing
[BEAT 4: 'thanks for watching'] vertical-crop my face cam to the right half, dark mode background reveal, 'Thanks for watching' on the left
Use Plan mode first. Show me the beat plan before rendering.

Prompt 3: karaoke-style captions only

Add karaoke-style captions to @edited.mp4 using Hyperframes.
Use transcripts.json for word timing. Highlight each word as it's spoken in a bright accent color (teal). Keep the unspoken words in white.
Font: bold sans-serif, large enough to read on a phone, dropped into the lower third of the frame. Add a subtle drop shadow so it stays readable on any background.

Prompt 4: full auto-pilot

Run the full video-use pipeline on @raw.mp4. Trim filler and silence, animate using Hyperframes, render the final MP4.
Style reference: match the aesthetic of @reference.mp4 in the project (use it as a visual baseline).
Don't ask me anything during the pipeline, make the calls yourself. I'll review the final render and give notes.

Use Prompt 4 sparingly: auto-pilot is great when you've already trained Claude on a specific format (intro, lesson, ad, hype reel). Run it 5-10 times manually first so Claude has examples to pattern match on.

Hyperframes vs Remotion

video-use ships with both motion graphic engines. Here's how I pick between them:

• Premium aesthetic + iOS-style polish: Hyperframes. Liquid glass, soft glow, modern typography.
• Quick demos + functional animations: Remotion. Solid, capable, slightly more dated styling. Faster to iterate on.
• Branded launch promos: Hyperframes. The polish carries the brand. Remotion can do it but takes more work.
• Internal lessons + course content: either. Both work. Pick whichever your students recognize.
• First time learning the tools: Hyperframes. Smaller skill surface area, easier to control on the first try.

Both tools render the same way under the hood: an HTML composition gets driven through a headless browser into ffmpeg, and the output is an MP4. The difference is the design language. Hyperframes leans modern and premium, Remotion leans utility.

Cost Reality Check

This pipeline isn't free in tokens. Here's the actual usage to expect, based on real renders I've shipped:

• video-use trim only: 5,000 to 15,000 tokens
• Hyperframes motion graphics (4-5 beats): 100,000 to 200,000 tokens
• Plus iteration round (1-2 revisions): 30,000 to 80,000 tokens
• Total per finished video: roughly 200,000 to 250,000 tokens

How to stay under 200k: be specific the first time. Every vague prompt that needs clarification costs you a round trip. Use Plan mode before any render. Reuse style references from past projects so Claude has a baseline to pattern match against.

Pitfalls And Quick Fixes

• Cards covering your face: tell Claude the exact percentage to scale down (e.g. "85% scale, anchored left")
• Random grid pattern across the whole video: say "remove all background grids, only show in beat 4 if needed"
• Wrong-side video crop: name both sides explicitly: "crop the LEFT and the RIGHT, keep the center vertical"
• Animations landing a beat early or late: paste the exact word from transcripts.json as the anchor
• Audio sounds blown out in preview: check the rendered MP4 separately, the localhost preview has a loudness bug
• First render is total trash: don't iterate, regenerate the whole plan with more specific style direction
• Token usage spiking: switch to Plan mode for everything, never let Claude render before showing you the plan

What I Actually Use This For

• Daily short-form video (Reels, TikTok, Shorts): record once, drop in, edited end-to-end in under 10 minutes
• Product demo reels: same brand-locked aesthetic across every drop
• Course lesson recordings: talking head plus inline diagrams, all synced to the spoken word
• Cold ad creative for paid testing: multiple variants from the same raw clip
• Launch promos: branded liquid glass aesthetic that matches the landing page
• Internal SOPs and team training: record a Loom-style walkthrough, get back a polished tutorial

Build a style library: every time you finish a video you're happy with, save the project folder. Three or four reference projects are enough for Claude to start matching your style on its own. After that, your prompts get shorter, your iterations get faster, and the auto-pilot prompt actually starts working.

Your Next 24 Hours

1. Install Claude Code desktop and open it. Pick a fresh empty folder.
2. Clone the starter kit: git clone https://github.com/nateherkai/hyperframes-student-kit. Saves you an hour of fiddling with folder structure.
3. Get an ElevenLabs API key and add it to .env. Free tier is plenty for testing.
4. Record a 30-60 second talking head clip. Phone camera is fine. Make 1-2 deliberate mistakes so you can see Claude cut them.
5. Drop it in, run Prompt 1, then Prompt 2. Trim first, animate second. Always two passes.
6. Use Plan mode for the motion graphics step. Approve, revise, then render. Total round-trip should be under 15 minutes.
7. Save the finished project as a style reference. It becomes the template Claude pattern-matches off for every future video in that lane.

Credit + Source Material

This guide is my personal take on the pipeline, but the original walkthrough that taught me the wiring belongs to Nate Herkelman. He put the starter kit together and recorded the step-by-step that made the whole stack click. His full Hyperframes + video-use + Claude Code walkthrough is on YouTube: https://www.youtube.com/watch?v=Aw3BkmhYu4I

The three GitHub repos:

• Hyperframes (motion graphics + render engine): github.com/heygen-com/hyperframes
• video-use (transcribe, trim, edit raw footage): github.com/browser-use/video-use
• Hyperframes Student Kit (starter project, recommended): github.com/nateherkai/hyperframes-student-kit

Everything in this guide is written from my own pipeline running this stack daily. The token costs, the prompts, the pitfalls: all real numbers from real renders. If you hit something that doesn't work, that's expected on the first project. Three projects in, the whole thing starts to feel automatic.

Go Deeper

Prefer a printable version? Grab the PDF: https://drive.google.com/file/d/1ogV_AkL6wCeQ5QsDFN8NK8p_D-gpLED1/view?usp=drivesdk

Want the whole system installed live, with Cooper on the call? Build Your Own AI, the two week sprint runs the first two weeks of August.

Or get a new working tool every Monday inside The AI Operator community on Whop.