Theme 035 · Light, optics & texture

Point Cloud

Thousands of soft particles on a deep void, each one an event from your product. The cloud keeps morphing between meaningful forms (a swarm of dashboards, the pulse line, a dot-stacked chart) and every morph lands on a readable data shape. Healthy points are cool teal dust; the anomaly is three coral embers that refuse to settle.

readability ●●●trust ●●○effort high

2,418 events/sec38 dashboards · 0 watching

How many dashboards did you check today?

1 · HOOK0:00–0:08

Dashboard outlines shed particles into a slow clockwise vortex (seeded curl drift); the swirl speeds up across 4 bars and the question lands on the bar-2 downbeat.

Acme Pulse

every event · one shape

2 · REVEAL0:08 (drop)

On the drop the whole swarm snaps into the pulse line (position morph, power3.inOut 1.6 s, per-particle delay by index), left→right; the coral head dot ignites on beat 3 and the lockup fades up beneath.

Checkout conversion · 1 dot = 100 checkouts14 metrics

09:00 ——— 09:42 ———

−18%Checkout conversion

since 09:42 · after deploy #2231

Roll backAcknowledge

awaiting
your call

3 · PROOF MOMENT0:12–0:32

Particles rain down and stack into a per-minute chart, one column per 8th note; after 09:42 the stacks come up short and three coral embers detach upward (expo.out), the camera pushes toward them and the card drops in on the snare.

Acme Pulse

Every metric.
Every minute.

Start free

4 · CTA0:36–0:45

The cloud relaxes into a slow orbiting ring (one revolution per 4 bars) around the lockup; the tagline breathes up line by line and Start free glows on the final downbeat.

COMPONENT KIT

Particle field — 10–20k soft points (WebGL points or canvas 2D, additive blend); each point is one event.
Target shapes — position buffers sampled from SVG/text: dashboard outlines, the pulse line, a dot-stacked chart, a ring.
Coral embers — outlier points with a glow and a curved trail that refuse to settle; the anomaly.
Expected-level ghosts — dashed coral rings where points should be; makes "−18%" visible as absence.
Pinned labels — mono HUD text and a dashed leader line from an ember to its decision card.
Event counter — "2,418 events/sec" readout that sells the scale of what's being watched.

MOTION · MUSIC

Shape morph — uProgress 0→1 between position buffers, per-particle delay by index, power3.inOut 1.6 s; starts on the 0:08 drop and settles on beat 4.
Curl drift — seeded noise offset keeps the idle cloud breathing; amplitude pumps +20 % on each kick at 120 BPM.
Ember isolation — flagged points detach upward and the camera pushes in (expo.out 0.8 s) landing on the snare.

WHY / RISK · ADAPT IT

Showing every event at once makes "watching everything" tangible, and three misbehaving points out of thousands is an instantly readable story. Risk: "AI dust" is a cliché; every morph must land on a real, readable data shape.

Adapt to your product: Map one particle to one unit of your product (a request, an order, a user session) and morph the cloud into your own chart; the embers become whatever your product flags.

References: Codrops: interactive particles · Codrops: GPGPU particle effect · Three.js Journey: particles morphing