📈 Cubic-Bezier / Easing Curve Generator
Drag the two control-point handles to shape the curve, then hit Replay to see how the timing actually feels. Endpoints are fixed at (0,0) and (1,1) — exactly how CSS cubic-bezier() works.
1. Curve editor
Drag the blue (P1) and orange (P2) handles. Horizontal position is clamped to 0–1 per the CSS spec; vertical position can go past 0–1 for overshoot/bounce effects.
cubic-bezier(0.25, 0.1, 0.25, 1)
2. Presets & motion preview
1.2s