Loading · zero deps

Fast pit lane loader

Car in, wheel gun, out — a looping F1 story for any slow network or heavy job. f1BoxBox mounts with start() / complete() / reset().

Get started View on npm

TypeScript Injected CSS ~2.2 kB gzip

/demo

Live pit

Full-screen pit demo

Open a full-viewport run with Start, Complete, and Reset, and tweak scale, colors, status text, and textInterval the same way you would in code.

f1-box-box — pit demo

Scale

2.5

Scales the 300×110 scene and canvas backing store so it stays sharp. Adjust to see how big the loader can read.

color

baseColor

textInterval (ms)

text (one line = one message; first idle/start, middle cycle, last on complete)

/install

Install f1-box-box

npm install f1-box-box

yarn add f1-box-box

pnpm add f1-box-box

/api

API reference

Method / option	Type	Description
f1BoxBox(container, options?)	—	Returns `{ start, complete, reset, destroy }`
start()	void	Car enters pit, crew starts working
complete()	void	Green light, crew steps back, car exits
reset()	void	Back to idle
scale	number	Visual scale multiplier (default `1`)
color	string	Car accent (default team red)
baseColor	string	Car chassis & mechanics' gear base color (default `#1a1a1a`)
text	string \| string[]	Status line. String = idle / reset only. Array = first + start, middle cycle during pit work, last on `complete()`
textInterval	number	Ms between middle messages in array mode (default `2000`)