cover-drive

Cricket “run-up + boundary” for async UX — start() loops the approach, complete() rips a four to the fence. Self-contained CSS + canvas. Zero dependencies.

Live Demo →

Install

npm install cover-drive

Quick start

import coverDrive from 'cover-drive';

const el = document.getElementById('scene')!;
const match = coverDrive(el, {
  celebrationText: 'SIX!!',
  text: [
    'Ready to bowl.',
    'Run-up…',
    'Delivery…',
    'Worked into the gap…',
    "That's four to the fence!",
  ],
  textInterval: 1800,
});

match.start(); // loop: run-up, ball alive

// when your work resolves:
match.complete();

// new innings
match.reset();

API

coverDrive(container, options?)

| Option | Type | Default | Description | |--------|------|---------|-------------| | scale | number | 1 | Visual scale multiplier (e.g. 0.75, 1.5) | | batterColor | string | #1f5f3a | Batter kit — shirt, pads, legs, helmet, gloves. The ball is always white. | | bowlerColor | string | #1f5f3a | Bowler kit (cap, shirt, legs). | | celebrationText | string | FOUR! | Big ribbon copy | | text | string \| string[] | Ready to bowl. (idle) | Status line under the scene. Pass a string to override the idle / reset line only; other phases keep built-in copy. Pass an array: first = idle + start, last = complete subtitle; middle entries cycle during the loading loop. | | textInterval | number | 2000 | Interval in ms between middle status messages (array mode only). | | surfaceBackground | string | #12171f | Dark field container background; also used as the canvas ground so the border frame matches. | | borderColor | string | rgba(255,255,255,0.08) | Border around the 300×140 scene. | | borderRadius | number \| string | 12 | Corner radius. Pass a number for pixels, or a CSS length (e.g. 0.5rem). |

Status line: With a string, only idle / reset() uses your copy; start(), the loading loop, and complete() keep the built-in lines (and the delayed “what a shot!” line after complete()). With an array, index 0 is idle and the first line when start() runs, indices 1 … length-2 rotate in order every textInterval ms during the loading loop, and index length-1 is the subtitle when complete() runs (the ribbon still uses celebrationText).

| Method | Description | |--------|-------------| | start() | Begin the “over” (loading) loop. | | complete() | Play the boundary + celebration. | | reset() | Clear to idle. | | destroy() | Remove nodes from the container. |

Bundle size: ~2.3 kB minified + gzip (see bundlephobia).

License

MIT © Everything Frontend