Three takes / hover to play
01 / Prompt
02 / Capture
03 / Review
Anatomy / script steps
clickGlides the cursor to the element and clicks. zoom: false skips the camera zoom.
typeClicks, then types text. delay ms per key (55); clear: true replaces the value.
fillClicks, then sets text at once, for inputs typing can't drive.
hoverGlides there. zoom: true points the camera too.
uploadGlides to a drop zone and attaches file to input.
pressPresses a key, like "Escape".
scrollSmooth-scrolls the element into view.
waitPauses, in ms.
evalRuns JS in the page, on camera.
Every step takes after, the pause that follows it in ms. click, type, fill and hover take at: [fx, fy] to aim at a point within the element.
Render / flags
--zoom 1.6How far a click zooms in--speed 0.9Playback speed, cursor and camera included--end 9.8Cut the take at that second--hold 1.2Freeze the last frame for that long--matte '#hex'Frame the page as a rounded window on that colour--titleAn opening title card, with --kicker above it--end-capA closing card: logo, title, footer--brand fileColours, fonts, logo and footer for the cards--fitRender at the page's own shape instead of 1920×1200--gifAlso write a 960px, 15fps GIFAgents / the skill
The skill teaches Claude Code and other agents to write the script, record the take and check every frame before handing it over. Then ask: “record a demo of the new billing toggle”.
Credits / in order of appearance
- Directed by
- a JSON file
- Talent
- your app
- Cursor
- a critically damped spring
- Camera
- eased zoom, 1.6×
- Cinematography
- Chromium at 2x
- Editing
- ffmpeg, by timestamp
- Post-production
- Remotion
- Catering
- none, it's a CLI
- Filmed on location
- this page