Scripted demos
Product demos built as live, scripted screens.
Each demo used to carry its own, and there were seven. A fix for a reset bug would land in one and be missing from the other six. I built one player with Claude Code and moved them all onto it.
export.tour.ts
6 steps · 10.3s
- setFormat("PNG"); setScale(2); setName("")1.1s
- pressOn("format-svg")1.5s
- dragTo("scale-track", 3)2.1s
- pressOn("file-name"); type("hero-frame")2.3s
- pressOn("export")0.9s
- hold(1000); moveTo(park) → loop2.4s
What it has set
line
- format
- "PNG" 1
- scale
- 2 1
- name
- "" 1
- exported
- false 1
What it is
The player behind every demo on this site. Each demo is a short script of steps, like click this, drag that or type here, and the player moves a cursor through them on the real interface.
Why I needed it
A screen recording would be heavy or blurry, and every change to a screen would mean recording and editing it again, down to how the cursor moves and how fast. I work systematically, so I built the demos in code instead.
How I did it
I designed it and built it with Claude Code. Each demo is a list of steps. At every step, the player looks up the control by name, measures where it is on screen right now and animates the cursor there. Scrolling and zooming move or scale the whole page underneath.