Presets, read frame by frame
Each curve is drawn as an animator's spacing chart: one tick per frame at 60fps. Ticks bunch where the motion slows and spread where it travels fast.
Springs
Exported as linear()
01Snappy
588 msA critically damped spring. Fast, decisive, no wobble.
02Gentle
1762 msA slow, overdamped spring that eases in without any edge.
03Bouncy
825 msA lively spring with a visible overshoot and settle.
04Wobbly
1669 msHigh bounce. Several oscillations before rest.
05Press
319 msA short, tight spring for button and tap feedback.
06Sheet
830 msA heavier, slower spring for large surfaces like sheets and modals.
Bezier curves
Exported as cubic-bezier()
07Emphasized decelerate
400 msArrives fast and lands softly. Excellent for entering elements.
08Emphasized accelerate
200 msLeaves slowly then speeds away. For exiting elements.
09Standard
300 msA balanced ease-in-out for elements moving on screen.
10Expo out
700 msA dramatic, exponential deceleration.
11Back out
400 msA bezier that overshoots once, with no physics needed.
12Anticipate
500 msPulls back before moving forward.
13Linear
300 msConstant speed. Mechanical by design.
14CSS ease
300 msThe browser default, for reference.