We made our launch video with Claude Code (and open-sourced the tool) | Kiln AI
Skip to main content 4.5k ↓ Free Download
BLOG<br>May 20, 2026 We made our launch video with Claude Code (and open-sourced the tool)<br>Kiln just launched v1. We made the launch video in Claude Code. Along the way we built and open-sourced videowright: the tool we wished we'd had.<br>Steve Cosman Kiln Founder
Kiln just launched v1. We made the launch video in Claude Code.<br>Along the way we built and open-sourced the tool we wished we'd had: videowright. MIT. Just npm install videowright.<br>The short version of what it does:<br>Video from a prompt. Describe what you want; an agent writes<br>it.<br>Any web tech. Animated SVG, Lottie, React, Svelte, anything<br>that renders in a browser. Not locked to React.<br>AI voice-overs, sound effects, and music. Generated and mixed<br>for you.<br>Animation auto-syncs to your voice-over. Speech-to-text gets<br>word-level timestamps; the agent fits video beats to them.<br>Pixel-perfect MP4 export. Headless Playwright walks the clock<br>frame by frame. No screen capture, no dropped frames.<br>Hot-reloading dev server. Preview in a browser, iterate in chat,<br>see changes instantly.
The Kiln v1 launch video. Built in Claude Code. How v1 came together<br>We needed a launch video. Hiring out felt slow. Editors felt slow. So we tried<br>Claude Code instead.<br>The stack was boring on purpose: HTML, CSS, JavaScript. Animated SVG for<br>motion. A web component per beat of the video. I wrote the script, Claude<br>wrote the animations, we iterated in chat, we previewed in a browser.<br>Screen-captured the dev server at 60fps, added a voice-over in post, shipped.<br>It took 2 days of iteration to get v1 to something we'd ship. The first cut<br>was rough. By the end the shape of the work felt right.<br>What we learned<br>A few things kept surprising us. Some predictable. Some not.<br>Claude is good at web tech, which means Claude is good at video<br>Animated explainer videos are mostly HTML, CSS, SVG, and timing. All of that<br>is deep in training data. The first version Claude writes isn't your finished<br>video, but it's not embarrassing either. The same way Claude can write a first<br>version of a landing page that doesn't embarrass you.<br>You can animate your real app UI<br>This was the most fun discovery. Let it read your app code, and it can animate<br>it.<br>Think of it as a screen recording, but in storytelling mode. Pan to a specific<br>button. Highlight a feature. Zoom into a real form. The UI is live, not a<br>mock, because the agent already understands web components.<br>App UI animated inside a video. Not a screen recording. You don't need motion graphics software for overlays<br>For a short founder talking-head clip we wanted real motion graphics on top.<br>Logo animating in, transition card to a closing URL. So we had Claude render<br>those overlays in the browser, exported them as transparent 60fps PNGs, and<br>composited them onto the recorded clip with ffmpeg.<br>It looked like proper motion design and it took under an hour.<br>Motion graphics, from Claude Code Audio drives the timing, not the video<br>We made the obvious mistake on v1: built a pixel-perfect animated video first,<br>then recorded the voice-over. The audio didn't fit. Beats landed wrong.<br>On-screen text appeared off-cadence. Cuts felt off.<br>So we re-cut the whole video to fit the audio. Major rework.<br>This is generic video-editing wisdom, not AI-specific: audio leads, video<br>follows. Record (or write) the audio first, then fit the video beats to its<br>pacing.<br>Videowright bakes this in now. Speech-to-text gets word-level timestamps from<br>your audio, and the agent skill adapts every video segment to match. Re-record<br>a line and the timing updates without touching segment code.<br>Style alignment matters more than expected<br>Without a style guide you get very generic motion graphics. We had a brand<br>style guide already. We ended up writing a video-specific one on top of it:<br>type sizes in motion, transition vocabulary, easing curves, color usage in<br>motion versus on a static page.<br>Code structure matters because diffs matter<br>LLMs trip on big diffs. If your whole video lives in one file, "swap segments<br>2 and 3" turns into a 5k line edit. The agent gets confused.<br>The fix is obvious: one web component per beat. One file per segment.<br>Reordering is rearranging imports. Re-recording a voice-over only touches the<br>timing file, not the segment code.<br>That was the moment we knew we should extract a library.<br>Iteration is the real work<br>The right prompt can one-shot a really good video. Your first version almost<br>never will be.<br>Most of the work is iteration: visuals, copy, timing, audio, all of it. Taste<br>shows up everywhere. But once the plan is locked, you can rebuild in a<br>different style as a one-shot. Generating code is cheap. Concept work is the<br>expensive part.<br>So we built videowright Open source, prompt to video agent<br>The lessons above pointed to one thing: Claude Code can write videos, but<br>there's a need for some reusable tooling.<br>So we wrote it. It's two things in one repo:<br>An...