CORE.27 cubes. One pulse.
A 3×3×3 matrix of mini cubes arranged in space. Pure CSS 3D. No physics engine. No WebGL. Just transforms and time.
An agency test against itself.
I saw agencies shipping 1MB of WebGL and Rapier physics for hero decoration. I wanted to know how close you could get with browser-native tools and taste.
~850 KB deps
0 KB of deps
Enough? Usually yes.
Four ideas, stacked.
Preserve-3d scene
A perspective container holds a root stage with transform-style: preserve-3d. Every child lives in the same 3D space — cubes can overlap, orbit, and obscure each other naturally.
27 self-rotating mini-cubes
Each mini cube is positioned by translate3d, then rotated on both X and Y with a phase-shift based on distance from the center. The visual effect: coordinated but never identical motion.
Pointer-driven parallax
Pointer coordinates map to an X/Y rotation target. A RAF loop lerps toward that target at 8% per frame — smooth, never snappy. When the cursor leaves, the matrix resumes autorotation.
Outward light wave
A sin(time × 1.8 − distance × 4) wave sweeps from the center outward. Cubes on its crest get a brighter border and inner glow. Cheap trick — but it gives the grid a pulse.
Stand a little closer.
— Move the cursor slowly for the best effect
Want something like this
but for your product?
I build interactive pieces like this into landing pages, hero sections, and case studies. Book a call — we'll scope one.