Theme 026 · Material & 3D

Pixel-to-Voxel

Flat pixel screens wake up as a voxel city. Every metric becomes a tower of cubes whose height is its value; when something breaks, the wrong voxel ejects in coral and leaves a dashed ghost where the missing blocks should be.

readability ●●○trust ●●○effort high

How many dashboards
did you check today?

12 OF 38 · FLAT · 2D · SILENT

▲ one of them dipped on Friday

1 · HOOK0:00–0:08

The pixel mosaic builds row by row top→down, one row per sixteenth note, like a slow raster; the coral dip pixels light up last on the bar-8 downbeat.

Acme Pulse

FLAT SCREENS WAKE UP IN 3D

2 · REVEAL0:08 (drop)

The floor extrudes in a ripple from the centre outward on the drop (delay = distance × 0.015 s); the teal centre tower rises highest and the mark lands on its beam.

SIGNUPS

USERS

P95

CHECKOUT

ERRORS

VOXEL EJECTED

Checkout conversion −18%

since 09:42 · after deploy #2231

Roll back

Acknowledge

3 · PROOF MOMENT0:12–0:32

The camera yaws 20° while towers grow one per beat; on the snare the checkout tower's top voxel ejects up-right in coral, dashed ghosts mark the missing height, and the card + “Roll back” slide up from the bottom.

Acme Pulse

Every metric.
Every minute.

Start free

4 · CTA0:36–0:45

The corner stack assembles cube by cube (gravity drop + one bounce per beat); the tagline snaps in on the downbeat and “Start free” lands with its 12 px voxel ledge.

COMPONENT KIT

Pixel grid — the UI rasterised into square pixels — the flat “before” state
Extrude ripple — per-cell depth 0→1 radiating from the centre
Metric tower — a voxel column per metric; height encodes value
Rogue voxel — the coral cube that ejects from the anomalous tower
Ghost cubes — dashed coral outlines of the missing height (−18 %)
Voxel button — flat face + 12 px solid ledge, reads as a physical block

MOTION · MUSIC

Ripple extrude — delay = distance × 0.015 s, back.out(2) 0.4 s; the wave front crosses the centre on the downbeat
Gravity drop — cubes fall power2.in 0.25 s + one small bounce, one cube per eighth note at 120 BPM
Camera orbit — linear 20° yaw across 8 bars; never eased, so the beat-locked cube hits carry the rhythm

WHY / RISK · ADAPT IT

Height-as-value is instantly legible and the “missing block” shows the size of the drop without reading a number. Voxels feel playful but engineered. Risk: a real build needs Three.js with baked, deterministic physics; keep towers few (≤ 5) so labels stay readable.

Adapt to your product: Rasterise your own dashboard into the opening mosaic, then extrude the 4–5 numbers your product cares about as towers; the thing your product catches is the tower that loses its top voxel.

References: https://tympanus.net/codrops/2026/01/05/how-to-create-a-pixel-to-voxel-video-drop-effect-with-three-js-and-rapier/ (pixel-to-voxel drop effect with Three.js + Rapier) · https://tympanus.net/codrops/2023/03/28/turning-3d-models-to-voxel-art-with-three-js/ (voxelising 3D models)