Interaction cadence

Motion is where a neutral component API starts to feel product-specific.

Hover timing, lift transforms, spring easing, and duration scaling give each engine a different sense of confidence. Motion should clarify interaction, not perform for its own sake.

Hover200ms cubic-bezier(0.16, 1, 0.3, 1)Applied to most micro-interactions.

TransformtranslateY(-1px)Lift or scale personality on hover.

Duration scale1xControls overall motion pacing.

Active motion profile

Same component, different choreography depending on engine.

Engine motion profiles

Three personalities

Transition presets

Micro-interactions

fast100ms ease

Useful for toggles, checks, and icon state changes.

normal200ms ease

The everyday hover and focus baseline.

slow300ms ease

Panel open states and deliberate layout shifts.

Use sparingly for narrative transitions and dramatic reveals.

Hover behavior

Hover is where engines advertise their personality. Try the cards below to feel lift, scale, and combined movement.

Hover

Lift

Hover

Scale

Hover

Combined

Entrance choreography

Useful presets for modules entering premium documentation and workspace UI.

fadeIn

slideUp

scaleIn

Motion usagePaste-ready example that shows the base contract first.

tsx

10 lines

Consumption

Runtime-aware snippet

Motion usageTSX

Quick copy

const tokens = useTokens();

<Box
  style={{
    transition: `all ${tokens.motion.hover}`,
    transform: isHovered ? tokens.motion.transform : 'none',
  }}
/>

transition: var(--ds-transition-normal);