LANVAR
← The shelf

Scenery

Did its thing

Point it at a React repo and it generates real product demo videos from your components — narrated, animated, and self-scored until they’re good.

TypeScriptGeminiRemotionPlaywright 2026
✳ How it actually works
YOUR REPO · REACT DEMO FILMSTRIP REC <NavBar/> <Chart/> <Checkout/> <NavBar/> <Chart/> <Checkout/> REFINEMENT AGENT -- 61 84 93 93 61 → 84 → 93 90 < 90 · RETRY ≥ 90 · SHIP ≥ 90 · SHIP every component gets a take; the agent re-scores until it ships
FIG 1 · the loop, animated — record a take, score it, retry until it clears 90
your GitHub repo React components component discovery props · types · server-code flags preview rendering — 3 tiers Playwright → esbuild + mocks → Gemini fallback DIRECTOR agent plans the narrative on a frame budget: hook / setup / showcase / CTA IN PARALLEL scene planner #1 scene planner #2 scene planner #3 assembly Remotion comps · layer order REFINEMENT agent scores 0–100 across five axes, diagnoses + patches the misses < 90 · FIX & RE-SCORE ≥ 90 TTS voiceover + Lambda render final MP4/GIF, rendered in parallel demo videos · assets regenerate when the code changes
FIG 2 · the machinery — repo in, self-scored video out — the loop is the point
The story

AI made shipping code absurdly fast — and everything downstream of code stalled. Demos, tutorials, screenshots, marketing graphics: every visual asset goes stale the moment you ship. Scenery, built for the Gemini 3 Hackathon, makes the code the single source of truth for the assets too.

It scans a repo and extracts component metadata, then renders real previews through a three-tier fallback: Playwright in a headless browser first, an esbuild server-side render with a library of mocks second, and a Gemini-generated stand-in as the last resort. A Director agent plans the narrative on a frame budget, Scene Planner agents animate scenes in parallel, and a deterministic assembler compiles everything into Remotion compositions.

Then the part that makes it honest: a Refinement agent scores every composition 0–100 across visual quality, timing, narrative, animation, and accessibility — and anything under 90 gets diagnosed, patched, and re-scored until it clears the bar. Voiceover comes from TTS, and AWS Lambda renders the final video in parallel. The models it was built on are already deprecated, so the whole thing is open source: clone it, swap in current models, take it further.

GitHub ↗Devpost ↗
Next on the shelf arty's claude newsletter →