Motionboard
Original · Superhuman · 0:05–0:11YouTube ↗
Motionboard recreation

Pile-up and Clear

Tasks, tags, or events pile up one by one until the screen is full, then clear in one step to a single result state.

Seen in

YouTube ↗
YouTube ↗
Full recipe

Why it works

The number and position of elements draw the feeling of "more and more things to do", with red tags gradually surrounding the person. On clearing, the color changes from red to green and many tags become one, so the before-and-after contrast takes a single image swap.

Spec

Timing
Window arrives 0–0.9s; 22 emails land from 0.9s with intervals shrinking 0.62→0.05s (last at 5.32s); 8 desktop notifications 2.75–5.1s; select-all key HUD 5.45s, selection 5.85s; clear in one frame at 6.45s; Inbox Zero holds 6.45–8.4s (about 1.95s, 58 frames); scene fades 8.4s (0.5s), mark 8.7s, wordmark 8.8s, tagline 9.1s; film 10.8s
Easing
Row arrival: list shift expo.out (duration min(0.36s, 1.6× the interval)) and row fade power2.out up to 0.14s; badge pulse scale 1.15→1 power2.out 0.1s; urgent rows flash red for 0.9s; notifications expo.out 0.22s (scale 1.08→1, x 30→0); the clear is a single-frame tl.set; Inbox Zero image scale 1.07→1 expo.out 1.8s
Camera
Fixed medium shot with a slow drift, scale 1→1.035 over 8.4s linear (origin 50% 12%); the window enters y 46→0, scale 0.965→1 over 0.9s expo.out
Subject
A mail app (Cobalt) with 4 existing messages; 22 new ones land at the top of the Inbox and push the list down 52px per row, while the Inbox badge and Important tab counter step 5→26; urgent rows flash red; 8 desktop notifications stack at the window edge (88px pitch); command-A selects all 26 rows, E marks them done: list, notifications, selection bar and badge disappear and a dusk-landscape Inbox Zero panel with a green check and a toast takes over
Sync
Each arrival and its counter step share one frame; the command-A key caps and the row selection land on the same frame (5.85s); the E key cap, the clear, the toast and the Inbox Zero panel land on the same frame (6.45s)
Style
Light mail UI on a desktop wallpaper; red Urgent chips (#fde4e4 background, #c62f34 text), green check #2fb36a, a deep blue-violet dusk gradient for the result; the end card is a blue app mark with a lowercase wordmark and a one-line tagline

Prompt

Show your product wiping out chores with a shot called Pile-up and Clear. Open a mail app window (y 46 to 0, scale 0.965 to 1, 0.9s with expo.out) with a slow scale drift 1 to 1.035. From 0.9s, 22 new emails land at the top of the Inbox one at a time, the interval shrinking from 0.62s to 0.05s (the last at 5.32s); each row slides the list down 52px with expo.out and fades in, the Inbox badge counts from 5 to 26 with a 1.15 to 1 scale pulse on every arrival, and urgent rows flash red for 0.9s. From 2.75s to 5.1s, 8 desktop notifications stack over the window edge, each entering over 0.22s with expo.out. Fade up a command-A key HUD at 5.45s and select all rows on one frame at 5.85s. At 6.45s press E: on that single frame hide the list, notifications, selection bar and badge, show a dusk-landscape Inbox Zero panel with a green check, and raise a toast. Hold about 1.95s, then fade the scene out over 0.5s at 8.4s and land your wordmark with a one-line tagline.

People describe it as

  • The to-dos pile up, then drop to zero at once
  • The schedule fills up cell by cell
  • Tags surround the person, then all disappear

Often confused with

  • Wireframe Re-layoutWireframe Re-layout is a continuous interpolated re-layout with a constant number of elements; Pile-up and Clear grows and then clears the element count with hard cuts.
  • Showcase WallShowcase Wall is full from the start and moves as a whole; in Pile-up and Clear elements appear one by one and end in a single clear.
Recipe file (.md)

More Features