assembled
Every cube found its seat.
Three numbers each, twelve bytes, one draw call for all of them — and not a seam in sight.
The clever bit
Why the tiles line up
Nothing is aimed
Each cube is parked at a random depth and scaled so its apparent size never changes. When the camera arrives they all project to the same rectangle and tile flush — the alignment is arithmetic, not choreography, so it cannot drift.
Twelve bytes each
A cube stores three numbers — column, row, parked depth — and the shader works out the rest. That is how a grid this size loads instantly and still draws in a single call.
Colour that checks itself
Themed pages take their palette from your picture and hold it to WCAG AA — and if a colour you forced makes that impossible, they say so instead of quietly shipping it. Every colour on this page came out of the image behind you.
Cubes are one style of two. Kinetic keeps the picture on screen the whole way down and resolves it out of a liquid smear instead — same camera, same clock, no cubes.
Take it away
Three ways to leave with it
One file, done
A single self-contained page. Open it, scroll it, host it anywhere — or email it to someone and watch them scroll it too.
The whole landing page
--themebuilds the copy, the pacing and the palette around the effect — three voices, ready to ship.A drop-in module
One script tag in a site you already have. It publishes how far along it is, so your own content can move on the same clock the camera does.
Your turn
Go and scatter something
Bring a photo, a logo, your dog — anything with a shape. It is free, there is nothing to sign up for, and your picture never leaves your browser, so we could not peek at it if we wanted to.