About This Tool
Documentation
What does this tool do?
An interactive easing curve workbench for creating custom CSS transition and animation timing curves. Drag control handles (P1, P2) to shape acceleration, bounce, and deceleration profiles, compare motion against standard CSS easings (ease-in, ease-out, ease-in-out), and copy CSS, Tailwind V4, or Bootstrap code.
When should you use it?
Use this tool to design signature physics-based UI transitions, create organic bounce effects for modals and dropdowns, or optimize smooth scrolling and parallax easing curves.
Key Capabilities & Features
Highlights
Interactive dual-handle SVG cubic bezier curve editor with responsive touch/pointer coordinate control
Comprehensive preset categories: Standard CSS, Ease-In, Ease-Out, and Spring & Bounce curves
Side-by-side transition speed tracks comparing custom curves against Linear and standard Easing
Multi-axis motion preview stages including ball rolling, racecar track, scale pulse, and opacity transitions
Clean CSS cubic-bezier(), Tailwind CSS V4 timing utilities, and Bootstrap transition export