Most AI video workflows handle the editing layer — cut silences, burn in captions, export for platforms. That covers the grunt work but the output still looks raw. If you want motion graphics — animated title cards, lower thirds, kinetic text, branded bumpers — you either open After Effects or pay for a template platform. Hyperframes is the third option: write the animation in HTML and CSS, render it to MP4, and pipe it into your final cut. Claude Code runs the entire pipeline from a single conversation.
This workflow chains three tools: video-use for transcription and auto-cutting, Hyperframes for HTML-to-video motion graphics, and ElevenLabs Scribe for word-level caption timing. Start with a raw recording. End with a polished MP4 with motion graphics and accurate captions. Active work time: roughly 8 minutes. Time in a traditional editor to do the same: 60–90 minutes.
The Three-Tool Stack
- video-use — AI-powered transcription and auto-edit layer. Detects filler words, silence gaps longer than a threshold, and retake restarts. Outputs a clean cut without you scrubbing the timeline.
- Hyperframes (github.com/nateherkai/hyperframes) — converts HTML and CSS animations into MP4 video clips. Any animation renderable in a browser can be exported as a video. Free and scriptable.
- ElevenLabs Scribe — word-level transcription with frame-accurate timestamps. Feeds the caption renderer exactly what it needs to sync text to speech.
The Four-Step Pipeline
# Step 1 — Transcribe and auto-cut dead air
# Open Claude Code in Plan mode (/plan), then:
"Use video-use to transcribe raw_clip.mp4. Remove all silences longer than 0.8 seconds, filler words (um, uh, like, you know), and any retakes where I restart a sentence mid-thought. Export the cleaned clip as clean_cut.mp4."
# Step 2 — Get word-level timestamps from Scribe
"Run ElevenLabs Scribe on clean_cut.mp4 and return a word-level JSON transcript with precise start and end timestamps for every word."
# Step 3 — Build a Hyperframes motion graphic
"Write a Hyperframes HTML animation: black background, gold text reading 'The 5-Minute Morning Routine' fades in over 1.2 seconds, holds for 2 seconds, then fades out. Render it to intro_card.mp4 at 1920x1080."
# Step 4 — Assemble the final cut
"Join intro_card.mp4 + clean_cut.mp4 with a hard cut. Burn in the Scribe word-level captions synced to the timestamps. Export as final.mp4 at 1080p H.264."Each step is a separate Claude Code prompt. Review the output between steps before moving forward. If the intro animation timing is off, adjust the HTML brief and re-render before joining. This keeps errors isolated to the step that caused them.
Use Plan Mode for the Full Run
For the full pipeline, start Claude Code in Plan mode by typing /plan before the first prompt. Lay out all four steps as a task list and get Claude's confirmation before executing. Plan mode prevents Claude from jumping to rendering before the transcript is clean, and gives you a natural checkpoint after each step to inspect and approve the output.
Token Budget
A 10–15 minute raw video run typically uses 150,000–250,000 tokens across all four steps. Longer source footage trends toward 200,000+. Run each step in its own Claude Code turn rather than chaining all four into one message — this keeps you inside the context window and makes individual step failures easier to isolate and retry.
Get the Hyperframes student kit at github.com/nateherkai/hyperframes-student-kit. It includes pre-built animation templates for title cards, lower thirds, and transition wipes configured to work with Claude Code out of the box. Start there instead of building from a blank HTML file.
Motion Graphics You Can Build in HTML
- Animated title cards — text fade-in over a solid or gradient background, timed to the first spoken word
- Lower thirds — name and title bar slides up from the bottom, holds during the interview answer, exits before the next cut
- Kinetic text — key quotes animate word-by-word in sync with ElevenLabs Scribe timestamps
- Progress bars and data reveals — CSS transitions for any stat or visualization that needs to appear on screen
- Chapter markers — full-screen interstitial cards between sections of a long-form video
What This Pipeline Is Not For
Color grading, multi-camera sync, and complex compositing still belong in DaVinci Resolve. This pipeline is optimized for talking-head and screen-recording content where the edit is primarily cuts and captions. If your footage needs significant color work, grade it in DaVinci first and hand the exported file to this pipeline.
The leverage is on the tasks that consume the most post-production time but require the least editorial judgment: silence removal, caption generation, motion intro creation, and platform export. Those four steps account for the bulk of editing hours on most short-form and talking-head content. Hand them to Claude Code and spend your time on the parts that actually require you.