web-vid

Your product video should be a build artifact of your codebase — not a recording of it.

web-vid is a Claude Code plugin that turns a website or web app into a recreated promo video: every scene is a React component built from your site's real design tokens and real copy, animated with Remotion, and rendered to MP4.

It is not screen recording. Nothing is captured. Everything is drawn from your source.

your repo ──▶ extract real tokens + copy ──▶ freeze timeline ──▶ build scenes (React)
                                                                        │
                            MP4 ◀── render ◀── adversarial fidelity review

Why this is better than what you're using now

Approach	The problem	What web-vid does
Screen recorders (Loom, QuickTime, Screen Studio)	You're filming reality, so you film its flaws: cursor jitter, loading spinners, browser chrome, a notification sliding in. Fixed resolution — zoom in and it mushes. Copy changed? Re-record the whole take.	Renders from code. No spinners, no chrome, no cursor lag. Crisp at any zoom because it's drawn, not sampled. A copy fix is a one-line edit + re-render.
Interactive demo tools (Arcade, Storylane, Navattic)	They snapshot your DOM into an interactive HTML demo — great for a sales page, useless when you need an actual video for a LinkedIn/TikTok feed. Snapshots drift from the product silently.	Produces a real MP4 for real feeds, at 16:9 / 9:16 / 1:1 from the same scenes.
Manual motion design (After Effects, Premiere)	A designer hand-rebuilds your UI by eye. It drifts from your design system, costs days, and every revision costs days again.	Pixel-faithful by construction — it imports your actual --radius, your actual oklch values, your actual font files. Revisions are code edits.
AI video generators (Runway, Sora, Pika)	They hallucinate UI. They physically cannot render your real pricing table, with your real numbers, in your real font.	Uses your source as ground truth. Zero invented text, zero invented colors — the skill forbids it and an adversarial pass checks it word-for-word.

The compounding wins, because it's code:

• Deterministic. No Math.random(), no Date.now() — the same commit renders the same frames, forever. Diff two versions of your promo like you diff any other file.
• Re-renderable. Product changed? Re-render. Don't re-shoot. Your promo can be regenerated in CI on every release instead of rotting.
• Multi-format for free. Add a <Composition> at 1080x1920 and you have the vertical cut — no rebuilding scenes.
• Reviewable. Scenes are components in your repo. A teammate can review the video in a pull request.

Requirements

• Claude Code
• Node + npm
• A Chromium binary Remotion can render with. If npx remotion render can download its bundled browser, nothing extra is needed. In locked-down sandboxes where downloads are blocked, the skill's Step 2 walks through finding an already-installed Chromium (e.g. Playwright's cache) and pointing Remotion at it.
• Read access to the target site's source. This matters more than anything else: web-vid recreates from real theme files, components, and copy. Point it at a URL with no source access and fidelity drops to "inspired by."

Install

/plugin marketplace add naidx0/web-vid
/plugin install web-vid@web-vid

(Send as two separate messages.)

Use

Open Claude Code in the repo of the site you want a video of, then:

/web-vid

…or just say "make a promo video of this site."

It will ask a short intake batch before building anything — this is deliberate, because a plan built on assumed answers gets rebuilt later at 10x the cost:

1. Source of truth — the repo/path of the site to recreate.
2. The walkthrough path — a numbered beat list ("open homepage, scroll to pricing, click Start, land on dashboard").
3. Must-be-readable moments — the stats/headlines the video has to hold on long enough to actually read.
4. Pacing + duration, end card, aspect ratio, and whether you want extra cuts.

Then it extracts your tokens, freezes a timeline, builds one scene per beat (parallelizing across agents at 4+ scenes), runs an adversarial fidelity review, and hands you the MP4.

Worked example

Say you've cloned a real open-source site — for instance freeCodeCamp — and you want a 30s teaser:

/web-vid ./freeCodeCamp

Answer the intake with a concrete beat list ("open the landing page → scroll to the curriculum grid → hold on the '11,000+ tutorials' stat → click into a lesson → end card"), and it will read that repo's actual theme and copy rather than inventing a look.

What's in here

skills/web-vid/SKILL.md                    the full pipeline Claude follows
skills/web-vid/reference/tokens.template.ts  starting point for the token extraction (Step 1)
skills/web-vid/reference/root.template.tsx   Remotion root: runtime font injection,
                                             Series sequencing, per-scene speed remap
commands/web-vid.md                        the /web-vid command

Two patterns in root.template.tsx are load-bearing and worth stealing even if you don't use the plugin:

• Runtime @font-face injection via staticFile() — importing a font-face CSS file into a component makes bundlers choke trying to resolve the .woff as a module.
• The Accelerated wrapper — remaps a scene's internal clock by nesting a frame-shifted <Sequence>, so every spring/interpolate re-samples natively at the new pace. No dropped frames like a post-render speed-up filter, and choreography authored against the original frame count still lands.

Known limits

• Fidelity is bounded by source access. No repo, no pixel-faithfulness.
• Rendering needs a working Chromium; that's the most common setup failure (Step 2 exists entirely for this).
• It recreates screens and choreography, not video content — there's no footage, no voiceover, no music. Add those in post if you want them.

Contributing

Issues and PRs welcome — especially additional Chromium/sandbox configurations that worked for you, and Remotion patterns that improve fidelity.

License

MIT © Max Naidenov. Built on Remotion (note: Remotion has its own license terms — check them for commercial use).