Theme 052 · Signature directions

Depth / 3D

Every scene is built from translucent glass plates floating in perspective — the launch-film language of dev-tool companies. The hook explodes a stack of dashboards along the Z axis, the drop slides four ghost planes into one flat lockup, and the proof separates two layers that never merge: your dashboard below, the Pulse audit layer hovering above it.

readability ●●○trust ●●●effort high

How many dashboards did you check today?

Revenuetab 38

Signupsno data

Error rate 0.4 %alert

p95 latency212 ms

Checkouttab 12 of 38

38 dashboards · 5 tabs deep

1 · HOOK0:00–0:08

Plates fire forward out of depth (−Z → 0) one per beat along dashed teal Z-rails while the question sits flat; on bar 3’s downbeat the stack explodes — gaps widen from 60 to 140 px and the camera orbits 6° right→left.

You ship.
Pulse watches.

Acme Pulse

four planes → one · tilt 16° → 0°

2 · REVEAL0:08 (drop)

On the drop four ghost planes slide in from back-right, half a beat apart, and lock into one plane; the tilt eases 16°→0° as the wordmark sharpens and the ghosts fade.

You ship. Pulse watches.

team dashboard below · Pulse layer above

METRICNOW1HTREND

Signups+4%+2%▁▂▃▄

Active users+1%0%▃▃▄▄

Checkout conv.−18%−2%▆▆▂▁

p95 latency212ms209ms▄▄▄▅

Error rate0.4%0.4%▂▂▂▂

Events/sec2,4182,390▅▅▆▅

Pulse · audit layer● watching

Signups✓

Checkout conversion−18% ⚠

since 09:42 · after deploy #2231

p95 latency✓

Error rate✓

Roll backAcknowledge

3 · PROOF MOMENT0:12–0:32

The camera flies through to the floor table, then the glass Pulse layer glides in above it (+Z); checks tick one per beat and on the bar-9 downbeat a coral line drops from the ⚠ row straight into the Checkout cell.

Acme Pulse

Caught before customers noticed.

Start free

4 · CTA0:36–0:45

Depth collapses: every angle to 0°, every Z to 0 in a single blur-crossfade; two hairline echoes stay behind the lockup, the tagline rises, and the coral button drops on the sting.

COMPONENT KIT

Glass plate — white 74 % + bright inner edge + hairline + deep soft shadow, r22 — the only surface type
Exploded stack — one 3D rig, plates 120–150 px apart in Z, joined by dashed rails
Z-rails — 3 px dashed teal lines along the depth axis; make the space legible
Ghost echoes — outlined teal copies of the wordmark that stream forward and lock into one plane
Audit layer — glass panel hovering ~300 px above the floor table; a coral drop-line pins the anomaly to its cell
Depth collapse — end state: all angles 0°, Z 0, two hairline echoes as a memory of the depth

MOTION · MUSIC

Plate fly-in — translateZ −400 → 0 with 20° → 0° tilt, expo.out 0.6 s, one plate per beat (0.5 s at 120 BPM)
Camera orbit — rig rotateY −34° → −28° + dolly 8 %, sine.inOut over 2 bars (4 s) — keeps the stack alive between hits
Drop-line pin — coral line draws 0 → 100 % in 0.25 s (power2.in) exactly on a bar downbeat, followed by a 2-ring ripple 0.4 s

WHY / RISK · ADAPT IT

Depth makes an invisible “background” product physical: the viewer literally sees Pulse as a layer above their own tools, which is the positioning in one image. Risk: text on tilted planes loses legibility — keep numbers on the flattest plane, cap tilt at 30° and never tilt the headline.

Adapt to your product: Put your customer’s existing tool on the floor plate and your product as the hovering glass layer; any audit, copilot or observability product maps 1:1. Replace the plate contents with your own real screens exported as flat PNG/HTML.

References: https://stripe.com/blog/connect-front-end-experience (3D CSS planes and cubes in a product launch page) · https://developer.mozilla.org/en-US/docs/Web/CSS/perspective (how CSS perspective builds a shared 3D space) · https://css-tricks.com/how-css-perspective-works/ (perspective vs. perspective-origin in practice)