Motion
Shared timing and spring curves keep transitions consistent between components.
Installation
One prompt for your coding agent to set up Reflow and use this system in Remix.
Three speeds
Small changes should feel quick. Use fast for hover and fades, moderate for dropdowns and tabs, and slow for larger transitions such as dialogs and drawers. The moderate spring settles without overshooting, so it works well for panels that need to land precisely.
0.08s · bounce 0hover, fades0.16s · bounce 0dropdowns, tabs0.24s · bounce 0.12dialogs, drawersClick a track or replay to run all three springs.
Slow in, faster out
Both panels open with the slow spring. Compare a panel that closes with the same spring against one that uses a shorter exit.
Toggle one, then the other. Both open on motion.slow.
All tokens
Click a track to see it enter on the spring and return on the exit curve.
motion.fast 0.08s · bounce 0← motionExit.fast 60ms · ease-outhover, fadesmotion.moderate 0.16s · bounce 0← motionExit.moderate 120ms · ease-outdropdowns, tabsmotion.slow 0.24s · bounce 0.12← motionExit.slow 160ms · ease-outdialogs, drawersReduced motion
Reflow reduces travel and decorative loops according to the operating system preference. Controls retain their state and focus feedback.