Map loading to a bowler’s run-up, then fire the shot when your promise resolves. coverDrive exposes start(), complete(), and reset().
Open a full-viewport run with Start, Complete, and Reset, and adjust scale, batterColor / bowlerColor (kit only; the ball stays white), celebrationText, status lines, and textInterval.
npm install cover-drive
yarn add cover-drive
pnpm add cover-drive
| Method / option | Type | Description |
|---|---|---|
| coverDrive(el, options?) | — | Returns controller (see below) |
| start() | void | Enter loading / run-up loop |
| complete() | void | Play the boundary + celebration |
| reset() | void | Back to idle |
| destroy() | void | Unmount from DOM |
| scale | number | Visual scale multiplier (default 1) |
| batterColor | string | Batter kit — shirt, pads, legs, gloves, helmet (default #1f5f3a). Ball is always white. |
| bowlerColor | string | Bowler kit — cap, shirt, legs (default #1f5f3a) |
| celebrationText | string | Default FOUR! |
| text | string | string[] | Status line. String = idle / reset only. Array = first + start, middle cycle during load, last on complete() |
| textInterval | number | Ms between middle messages in array mode (default 2000) |
| surfaceBackground | string | Field container + canvas base (default #12171f) |
| borderColor | string | 1px border around the scene (default rgba(255,255,255,0.08)) |
| borderRadius | number | string | Corner radius, px or CSS length (default 12) |