Back to Motion Prompt examples
UI component names · #23
Badge
A small dot with a number showing a count. Each time a notification arrives, the blue dot on the bell in the header counts up 1, 2, 3; clicking the bell clears it.
Navigation & statusbadgenotification-badgecountercountdotunread
Full motion specification
How the movement works
Use it to call attention to a count, such as unread messages or items in a cart.
- 014.5 s cycle on a 542×191 card. A 54-tall header with a line-drawn bell at (482, 27) on the right.
- 02Badge: a blue circle of radius 12 at the bell's top right (+12, −12), 2.5 px white rim, white 14 px number.
- 03Notifications arrive at 0.7, 1.3 and 1.9 s: the count goes 1 → 2 → 3. The first scales in over 0.7–0.9 s with easeOutCubic.
- 04Each arrival pops the scale from 1.3 back to 1 over 0.3 s and sends out a ripple ring (radius 12 → 28, opacity 0.5 → 0) over 0.5 s.
- 05The cursor reaches the bell at 2.95 s and clicks at 3.0 s; the badge shrinks to 0 over 3.0–3.25 s with easeInOutCubic.
Prompt
Add a badge to the bell in the header to show the unread count: it pops for 0.3 s each time the count goes up and disappears when opened.