Easing Curve & Motion Studio
Shape cubic-bezier easing curves with a draggable editor, preview motion live, and export CSS variables, keyframes, and motion tokens.
Free Tool Design System
Tools OverviewEasing Curve & Motion Studio
Shape cubic-bezier easing curves with a draggable editor, preview branded motion live, and export CSS variables, keyframes, and motion tokens.
Catalog Context Part of Design System
See how this tool connects to category hubs, workflow paths, starter kits, and adjacent next steps.
Starter Kits Including This Tool
Next Move - Strong resultDesign System
Recommended: Design Token Starter Generator
Motion tokens are ready. Capture them alongside color and type tokens.
Motion Controls
Pick a personality preset or drag the curve dots to shape your own easing.
Drag the dots on the curve
Pull the two control points to shape the easing. Y can overshoot for spring effects.
Curve Editor & Preview
Drag the dots, watch the preview run your easing.
Drag the dots to shape the easing curve.
Live Preview
CSS Variables
:root {
--ease-brand: cubic-bezier(0.4, 0, 0.2, 1);
--dur-brand: 320ms;
}Full Export
Copy keyframes or motion-token JSON for your design system.
Keyframes
@keyframes brand-motion {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
.brand-motion {
animation: brand-motion var(--dur-brand) var(--ease-brand) infinite;
}Motion Tokens
{
"ease": {
"p1": {
"x": 0.4,
"y": 0
},
"p2": {
"x": 0.2,
"y": 1
}
},
"cubicBezier": "cubic-bezier(0.4, 0, 0.2, 1)",
"duration": 320
}