Loading · zero deps

Lego bricks build an F1 car

Bricks scattered on the floor snap together into an F1 car that drives away. legoF1 mounts with start() / complete() / reset().

Get started View on npm
TypeScript Injected CSS ~2.8 kB gzip
/demo

Live build

Full-screen Lego F1 demo

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

/install

Install lego-f1-loading

npm install lego-f1-loading
yarn add lego-f1-loading
pnpm add lego-f1-loading
/api

API reference

Method / optionTypeDescription
legoF1(container, options?) Returns { start, complete, reset, setScale, setBackgroundColor, setBackgroundOpacity, destroy }
start() void Bricks assemble into an F1 car
complete() void Car drives off to the right
reset() void Back to idle (bricks scattered)
setScale(n) void Resize the scene; updates canvas backing store
setBackgroundColor(hex) void Change scene background (same as backgroundColor option)
setBackgroundOpacity(n) void Scene backdrop opacity 0–1; canvas gradient + surface
scale number Visual scale multiplier (default 1)
color string Brick accent color (default #fdd835)
baseColor string Base / shadow brick color (default #1a1a1a)
backgroundColor string Scene background — canvas gradient + surface (default #f4f6f9)
backgroundOpacity number Backdrop opacity 0–1 (default 1)
text string | string[] Status line. Array: first = idle/start, middle cycle during build, last on complete()
textInterval number Ms between middle messages (default 2000)
assembleSpeed number Assembly tempo; 1 = default. Higher = faster brick motion (clamped ~0.15–5)