Pop-in

Full motion specification

How the movement works

Use it to bring in a small element such as an icon, button or badge with a light accent.

1. 01One pop per 2.35 s (twice per 4.7 s cycle: a star on coral first, then a heart on blue).
2. 02Icon: 116 px rounded square (radius 30). From 0.28 s, scale 0→1 with a spring: 1 − e^(−6.5t)·cos(15t), peaking at about 1.26.
3. 03At the same time, rotation −0.35 rad (about −20°) → 0 with a spring: 1 − e^(−6t)·cos(11t).
4. 04Badge: yellow circle, radius 25, with "1", at the icon's top-right (+52, −52). Starts at 0.62 s with spring 1 − e^(−7t)·cos(17t).
5. 05Exit: 1.86–2.12 s. Scale is multiplied by (1 − backIn, s = 2.2), so it swells slightly and then shrinks to 0.
6. 06Floor shadow: 62 × 8 ellipse that scales with the icon (clamped to 0–1).