--ease-outSettling: headlines, frames landingcubic-bezier(0.22, 1, 0.36, 1)--ease-actActions: buttons, togglescubic-bezier(0.2, 0.8, 0.2, 1)--ease-snapBrackets snapping onto a targetcubic-bezier(0.5, 0, 0.1, 1)linearScanlines move at constant speedcubic-bezier(0, 0, 1, 1)With reduced motion or the Still setting, the ball jumps to the end: the curve still tells you everything.
How How it is made
The wireframe of it.
- Each curve is sampled from its cubic Bezier and drawn as an SVG path.
- The same tokens drive every animation on the site through CSS custom properties.
Performance
Transforms only; one animation at a time.
Without WebGL, or with motion set to Still
Curves stay drawn; nothing needs to move to be read.