Kiln just launched v1. We made the launch video in Claude Code.
Along the way we built and open-sourced the tool we wished we'd had: videowright. MIT. Just npm install videowright.
The short version of what it does:
- Video from a prompt. Describe what you want; an agent writes it.
- Any web tech. Animated SVG, Lottie, React, Svelte, anything that renders in a browser. Not locked to React.
- AI voice-overs, sound effects, and music. Generated and mixed for you.
- Animation auto-syncs to your voice-over. Speech-to-text gets word-level timestamps; the agent fits video beats to them.
- Pixel-perfect MP4 export. Headless Playwright walks the clock frame by frame. No screen capture, no dropped frames.
- Hot-reloading dev server. Preview in a browser, iterate in chat, see changes instantly.
How v1 came together
We needed a launch video. Hiring out felt slow. Editors felt slow. So we tried Claude Code instead.
The stack was boring on purpose: HTML, CSS, JavaScript. Animated SVG for motion. A web component per beat of the video. I wrote the script, Claude wrote the animations, we iterated in chat, we previewed in a browser. Screen-captured the dev server at 60fps, added a voice-over in post, shipped.
It took 2 days of iteration to get v1 to something we'd ship. The first cut was rough. By the end the shape of the work felt right.
What we learned
A few things kept surprising us. Some predictable. Some not.
Claude is good at web tech, which means Claude is good at video
Animated explainer videos are mostly HTML, CSS, SVG, and timing. All of that is deep in training data. The first version Claude writes isn't your finished video, but it's not embarrassing either. The same way Claude can write a first version of a landing page that doesn't embarrass you.
You can animate your real app UI
This was the most fun discovery. Let it read your app code, and it can animate it.
Think of it as a screen recording, but in storytelling mode. Pan to a specific button. Highlight a feature. Zoom into a real form. The UI is live, not a mock, because the agent already understands web components.
You don't need motion graphics software for overlays
For a short founder talking-head clip we wanted real motion graphics on top. Logo animating in, transition card to a closing URL. So we had Claude render those overlays in the browser, exported them as transparent 60fps PNGs, and composited them onto the recorded clip with ffmpeg.
It looked like proper motion design and it took under an hour.
Audio drives the timing, not the video
We made the obvious mistake on v1: built a pixel-perfect animated video first, then recorded the voice-over. The audio didn't fit. Beats landed wrong. On-screen text appeared off-cadence. Cuts felt off.
So we re-cut the whole video to fit the audio. Major rework.
This is generic video-editing wisdom, not AI-specific: audio leads, video follows. Record (or write) the audio first, then fit the video beats to its pacing.
Videowright bakes this in now. Speech-to-text gets word-level timestamps from your audio, and the agent skill adapts every video segment to match. Re-record a line and the timing updates without touching segment code.
Style alignment matters more than expected
Without a style guide you get very generic motion graphics. We had a brand style guide already. We ended up writing a video-specific one on top of it: type sizes in motion, transition vocabulary, easing curves, color usage in motion versus on a static page.
Code structure matters because diffs matter
LLMs trip on big diffs. If your whole video lives in one file, "swap segments 2 and 3" turns into a 5k line edit. The agent gets confused.
The fix is obvious: one web component per beat. One file per segment. Reordering is rearranging imports. Re-recording a voice-over only touches the timing file, not the segment code.
That was the moment we knew we should extract a library.
Iteration is the real work
The right prompt can one-shot a really good video. Your first version almost never will be.
Most of the work is iteration: visuals, copy, timing, audio, all of it. Taste shows up everywhere. But once the plan is locked, you can rebuild in a different style as a one-shot. Generating code is cheap. Concept work is the expensive part.
So we built videowright Open source, prompt to video agent
The lessons above pointed to one thing: Claude Code can write videos, but there's a need for some reusable tooling.
So we wrote it. It's two things in one repo:
- An agent skill. Project conventions, ffmpeg recipes, voice-over pipeline patterns, how to reuse segments across videos, style guides, how to source audio files, etc
- A library. Web components for video, a dev server with hot reload for previewing in a browser, a Playwright-based renderer for exporting MP4s.
Unlike Remotion, it's not React-locked. Bring SVG animations, WAAPI, canvas, Svelte, CSS animations, setTimeout, or whatever the agent reaches for. videowright is a thin frame around web components, not a graphics library with a getNextFrame loop.
What makes it tick is the renderer. Most browser-based video tools either screen-capture (and drop frames) or run their own render loop (and lock you into their library). videowright does neither. It uses Playwright, controls the clock, and walks the video frame by frame through a headless browser. Pixel-perfect, deterministic, 60fps+.
Videowright created its own launch video
Here's videowright explaining itself, including a fully AI-generated voice-over and sound effects:
What it can do
Quick scan. The README has the full picture.
- AI voice-overs with auto-timing. Generate the narration with ElevenLabs, run it through speech-to-text for word-level timestamps, and the video beats auto-align to the audio.
- Music and sound effects. AI-generated or Creative Commons, sourced and mixed for you.
- Six built-in style packs. Or bring your own from a brand guide, a reference URL, or a short description.
- Multi-video projects. Reuse intros, outros, transitions, CTAs across videos. Style consistency compounds.
v1 of our launch video took 2 days. The next one, with videowright and our style doc and a small library of reusable segments, took about two hours.
Try Videowright
Paste this into your coding agent. It works in Claude Code, Codex, opencode, and others.
Install Videowright using these instructions:
https://github.com/scosman/videowright/raw/refs/heads/main/packages/lib/skill/install/INSTALL.mdMIT. GitHub: scosman/videowright. Issues and PRs welcome.
Try Kiln
That first video is Kiln's. We launched v1 last week: a local-first AI workbench for datasets, evals, prompts, and fine-tuning. Local app, git-backed team sync.