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
- Use the most performant option. A CSS transition on theme tokens is the default. Reach for Motion only for springs, layout animation, and interactions CSS can't express.
- Dense, repeated targets get no animation. Table rows, list items, and menu options the cursor sweeps across change state instantly. A deliberate control, such as a button, keeps its hover transition however often it's used.
- Entries decelerate; exits get out of the way. Enter with an
easeOutcurve; exits are shorter and simpler than entries. - Elements never come from nowhere. Enter from
scale(0.9–0.95), not zero, withtransform-origintoward 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). Buttons that open a menu or popover skip the press scale, because the popup anchors to them. - Toggleable elements animate interruptibly. Rapid open/close must retarget smoothly mid-animation; spring bounce defaults to zero.
Easing
TheeaseOut 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.
ease-in-out is preferred when moving anything on the screen to a new position.Used by: The tab nav indicator sliding between tabs, and prompt input pills.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 and exit animation, reuse the exported variants instead of tuning new values.
Variants
Each variant is { initial, variants: { enter, exit } }. Spread it onto a Motion component inside AnimatePresence and set animate="enter" and exit="exit". fullScreenModalVariants, fadeUpVariants, and fadeDownVariants also carry animate and exit, so the spread alone is enough.
dropdownVariantsnormal easeOutCubicExit: faster easeOutQuadpopoverVariantsslow easeOutQuartExit: fast easeOutQuadfadeUpVariantsnormal easeOutCubicExit: fast easeOutQuadfadeDownVariantsnormal easeOutCubicExit: fast easeOutQuadReduced 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.