Loading · zero deps

Lego bricks launch a rocket

Bricks scattered on the pad snap together into a rocket that launches into orbit. legoRocket mounts with start() / complete() / reset().

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

Live launch

Full-screen Lego rocket 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-rocket-loading

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

API reference

Method / optionTypeDescription
legoRocket(container, options?) Returns { start, complete, reset, setScale, setBackgroundColor, setBackgroundOpacity, destroy }
start() void Bricks assemble into a rocket
complete() void Rocket launches upward
reset() void Back to idle (bricks scattered)
setScale(n) void Resize the scene; updates canvas backing store
setBackgroundColor(hex) void Sky / pad backdrop (#hex); updates surface + starfield
setBackgroundOpacity(n) void Backdrop opacity 0–1; updates surface + starfield
scale number Visual scale multiplier (default 1)
color string Brick accent color (default #2eafdd)
baseColor string Base / shadow brick color (default #1a1a1a)
backgroundColor string Scene background behind stars (default #0d1020)
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)