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

The easeOut curves are ordered from most subtle (quad) to most dramatic (expo). 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. linear is for properties with no spatial motion to read — opacity and color.

#Duration

#Motion components

Hightouch UI builds animation on the motion package and exports Chakra-wrapped primitives: MotionBox, MotionButton, MotionText, MotionSpan, and the SVG set MotionSvg, MotionPath, MotionCircle, MotionRect, MotionLine. Each accepts Chakra style props and Motion props (initial, animate, exit, layout, transition) on one element, and the transition prop reaches Motion instead of Chakra's CSS style system. Use these instead of wrapping motion.div or chakra(motion.div) by hand.

Motion's transition prop can't consume CSS token strings, so use the exported motionEasings and motionDurations, which mirror the easing and duration tokens above as bezier tuples and seconds. For standard enter/exit animation, reuse the exported tooltipVariants, dropdownVariants, popoverVariants, and fullScreenModalVariants instead of tuning new values.

#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.