npmgithub

@bueno-dev/screen-demo

Agent-created product demo videos from a JSON script.

Step 1 / hover
Have you ever wanted to…

Three takes / hover to play

01 / Prompt

Just ask.

02 / Capture

Typing for you.

03 / Review

The script.

Anatomy / script steps

click

Glides the cursor to the element and clicks. zoom: false skips the camera zoom.

type

Clicks, then types text. delay ms per key (55); clear: true replaces the value.

fill

Clicks, then sets text at once, for inputs typing can't drive.

hover

Glides there. zoom: true points the camera too.

upload

Glides to a drop zone and attaches file to input.

press

Presses a key, like "Escape".

scroll

Smooth-scrolls the element into view.

wait

Pauses, in ms.

eval

Runs 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 GIF

Agents / 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