Motion

Motion in Hightouch UI is purposeful and fast: it clarifies state changes and spatial relationships, never decorates. Durations and easing curves come from theme tokens so animation stays consistent across the product.

#Principles

• High-frequency interactions get no animation. Something used dozens of times a day needs speed, not delight.
• Entries decelerate; exits get out of the way. Enter with an easeOut curve; exits are shorter and simpler than entries.
• Elements never come from nowhere. Enter from scale(0.9–0.95), not zero, with transform-origin toward the trigger; exit direction mirrors entry direction.
• Feedback is felt, not seen. Hovers are 100–150ms with at most 1–2% scale; presses are scale(0.97).
• Toggleable elements animate interruptibly. Rapid open/close must retarget smoothly mid-animation; spring bounce defaults to zero.

#Easing

Curves are listed from most subtle to most dramatic. Use an easeOut curve for elements entering or leaving the screen, and an easeInOut curve when moving something already on screen to a new position.

• easeOutQuad — basic transitions: hover, background, color
• easeOutCubic — small popovers: selects, menus
• easeOutQuart — larger popovers: modals, dialogs
• easeOutQuint — page transitions, major UI changes
• easeOutExpo — attention-grabbing motion: notifications

#Duration

• fastest (60ms) — micro-feedback
• faster (100ms) — small state changes
• fast (150ms) — hover, basic transitions
• normal (200ms) — opening popovers and menus
• slow (300ms) — modals and dialogs
• slower (400ms) — larger surfaces
• dramatic (600ms) — deliberate, emphasis

#Reduced motion

Hightouch UI respects the operating system's "reduce motion" accessibility setting automatically — no configuration needed. When it's on, transform and layout animations (scale, slide, movement) are dropped while opacity and color transitions still play, following the WCAG principle of reducing motion rather than removing it entirely. This applies to every component, including overlays like dialogs, drawers, menus, and tooltips.

Custom animations built with motion inherit this behavior. If an animation drives a non-transform property that shouldn't jump under reduced motion (for example an animated width), branch on the useReducedMotion hook to provide an instant fallback.