Bounce

Full motion specification

How the movement works

Use it whenever something drops and lands: an icon, a word or a product that should feel heavy and springy.

1. 01One drop per 2.35 s (twice per 4.7 s: yellow first, then coral). The ball has radius 26.
2. 02From 0.1 s it falls from 190 px above the floor. Gravity 1900 px/s²; each bounce keeps 56% of the speed (restitution 0.56); it stops when the rebound speed is below 35 px/s.
3. 03Sideways it moves x = 150→390 over 0.1–1.8 s with cubic ease-out.
4. 04Squash for 0.045 s either side of each impact: width 1 + sq, height 1 − sq, with sq up to 0.4 × min(1, impact speed ÷ 850). Impacts faster than 200 px/s flick short white lines left and right for 0.3 s.
5. 05The shadow gets smaller with height. Exit: 1.95–2.25 s, scale multiplied by (1 − backIn, s = 2).