Theme 008 · Product UI as the stage

Calendar Timeline Scrub

The work week drawn as an editing timeline: a day ruler, a team lane, a customers lane and a playhead that scrubs with the music. Acme Pulse is a new lane of tiny ticks underneath everything — the invisible background work made visible — and the counterfactual Friday incident fades out once the Tuesday catch lands.

readability ●●○trust ●●●effort med

And the drop still shipped on Friday.

MONTUEWEDTHUFRI

TEAM

Planning

deploy #2231

Sprint work

Release

CUSTOMERS

Tickets ×23

DASHBOARDS

38 open

found 3 days late

FRI 16:02

1 · HOOK0:00–0:08

The playhead scrubs left→right across the week on a speed ramp (fast over Wed–Thu with directional blur, easing out on Friday) and stops as the striped coral ticket block grows from its left edge (scaleX, back.out 1.4) on the bar-2 downbeat.

Acme Pulse

MONTUEWEDTHUFRI

TEAM

Planning

deploy #2231

Release

PULSE

CUSTOMERS

Tickets ×23

◀◀ TUE 09:30

NEW LANE · 1 TICK PER MINUTE · 14 METRICS

2 · REVEAL0:08 (drop)

On the drop the playhead rewinds hard (Fri→Tue, 0.4 s expo.inOut with a reverse blur) and a new teal lane pushes the others apart (height 0→140, back.out); ticks fill it left→right one per 1/16 note as the Acme Pulse lockup drops in above the ruler.

TUESDAY · ZOOM 09:30 → 10:00

09:3009:3609:4209:4809:54

TEAM

deploy #2231

↺ Roll back · 09:48

PULSE

CUSTOMERS

0 tickets · nobody noticed

09:48

Checkout conversion −18%

since 09:42 · after deploy #2231

Roll backAcknowledge

09:42 caught → 09:48 rolled back · 6 minFRI tickets ×23

3 · PROOF MOMENT0:12–0:32

The camera zooms the ruler from days to minutes (0.8 s sine.inOut); Pulse's ticks march on the hi-hat until the 09:42 tick grows into a coral flag on the snare, the card rises from it, and the human's teal “Roll back · 09:48” block grows from its left edge on the next downbeat while the Friday ghost desaturates.

Acme Pulse

Every metric. Every minute.

MONTUEWEDTHUFRI

TEAM

Planning

deploy #2231

Release ✓

PULSE

CUSTOMERS

quiet week

Start free

acme.example/pulse

NOW

4 · CTA0:36–0:45

The ruler zooms back out to the whole week and the playhead glides to “NOW”; the Start free clip snaps onto the playhead like an edit (scaleX from 0, 0.25 s back.out) on the final downbeat while the Pulse lane keeps ticking.

COMPONENT KIT

Day / minute ruler — the timeline header; zooms from week to minutes.
Playhead + time pill — amber “now” line that scrubs with the music.
Event blocks — team work (deploy #2231, Roll back · 09:48) as clips.
Pulse lane — a teal lane of per-minute ticks: the background work made visible.
Ghost event — striped coral “Tickets ×23” on Friday: the counterfactual.
Duration bracket — “found 3 days late” vs “resolved in 6 min”.

MOTION · MUSIC

Speed-ramped scrub — the playhead eases fast/slow along a custom curve with a directional blur ramp; every stop is on a downbeat (2 s per bar at 120 BPM).
Block growth — event blocks scaleX from the left edge, 0.3 s back.out(1.4), each on a kick.
Ghost dissolve — the Friday event desaturates and fades to 35 % over 1 s as the Tuesday catch lands; Pulse ticks march on 1/16 notes throughout.

WHY / RISK · ADAPT IT

Why: the counterfactual (Friday tickets) against the actual (a Tuesday catch) is the clearest possible proof of “before customers noticed”, and ticks in their own lane make invisible background work concrete. Risk: the before/after logic must read instantly — label the ghost and the brackets boldly and keep only three lanes.

Adapt to your product: put your users' real week on the ruler, your product's activity in its own lane, and show the bad event your product prevents as a ghost that fades.

References: Dribbble — calendar animation