Theme 048 · Metaphor concepts

GPS Reroute

Your release is a route on a clean, tilted vector map. Acme Pulse is the navigator: it spots the hazard ahead before you reach it, shows "Recalculating…", and offers the safe road. You tap to confirm, and you still arrive on time.

readability ●●●trust ●●●effort med

1 · HOOK0:00–0:08

Grey pins rain onto a flat map one per 8th note until there are 38 of them; the camera drifts down-right. On the last downbeat the dark banner slides up: "Arrived: Friday 17:40 · too late".

2 · REVEAL0:08 (drop)

The flat map tilts back to 48° as the pins dissolve; the nav banner drops from the top. On the drop the teal route draws from the puck to the horizon (stroke progress, expo.out 0.6 s) and "Acme Pulse" snaps into the banner.

3 · PROOF MOMENT0:12–0:32

The camera follows the puck up the route with a lerped lag while the map drifts 6° in bearing; a coral hazard pin drops ahead with a bounce. The banner flips to "Recalculating…", the old path goes dashed grey, and when the human taps "Roll back" the new teal route snaps in (0.35 s expo.out) on the downbeat.

4 · CTA0:36–0:45

The puck reaches the flag and the camera pulls up; the arrival sheet slides up from the bottom on beat 1. The tagline sets across beats 2–3 and "Start free" pops on the final downbeat.

COMPONENT KIT

Tilted vector map — light streets, parks and blocks at ~48° perspective; neutral enough for any product.
Route line — thick teal ribbon with a progress head; the release.
Nav banner — dark top card: "Recalculating…" plus the anomaly as the hazard reason.
Hazard pin — coral pin with a "−18%" tag dropped just ahead of the puck.
ETA chip — "customers: on time"; the reassurance.
Bottom sheet — the human confirm (Roll back / Acknowledge); becomes the arrival CTA sheet.

MOTION · MUSIC

Route draw — stroke-dashoffset progress over 2 bars (4 s at 120 BPM), linear, with a lerp-smoothed camera (factor 0.12) following the head.
Bearing drift — slow map rotation, about 6° across the scene, sine.inOut; keeps the long proof beat alive.
Reroute snap — old path fades to dashed grey in 0.2 s, new path draws in 0.35 s expo.out on the downbeat after the tap; the banner flips with a 0.25 s rotateX.

WHY / RISK · ADAPT IT

Everyone knows the reroute moment, and it says "caught it, changed course, still on time" in one beat. Risk: it can suggest the AI changes things by itself; always show the human's confirm tap before the route changes.

Adapt to your product: Make the route whatever your users move through (a checkout, a migration, an onboarding, a month-end close) and let the hazard be the issue your product detects.

References: Mapbox, cinematic route animations · Animate My Route