Theme 027 · Material & 3D

Tilt-Shift Diorama

Your product runs a tiny model town shot through a tilt-shift lens: a thin razor-sharp band, creamy blur everywhere else, boosted saturation and toy sunshine. Pulse is the teal van on patrol, and focus pulls to the one billboard that changed.

readability ●●○trust ●●○effort med

How many dashboards
did you check today?

38 SCREENS IN ONE SMALL TOWN

1 · HOOK0:00–0:08

A slow dolly creeps forward over the town while the focus band drifts down through rows of rooftop screens; on the bar-8 downbeat it lands on the one screen with a coral dip.

Acme Pulse

NOW PATROLLING YOUR METRICS

2 · REVEAL0:08 (drop)

The teal Pulse van drives in from the left on the cross street, in toy-speed stepped motion, and stops dead in the focus band on the drop; the wordmark rises from the blurred foreground.

PULSE · PATROLLING 14 METRICS

Focus pulls to the one sign that matters.
A tiny human hits Roll back.

3 · PROOF MOMENT0:12–0:32

Focus racks from the street to the plaza billboard (0.8 s power2.inOut) as it flips to coral; on the snare it pulls down to the console where a tiny operator slaps the Roll back button.

Caught before
customers noticed.

Start free

4 · CTA0:36–0:45

The camera cranes up and the band settles on the lockup billboard on a downbeat; the “Start free” button pops in over the blurred foreground on the final bar.

COMPONENT KIT

Diorama board — the town as low-poly boxes under a 35° perspective camera (not isometric)
Focus band — a gradient mask over a blurred duplicate — only a thin band stays sharp
Rooftop screens — billboards that show each metric's sparkline
Pulse van — a teal toy vehicle carrying the Acme mark — the agent on patrol
Tiny operator — a figure at a console with a big coral button — the human decision
Bokeh dots — defocused warm lights in the out-of-focus zones

MOTION · MUSIC

Focus pull — the sharp band slides to the subject, power2.inOut 0.8 s, arriving on the downbeat — it replaces cuts
Toy speed — vehicles and people move slightly fast on steps(12), which sells the miniature scale
Slow dolly — translateZ creep with layer parallax across the whole 8-bar phrase, linear, never on the beat

WHY / RISK · ADAPT IT

Tilt-shift makes any system look small, legible and under control — exactly the feeling of a background watcher — and the focus band is a built-in attention pointer. Risk: the blur limits copy to the focus band; overlay type must sit on calm, defocused areas.

Adapt to your product: Build your product's world as a model town (services as buildings, users as figures, your agent as the vehicle) and put your one key alert on the billboard where focus lands.

References: https://tiltshift-in-html.ybouane.com/ (tilt-shift blur in HTML) · https://tympanus.net/codrops/2024/07/02/progressive-blur-effect-using-webgl-with-ogl-and-glsl-shaders/ (progressive blur with WebGL shaders)