Product video as Code

Build product videos from code instead of a video editor: an animated HTML deck,
an AI voiceover, real screen recordings, and a mastered audio mix, rendered
deterministically to MP4 with ffmpeg.

Product demos, feature launches, explainers, walkthroughs, tutorials, release
notes, onboarding, title stings, social cuts - one pipeline, different shapes.

script.json ──► TTS ──► measure ──► timings.json ──► render ──► composite ──► mux ──► MP4

The clip above is templates/deck.html rendered straight through scripts/render.py
with no narration, no API keys and no editing - exactly what a clean clone produces
in about a minute. Full quality MP4
(1080p, 30fps).

Why this exists

Video is usually the one asset an AI assistant cannot iterate on. Every revision
means reopening an editor and redoing the work by hand - so software videos go
stale the moment the product moves.

Treating video as code changes that. The deck is HTML, the timeline is a pure
function of t, and the audio is measured rather than guessed. "Reword scene 4,
add banks to the segment list, and cut it under a minute" becomes a two-minute
change instead of an afternoon. Re-shooting a demo after a UI change is a script
run, not a reshoot.

The core idea

Audio first, then timing, then picture.

Generate the narration before deciding how long anything is on screen. Measure each
clip, derive scene durations from those measurements, then render. Guessing
durations - or writing narration to fit a fixed storyboard - produces visuals that
drift out of sync and forces a rebuild every time a line changes.

Install

git clone https://github.com/kritikmodi/product-video-as-code.git

Any agent. AGENTS.md at the repo root is read natively by Codex, Cursor,
Copilot, Gemini CLI, Aider, Windsurf, Zed and others, so cloning it into your
project is enough.

Claude Code / claude.ai. Install it as a skill so it loads on demand:

cp -r product-video-as-code ~/.claude/skills/product-video

No agent at all. The scripts are plain Python calling ffmpeg and Playwright.
Nothing here imports a vendor SDK or calls a model API, so you can run the whole
pipeline by hand.

Requirements: Python 3.9+, ffmpeg/ffprobe on PATH, Playwright with Chromium
(pip install playwright && playwright install chromium), and any text-to-speech
provider.

Try it in a minute

No narration, no API keys, no accounts. This renders the bundled starter deck to a
real 23s 1080p MP4:

pip install -r requirements.txt && playwright install chromium
cp templates/deck.html .
python3 scripts/render.py            # -> out/silent.mp4

Stills are faster still, if you just want to see the deck:

python3 scripts/render.py --preview 2 8 18

Full pipeline, with narration

cp templates/script.example.json script.json
# edit script.json, then generate audio/vo_01.mp3 ... one clip per scene with the
# text-to-speech provider of your choice
python3 scripts/assemble.py                    # timings.json + out/voice.wav
python3 scripts/render.py                      # out/silent.mp4
python3 scripts/mux.py --final out/final.mp4   # + music if audio/bed.mp3 exists

assemble.py is the only stage that needs audio. Without it, render.py falls back
to the durations declared in the deck, so silent videos need no extra work.

Kinds of video

The pipeline is the same; structure, pacing and how much of the frame is real
product are what change.

Demos and tutorials are footage-first - the deck is chrome around the product.
Explainers and launches are narration-first, with footage as evidence for the claim
just made. SKILL.md has the full guidance.

What's here

Techniques

Deterministic rendering. The renderer seeks to an explicit t and screenshots.
No wall-clock, no requestAnimationFrame - a slow machine produces the same file as
a fast one.

Resumable chunks. Frames render in parts; a stall costs one chunk, not the pass.

Beat-matched animation. Elements land on the words that describe them. This is
most of the difference between a directed video and a slideshow.

One source, many cuts. A long demo and a social cut share a deck and are selected
with ?cut=short, so they cannot drift apart.

Screen recordings that read as real. Playwright captures no cursor, so one is
injected. Record at the exact pixel size of the frame it will occupy - scaling a
1920 capture into a smaller frame destroys UI text.

Audio that is actually audible. Normalise the music bed to a loudness target
before ducking. A fixed dB attenuation on a quiet generated bed produces a track
that is present in the file and inaudible in the room.

Brand detected, not guessed. detect_brand.py reads the palette, fonts,
icon library and logos out of the product's own codebase, skips build output, and
rejects colours that do not cohere rather than silently producing a white card on
a black frame.

Verify, don't assume. Detect blank frames by ink coverage, not variance. Confirm
pronunciation by transcribing the generated audio back. Measure levels on the file
you are about to ship.

references/PITFALLS.md documents the failures behind each of these, including a
keyframe-engine bug that makes elements appear from frame zero, and why a
double-escaped apostrophe silently breaks a whole deck.

Composing with other skills

Pairs well with Anthropic's frontend-design
for visual direction - the deck is plain HTML/CSS, so design guidance applies
directly.

If you want React composition and faster renders, the
claude-code-video-toolkit
covers Remotion and generative assets. This skill deliberately stays
dependency-light: plain HTML means anyone can open the deck and edit copy without a
toolchain, which matters for brand work where exact assets and colours are
non-negotiable.

Related

The same idea applied to slides: Deckloom
builds pitch decks, one-pagers and sales decks from a JSON content file and one
HTML design file, rendered to PDF and PPTX.

License

MIT (c) 2026 Kritik Modi - see LICENSE.