Design system

Motion with a purpose.

Use motion to confirm an action, explain a change, or connect a control to its content. Keep it short, predictable, and optional.

Try the examples

Press the button, expand the disclosure, and open the popover. These documentation demos use CSS Modules and shared CSS variables, without an animation library.

import { MotionButton } from './app/docs/animation/AnimationExamples';

export function ButtonFeedback() {
  return <MotionButton />;
}

import { MotionAccordion } from './app/docs/animation/AnimationExamples';

export function AccordionExpansion() {
  return <MotionAccordion />;
}

import { MotionPopover } from './app/docs/animation/AnimationExamples';

export function PopoverEntrance() {
  return <MotionPopover />;
}

One vocabulary for timing

The demos share three tokens: --motion-fast (120ms) for press feedback, --motion-standard (200ms) for disclosure and entrance transitions, and --motion-ease (ease-out). Change these in the shared demo stylesheet rather than setting durations on individual elements.

In your UI Kit, open Theme settings → Motion to save timing, easing, and a reduced-motion preference. The connected Switch and Accordion review transitions inherit those settings. This public documentation page uses the default timings rather than a private project theme.

Prefer explicit transition properties to transition: all. Use opacity and transforms for entrances; the disclosure uses a grid-row transition to accommodate its content height.

.motionScope {
  --motion-fast: 120ms;
  --motion-standard: 200ms;
  --motion-ease: ease-out;
}

.button {
  transition: transform var(--motion-fast) var(--motion-ease);
}

.button:active { transform: scale(.97); }

.motionScope[data-reduce-motion='true'] {
  --motion-fast: 0ms;
  --motion-standard: 0ms;
}
.motionScope[data-reduce-motion='true'] .button:active {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .motionScope { --motion-fast: 0ms; --motion-standard: 0ms; }
  .button:active { transform: none; }
}

Respect reduced motion

Every demo honors the operating system’s reduced-motion preference. The local toggle lets you also disable motion for this page; it never overrides an operating-system request to reduce motion. Content and controls remain usable with transitions disabled.

Keep keyboard focus visible. A closing disclosure must remove its contents from keyboard navigation. Popovers should close with Escape and return focus to their trigger.

Check the generated result

React exports map project motion settings to MUI transition durations and easing through UiKitProvider. Every framework package includes a motion.css token stylesheet for custom transitions. Other exporters retain component-specific behavior; the token file alone does not replace their animations. Explicit component interaction timings remain separate. Test transitions, focus, and reduced motion in the exported application.

Read the export guides or explore themes and Design DNA.