Playthru

Playthru replaces the 6 MB hero MP4 with your actual UI. A scripted cursor glides across the real interface, clicks, types, and pushes a camera in on what matters, then loops—sharp at any size, in light or dark, and never out of date with the product. The library has zero dependencies, ships at ~5 KB gzipped with no stylesheet, and exposes a chainable API (`click`, `type`, `zoom`, `reset`) plus a React component and hook. An agent skill lets Claude Code or Cursor set up a demo from a single prompt. Every timing is a fixed decision rather than an option: there is no speed, easing, or duration setting.

Build StackTypeScript, React, Astro, Changesets, npm

Challenges

  • Firing clicks and keystrokes that real app handlers respond to, including React and Vue controlled inputs, without stealing focus or navigating away.

  • Running scripted events through the whole page without tripping a menu's click-outside handler and closing popovers the visitor opened.

  • Choosing glide, typing, and zoom timings that read as human at video frame rates instead of exposing a wall of knobs.

  • Pausing cleanly on hover, scroll-out, or a background tab, and resuming exactly mid-motion.

Solutions

  • Dispatched the full pointerdown → mousedown → pointerup → mouseup → click sequence, drew a custom caret, and prevented default navigation while leaving handlers intact.

  • Paused the demo while any aria-expanded popup or native :popover-open element outside the stage is open, which covers Radix, Base UI, Headless UI, React Aria, and MUI.

  • Fixed the numbers as product decisions: a 420 ms + 0.34 ms/px glide on a 10% arc, seeded 48 ms typing jitter, and zoom clamped to 1.3–2.2×.

  • Drove everything from one pausable frame clock, with prefers-reduced-motion swapping glides and camera moves for cuts.