{"slug": "create-videos-for-your-products-using-your-terminal-ide", "title": "Create videos for your products using your terminal/IDE", "summary": "Kritik Modi released product-video-as-code v0.1.0, an open-source pipeline that renders product videos from code using HTML decks, AI voiceovers, and ffmpeg, producing deterministic MP4s without a video editor or API keys. The tool, which runs via plain Python and Playwright, generates a 23-second 1080p MP4 from a bundled starter deck in about a minute and supports any AI agent through an AGENTS.md file.", "body_md": "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.\n\nProduct demos, feature launches, explainers, walkthroughs, tutorials, release notes, onboarding, title stings, social cuts - one pipeline, different shapes.\n\n```\nscript.json ──► TTS ──► measure ──► timings.json ──► render ──► composite ──► mux ──► MP4\n```\n\nThe clip above is `templates/deck.html`\n\nrendered straight through `scripts/render.py`\n\nwith no narration, no API keys and no editing - exactly what a clean clone produces\nin about a minute. [Full quality MP4](https://github.com/kritikmodi/product-video-as-code/releases/download/v0.1.0/demo.mp4)\n(1080p, 30fps).\n\nVideo 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.\n\nTreating video as **code** changes that. The deck is HTML, the timeline is a pure\nfunction of `t`\n\n, and the audio is measured rather than guessed. \"Reword scene 4,\nadd banks to the segment list, and cut it under a minute\" becomes a two-minute\nchange instead of an afternoon. Re-shooting a demo after a UI change is a script\nrun, not a reshoot.\n\n**Audio first, then timing, then picture.**\n\nGenerate 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.\n\n```\ngit clone https://github.com/kritikmodi/product-video-as-code.git\n```\n\n**Any agent.** `AGENTS.md`\n\nat the repo root is read natively by Codex, Cursor,\nCopilot, Gemini CLI, Aider, Windsurf, Zed and others, so cloning it into your\nproject is enough.\n\n**Claude Code / claude.ai.** Install it as a skill so it loads on demand:\n\n```\ncp -r product-video-as-code ~/.claude/skills/product-video\n```\n\n**No agent at all.** The scripts are plain Python calling ffmpeg and Playwright.\nNothing here imports a vendor SDK or calls a model API, so you can run the whole\npipeline by hand.\n\n**Requirements:** Python 3.9+, `ffmpeg`\n\n/`ffprobe`\n\non PATH, Playwright with Chromium\n(`pip install playwright && playwright install chromium`\n\n), and any text-to-speech\nprovider.\n\nNo narration, no API keys, no accounts. This renders the bundled starter deck to a real 23s 1080p MP4:\n\n```\npip install -r requirements.txt && playwright install chromium\ncp templates/deck.html .\npython3 scripts/render.py            # -> out/silent.mp4\n```\n\nStills are faster still, if you just want to see the deck:\n\n```\npython3 scripts/render.py --preview 2 8 18\ncp templates/script.example.json script.json\n# edit script.json, then generate audio/vo_01.mp3 ... one clip per scene with the\n# text-to-speech provider of your choice\npython3 scripts/assemble.py                    # timings.json + out/voice.wav\npython3 scripts/render.py                      # out/silent.mp4\npython3 scripts/mux.py --final out/final.mp4   # + music if audio/bed.mp3 exists\n```\n\n`assemble.py`\n\nis the only stage that needs audio. Without it, `render.py`\n\nfalls back\nto the durations declared in the deck, so silent videos need no extra work.\n\nThe pipeline is the same; structure, pacing and how much of the frame is real product are what change.\n\n| Kind | Length | Shape | Footage |\n|---|---|---|---|\n| Product explainer | 1-3 min | problem → turn → how → proof → close | a little, as proof |\n| Feature launch | 30-90s | what changed → why → see it → get it | medium |\n| Demo / walkthrough | 2-5 min | one real task, start to finish | dominant |\n| Tutorial | 3-10 min | step by step, chaptered, room to follow | dominant |\n| Release notes | 30-90s | one item per beat, dense | clips or stills |\n| Onboarding | 1-3 min | the first-run path | dominant |\n| Title sting / loop | 5-20s | one idea, often silent | none |\n| Social cut | under 60s | hook first, derived from a longer cut | short |\n\nDemos and tutorials are footage-first - the deck is chrome around the product.\nExplainers and launches are narration-first, with footage as evidence for the claim\njust made. `SKILL.md`\n\nhas the full guidance.\n\n| Path | |\n|---|---|\n`SKILL.md` |\nthe skill itself - what Claude reads |\n`scripts/assemble.py` |\nmeasure narration → scene timings + voice track |\n`scripts/render.py` |\ndeterministic, resumable frame renderer |\n`scripts/composite.py` |\noverlay screen recordings into a measured DOM rect |\n`scripts/mux.py` |\nducked music bed + broadcast-level master |\n`scripts/capture/` |\nlog in by hand, then record the product with a synthetic cursor |\n`templates/deck.html` |\nstarter deck with the animation engine |\n`references/` |\npipeline, audio, screen capture, and pitfalls |\n\n**Deterministic rendering.** The renderer seeks to an explicit `t`\n\nand screenshots.\nNo wall-clock, no `requestAnimationFrame`\n\n- a slow machine produces the same file as\na fast one.\n\n**Resumable chunks.** Frames render in parts; a stall costs one chunk, not the pass.\n\n**Beat-matched animation.** Elements land on the words that describe them. This is\nmost of the difference between a directed video and a slideshow.\n\n**One source, many cuts.** A long demo and a social cut share a deck and are selected\nwith `?cut=short`\n\n, so they cannot drift apart.\n\n**Screen recordings that read as real.** Playwright captures no cursor, so one is\ninjected. Record at the exact pixel size of the frame it will occupy - scaling a\n1920 capture into a smaller frame destroys UI text.\n\n**Audio that is actually audible.** Normalise the music bed to a loudness target\nbefore ducking. A fixed dB attenuation on a quiet generated bed produces a track\nthat is present in the file and inaudible in the room.\n\n**Verify, don't assume.** Detect blank frames by ink coverage, not variance. Confirm\npronunciation by transcribing the generated audio back. Measure levels on the file\nyou are about to ship.\n\n`references/PITFALLS.md`\n\ndocuments the failures behind each of these, including a\nkeyframe-engine bug that makes elements appear from frame zero, and why a\ndouble-escaped apostrophe silently breaks a whole deck.\n\nPairs well with Anthropic's [ frontend-design](https://github.com/anthropics/skills/tree/main/skills/frontend-design)\nfor visual direction - the deck is plain HTML/CSS, so design guidance applies\ndirectly.\n\nIf you want React composition and faster renders, the\n[claude-code-video-toolkit](https://github.com/digitalsamba/claude-code-video-toolkit)\ncovers Remotion and generative assets. This skill deliberately stays\ndependency-light: plain HTML means anyone can open the deck and edit copy without a\ntoolchain, which matters for brand work where exact assets and colours are\nnon-negotiable.\n\nMIT (c) 2026 Kritik Modi - see [LICENSE](/kritikmodi/product-video-as-code/blob/main/LICENSE).", "url": "https://wpnews.pro/news/create-videos-for-your-products-using-your-terminal-ide", "canonical_source": "https://github.com/kritikmodi/product-video-as-code", "published_at": "2026-08-25 11:30:44+00:00", "updated_at": "2026-08-25 11:44:29.272518+00:00", "lang": "en", "topics": ["developer-tools", "generative-ai", "ai-tools"], "entities": ["Kritik Modi", "product-video-as-code", "ffmpeg", "Playwright", "Codex", "Cursor", "Copilot", "Gemini CLI"], "alternates": {"html": "https://wpnews.pro/news/create-videos-for-your-products-using-your-terminal-ide", "markdown": "https://wpnews.pro/news/create-videos-for-your-products-using-your-terminal-ide.md", "text": "https://wpnews.pro/news/create-videos-for-your-products-using-your-terminal-ide.txt", "jsonld": "https://wpnews.pro/news/create-videos-for-your-products-using-your-terminal-ide.jsonld"}}