Motion
The timing, easing and reduced-motion rules every Clinia surface shares.
Principles
Motion explains a change: where something came from, where it went, or what just responded. If an animation doesn't help someone follow the change, leave it out.
Timing and easing
| Motion | Duration | Easing |
|---|---|---|
| Hover, press, colour changes | 100 to 250ms | linear for colour and opacity, ease-out for movement |
| Menus, popovers, dialogs | 100 to 200ms | The shadcn style's own defaults |
Keep motion quick so it never slows down repeat work. A surface can allow longer motion where it's for display purposes. For display animation, see Marketing motion.
Reduced motion
When someone turns on reduced motion in their system settings, every animation and transition in Clinia components (CSS or JS) skips straight to its end state. No extra configuration or setting is required. Animations you write in JavaScript check the browser setting themselves before rendering in the correct format:
ts
window.matchMedia("(prefers-reduced-motion: reduce)").matchesDo
- Test each page with reduced motion turned on.
- Make sure content is complete and readable without the animation.
Don't
- Hide content until an animation reveals it.
- Animate from JavaScript (canvas, Rive, scroll libraries) without checking the setting: the global rule only reaches CSS.