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 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'), {
    steps: [
        {wait: 900},
        {click: '[data-nav-item="alerts"]'},
        {wait: 1500},
        {click: '[data-row="p0"]'},
        {wait: 2600},
        {move: [0.55, 0.25]},
    ],
    clickTargets: [
        '[data-nav-item="alerts"]',
        '[data-row="p0"]',
    ],
});

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.

Quick start

npm i @logfox/busker

Getting started is a working demo in four steps.

Contents

Same guides as busker.logfox.ai. Links are repo-relative, so they work in a checkout and on GitHub.

Introduction

• Getting started
• Markup — the five attributes busker reads and the classes it writes

Routines

• Click-driven routines — steps, timing, and click targets
• compile() helper — lay out the same script in tests (no parallel schedules on Routine)
• When a visitor takes over

Reference

• API reference
• Styling

Project

• Development

Releases

Merges to main release through AutoRel. The squash-merge title's conventional commit type sets the semver bump (feat!: → major). Do not hand-edit package.json version — it stays 0.0.0-autorel in git; npm gets the real version at publish time.

License

MIT