Theme 024 · Material & 3D

Glass Loupe & Refraction

A heavy optical loupe glides over a calm, dense wall of metrics. Under the glass the numbers magnify with chromatic fringes and a Fresnel rim — and the coral anomaly ink is only visible through the lens. An optical instrument, not glassmorphism.

readability ●●●trust ●●●effort high

How many dashboards
did you check today?

CHECKOUT

FRI 17:40 · missed

1 · HOOK0:00–0:08

The loupe glides in from bottom-right along a slow bezier across 38 calm thumbnails; on the bar-8 downbeat it settles on Friday's checkout card and the hidden coral drop appears under the glass.

Acme Pulse

SEES WHAT THE EYE MISSED

2 · REVEAL0:08 (drop)

The lens drops to centre and magnifies 1 → 1.8 on the drop; a dispersion spike splits the mark into red/cyan for 3 frames, then snaps sharp as the wordmark resolves underneath.

PULSE · 14 METRICS · SCANNING

Signups1,204+4.1%

Active users12.4k+0.8%

p95 latency212 ms−3 ms

Error rate0.4%±0

Checkout conversion3.1%·

Events / sec2,418+1.2%

Dashboards38

CHECKOUT CONV.

−18%

since 09:42 · after deploy #2231

The lens sees it. You decide.

Roll back

Acknowledge

3 · PROOF MOMENT0:12–0:32

The lens scans down the table row by row (one row per beat); on the checkout row it stops, the neutral “3.1%” refracts into a coral “−18%” with underline, the tag drops on a snare and “Roll back” lights up.

Acme Pulse

Caught before
customers
noticed.

Start free

24/7

WATCHING

4 · CTA0:36–0:45

The loupe slides off to rest bottom-right, its caustic trailing; the tagline resolves line by line from blurred to sharp on three downbeats and “Start free” lands on the last.

COMPONENT KIT

SDF lens — a circular refraction pass (or a scaled DOM copy) magnifying what sits under it
Metal barrel — conic-gradient ring and handle that make it a physical instrument
Dispersion — red/cyan channel offset on everything seen through the glass
Fresnel rim — bright edge band + faint coral/ink fringe at the lens border
Hidden ink — coral marks that only render inside the lens mask — the anomaly
Hanging tag — mono readout on a leader line off the loupe: time + deploy

MOTION · MUSIC

Lens glide — bezier path, sine.inOut 3 s = 6 beats; each row or card crossing lands on a beat
Magnify settle — scale 1 → 1.8, expo.out 0.3 s, triggered on a downbeat when the lens stops
Dispersion spike — RGB split 0 → 8 px → 0 over 3 frames on the snare when the anomaly is found

WHY / RISK · ADAPT IT

“The lens that sees what you missed” is the whole product promise in one precise, premium image, and the calm table outside the glass makes the coral inside unmistakable. Risk: a real refraction pass needs WebGL and a pre-baked table texture; the DOM-copy fallback must match the table exactly.

Adapt to your product: Lay your product's densest real screen (a log, a list, a table) flat and let the loupe find the one row your product flags; the hidden-ink trick works for any “we noticed this” feature.

References: https://tympanus.net/codrops/2026/09/08/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl/ (refractive glass over a grid in WebGPU) · https://github.com/ybouane/liquidglass (DOM liquid-glass refraction library)