007 · Inbox Choreography — saas-motion-kit

The email you needed was #147.

Search mail

Inbox 147

CustomerCan't finish checkout?? — tried three times, the pay…16:52

Alerts[warn] p95 latency 212 ms — threshold 200 ms16:40

DashboardsDaily digest: 38 dashboards — 14 metrics changed16:31

SupportTicket spike: payments — 23 new since 10:0015:58

Alerts[info] deploy #2231 finished — checkout-v309:41

Alerts[warn] error rate 0.4 % — auto-resolved09:30

DashboardsWeekly digest — signups, active users, …Mon

Alerts[info] 2,418 events/sec — new peakMon

1 · HOOK0:00–0:08

Rows push in from the top one per 1/8 note (y −86→0, 0.18 s power2.out) while the coral unread badge rolls up like an odometer; the headline's “#147.” lands on the bar-2 downbeat exactly as the customer complaint arrives at the top.

Search mail

Inbox 3

Acme Pulsewatching

✓ Archived

Alerts[warn] p95 latency 212 ms

DashboardsDaily digest — 38 dashboardssummarised

Alertserror rate 0.4 %normal

Alertsdeploy #2231 finishedwatched

2 · REVEAL0:08 (drop)

On the drop the Pulse row slams in at hero height (0→230 px, back.out 1.6, 0.3 s) with a teal rim; beneath it rows get labelled, swipe right to archive and collapse on every 1/16 note (height→30→0, 0.22 s power2.in) while the badge counts 147→3.

Search mail

Inbox 1

Acme Pulse

pulse@acme.example · 09:44

anomalycheckout

One anomaly, caught at 09:44.

Checkout conversion −18%

since 09:42 · after deploy #2231

No customer has written in yet. Your call:

Roll back #2231Acknowledge

Alertsp95 latency 212 msnormal · archived

DashboardsDaily digest — 38 dashboardssummarised

3 · PROOF MOMENT0:12–0:32

The last row opens into a full reading pane (FLIP from row to card, 0.45 s power3.inOut); the coral anomaly card slides up one beat later, the mini chart draws left→right, and the pointer clicks Roll back #2231 on the snare — the only email that needed a human.

Search mail

Inbox 0

Caught before customers noticed.

Acme Pulse Start free

Inbox zero · resolved in 6 min · 0 customer emails

4 · CTA0:36–0:45

The reading pane archives away to the right (x 0→110 %, 0.3 s power2.in) and the empty-state illustration draws its pulse line (stroke 0.5 s) as the badge ticks 1→0 and turns green on the downbeat; tagline and CTA fade up together on the final bar.

COMPONENT KIT

Mail row — sender, subject, time; the unit of overload.
Unread badge — coral odometer that climbs to 147 and falls to 0 (green).
Auto-label chips — “summarised”, “normal”, “watched”, “anomaly”: Pulse triaging.
Swipe-reveal action — teal “Archived” bleeding in behind a row.
Digest email from Pulse — the single calm email with the anomaly card and two buttons.
Empty-state illustration — the pulse mark as an inbox-zero reward.

MOTION · MUSIC

Row collapse — height→0 with the rows below sliding up, 0.22 s power2.in, staggered on 1/16 notes (0.125 s at 120 BPM) for a rolling hi-hat feel.
Swipe triage — x 0→−100 % with the teal action colour bleeding in from the left, 0.25 s power3.in, one swipe per beat.
Counter countdown — 147→0 decelerating with expo.out over 2 bars, the last digit landing on a downbeat.

WHY / RISK · ADAPT IT

Why: everyone knows the dread of a flooded inbox and the relief of inbox zero, so the before/after is instant; one calm email from the agent is a believable, human-scale way to show “it filters the noise and asks you only once”. Risk: close to notification tropes — keep it desktop, typographic and slow in the proof beat.

Adapt to your product: the flood becomes whatever noise your customers drown in (tickets, alerts, requests); your product's single summary email carries the one decision it needs from them.

References: Superhuman — inbox-zero imagery · Dribbble — swipe motion studies