Motion
Set the pace and character of feedback once. Components use the shared duration and curve to make presses, openings, and other changes feel related.
Map your decisions
| Recipe key | CSS property | What changes |
|---|---|---|
response-time | --ui-motion-fast | The shared feedback duration. Other durations derive from it; the base transition duration is 1.5 times this value. |
response-curve | --ui-motion-ease | How movement accelerates and settles. |
{
"schemaVersion": 1,
"values": {
"response-time": "150ms",
"response-curve": "cubic-bezier(0.2,0,0.2,1)"
}
}The CSS keeps the duration and curve as separate properties:
:root {
--ui-motion-fast: 150ms;
--ui-motion-ease: cubic-bezier(0.2,0,0.2,1);
}Compare the movement
Open Motion in Customize. Replay the study, then open the real popover beside it. The study uses the shared curve and travels at three times the feedback duration, giving you time to see its acceleration.
Curve handles support dragging and arrow keys, with numeric coordinates for precision. Escape or pointer cancellation restores the gesture start. Time values retain ms or s; number controls also accept arithmetic such as 150ms * 2.
Respect reduced motion
The exported theme includes reduced-motion rules that set shared durations to zero and neutralize the press scale. The customizer's study also respects the user's preference. When you author a component, use the shared motion roles and honor reduced motion in any additional behavior.