Fake product demos on a landing page usually rot. The cursor is on one timeline, the page state is on another, and the moment you change a duration they drift — the cursor presses a button 200ms before the modal it opened, forever.
Busker gets rid of the second timeline. You give it a list of places the cursor goes, it glides there and really clicks the element, and your own handlers change the page. Nothing is timed except the pauses, so there is nothing to keep in sync.
import {busk} from '@logfox/busker';
import '@logfox/busker/busker.css';
busk(document.querySelector('.app'), {
initialScene: 'home',
steps: [
{click: '[data-nav-item="alerts"]', wait: 900},
{click: '[data-row="p0"]', wait: 1500},
{to: [0.55, 0.25], wait: 2600},
],
routes: [
{click: '[data-nav-item="alerts"]', scene: 'alerts'},
{click: '[data-row="p0"]', scene: 'case'},
],
});The show loops while the mock is on screen and stops when the tab is in the background. The first time a visitor clicks, busker steps aside — the cursor disappears and the mock is theirs to poke at. Click something dead and it flashes what is not.
Zero dependencies, about 4kB, no build step, no framework.
npm i @logfox/buskerGetting started is a working demo in four steps.
Same guides as busker.logfox.ai. Links are repo-relative, so they work in a checkout and on GitHub.
- Getting started
- Markup — the five attributes busker reads and the classes it writes
- Click-driven routines — steps, timing, and routes
- Hand-timed routines — for what no click causes: streaming logs, typing, countdowns
- When a visitor takes over
MIT