Product demos on your real UI

How it works

Every step is a small piece of hand motion. A click isn't a jump cut: the cursor travels there in a slight arc, rests for a beat so your eye catches up, presses, and lets go.

The press fires real pointerdown, mousedown, pointerup, mouseup and click events on the element, so your app's own handlers run. Typing writes through the native value setter and fires input, so React and Vue controlled fields update too.

The camera is a transform on the stage's only child. The cursor lives inside it, so it scales with the zoom and stays on its target while the camera moves.

Install

The quickest way is to let your coding agent do it. Add the agent skill to your project.

npx skills add diip3sh/playthrou

Then ask in plain words. The skill tells the agent how playthru works, so it can install it (or load it from a CDN on a plain HTML page), build the stage, write the script and the reset, and mirror your hover styles.

Add a playthru demo of the issue composer to the hero.
Put a self-playing demo of this page in the landing page, no npm.
My playthru demo starts the second loop in the wrong state. Fix it.

To set it up by hand, add the package. It has no dependencies and no stylesheet to import.

npm i playthru

Wrap the UI you want to show in a stage, then write the script.

<div id="hero" class="h-[520px]">
  <div><!-- your real app UI --></div>
</div>

import { playthru } from "playthru";

playthru("#hero")
  .click("#new-issue")
  .zoom("#composer")
  .type("#title", "Fix onboarding flicker on Safari")
  .click("#create")
  .zoomOut()
  .zoom(".issue:first-child")
  .reset(() => app.reset());

It starts the first time the stage scrolls into view and loops forever. In React, import Playthru from playthru/react and pass the same chain as a function.

<Playthru
  className="h-[520px]"
  script={(d) => d.type("#todo", "Record the launch video").click("#add")}
>
  <TodoApp />
</Playthru>

The numbers

There is no speed, easing or duration option, and there won't be one. The numbers are the product: each one is a decision you no longer have to make.

One easing curve, a cubic in-out, drives both the cursor and the camera, so the two never disagree about when a move starts or lands.

API

playthru(stage, options?) takes a selector or an element and returns a chain. Targets are selectors scoped to the stage, or elements. They resolve when the step runs, so a step can target something an earlier step created.

Options say whether, never how. Timing is not an option.

Hover and focus

A fake cursor can't trigger :hover, and playthru never moves real keyboard focus, so it can't trigger :focus either. Instead it marks the element under the cursor and the field being typed in.

.button:hover,
.button[data-playthru-hover] {
  background: var(--button-hover);
}

input[data-playthru-focus] {
  outline: 2px solid var(--accent);
}

In Tailwind, the attributes work as variants: hover:bg-gray-200 data-playthru-hover:bg-gray-200. The text caret is drawn by playthru, in the field's own text color.

Limitations

• The stage needs a single child. If it has several, playthru wraps them in a div and unwraps them on destroy.
• Elements inside iframes, canvas and WebGL scenes can't be targeted, because the cursor needs a DOM element to aim at.
• The drawn caret appears in single-line inputs only. Textareas and contenteditable get typed into without one.
• Clicks on links and submit buttons have their default action prevented, so a demo never navigates. Handle the click in your code if it should do something.
• The demo's events reach the whole page. While a menu, listbox or popover outside the stage is open, the demo pauses so its clicks can't close it. Popups are found by aria-expanded="true" on their trigger or by :popover-open. A custom popup with neither should ignore events where event.isTrusted is false.
• Your app state is yours to reset. Typed fields restore themselves; everything else goes in reset().

With prefers-reduced-motion, the cursor jumps instead of gliding, the camera stays still, and loops cut without fades.

FAQ