Motion
Easing tokens for transitions and animations.
Easing
ease-rogo-out (hover the track)ease-rogo-in-out (hover the track)Overview
Two house curves cover almost everything. They ship from @rogo-technologies/ui/styles, so
every consumer gets the same motion without redeclaring it in a local config.
| CSS Variable | Tailwind Class | Curve | Usage |
|---|---|---|---|
--ease-rogo-out | ease-rogo-out | cubic-bezier(0.09, 0.45, 0.24, 1) | The default. Anything entering, expanding, or responding to a pointer: hovers, reveals, color transitions. |
--ease-rogo-in-out | ease-rogo-in-out | cubic-bezier(0.37, 0, 0.04, 1) | Symmetric moves between two resting positions, where both ends should feel weighted. |
ease-rogo-out leaves fast and settles slowly, so a transition reads as decelerating into
place rather than running at a constant speed. Reach for ease-rogo-in-out only when the
element is travelling between two states that are equally "at rest" (a slide or a swap),
since easing into the start of an interaction-triggered move makes it feel laggy.
tsx
<button className="hover:bg-secondary ease-rogo-out transition-colors duration-200">
Settings
</button>Usage Guidelines
Do
- Reach for
ease-rogo-outfirst; it is correct for the large majority of transitions - Pair the easing with an explicit
duration-*so timing is deliberate, not the 150ms default - Use the same curve for a transition and its reverse so an interrupted animation stays coherent
Don't
- Don't hand-write
ease-[cubic-bezier(...)], since the arbitrary value drifts from the token - Don't redefine these curves in an app's
tailwind.config.tsorglobals.css; they ship from the UI package - Don't use
ease-linearfor anything a user triggers, since it reads mechanical