Skip to content
busker

Loading search…

Scripted cursor demos that really click.

The easy way to build an interactive product mock. Write the screens in plain HTML, then link a click to the screen it opens — the same move as wiring frames in a Figma prototype, except this one ships on your page. Busker plays it back with a cursor that glides and really clicks, so the mock changes through its own handlers. Click it yourself and busker steps aside.

Get started GitHub

Zero dependencies · ~4kB · MIT

Fresh roasts,
to your door.

Single-origin beans, roasted the morning they ship. No warehouse, no staleness.

Pick your pace

You're almost there

Duo$32/mo
You're in.

First batch ships Monday. We'll email your tracking link.

The people behind the beans

MartaOaxaca, MX
YusufYirgacheffe, ET
LenaHuila, CO

Click around and explore

That demo, in full

Six beats and three routes. The scenes are not timed — they change because the cursor pressed a button, exactly as they do when you press it.

typescript
busk(root, {
    initialScene: 'beans',
    start: [0.55, 0.3],
    steps: [
        {click: '[data-cta]', wait: 900},
        {click: '[data-plan="duo"]', wait: 1500},
        {click: '[data-checkout]', wait: 2200},
        {click: '[data-close]', wait: 2600},
        {click: '[data-nav-item="plans"]', wait: 900},
        {click: '[data-plan="solo"]', wait: 1400},
        {to: [0.55, 0.3], wait: 900},
    ],
    routes: [
        {click: '[data-nav-item="beans"]', scene: 'beans'},
        {click: '[data-nav-item="plans"]', scene: 'plans'},
        {click: '[data-nav-item="roasters"]', scene: 'roasters'},
        {click: '[data-cta]', scene: 'plans'},
        {click: '[data-plan="solo"]', scene: 'checkout'},
        {click: '[data-plan="duo"]', scene: 'checkout'},
        {click: '[data-plan="family"]', scene: 'checkout'},
        {click: '[data-checkout]', scene: 'checkout'},
        {click: '[data-close]', scene: 'beans'},
    ],
});