Motion.

A spring system, with room for quiet feedback

Motion works well here: it handles retargeting, presence and sequencing, while ordinary hover/focus feedback stays in CSS. The animation library lives behind an optional public entry point; importing a Button or the tokens does not load Motion.

Our middle ground keeps the existing 120ms feedback and 200ms entrance timing. Standard spatial springs settle without overshoot. Expressive spatial springs add a small, deliberate bounce; effects remain critically damped in both schemes. These are Dixy values, not a reproduction of native platform constants.

Try it, then interrupt it

The preview follows your OS setting even when the reduced-motion preview is unchecked. Change targets rapidly to feel spring continuity. Switching to reduced motion snaps an active visual to its current target; controls remain usable. Reset restores the controls and clears example state.

import "@dixy-ui/react/styles.css";
import { Theme } from "@dixy-ui/react";
import { useState } from "react";
import {
  Button,
  Inline,
  Stack,
  Text,
  Theme as MotionScope,
  useMotionPreferences,
} from "@dixy-ui/react";
import { MotionProvider } from "@dixy-ui/react/motion";
import { AnimatePresence, domAnimation, LazyMotion } from "motion/react";
import * as m from "motion/react-m";
import {

import "@dixy-ui/react/styles.css";
import { Theme } from "@dixy-ui/react";
import { useState } from "react";
import {
  Button,
  Dialog,
  Drawer,
  Field,
  Inline,
  Menu,
  Stack,
  Tabs,
  Text,
  TextField,
  Theme as ComponentScope,

import "@dixy-ui/react/styles.css";
import { Theme } from "@dixy-ui/react";
import { useState } from "react";
import { Text, Theme as GroupScope, Toggle, ToggleGroup } from "@dixy-ui/react";

interface ExpressiveGroupExampleProps {
  enabled?: boolean;
  reduceMotion?: boolean;
  rtl?: boolean;
}
/** Docs-only bounded layout experiment. Selection is persistent; press expansion is momentary. */
function ExpressiveGroupExample({
  enabled = false,
  reduceMotion = false,
  rtl = false,

What the physics mean

Stiffness pulls toward the target; mass resists acceleration; damping removes energy. A damping ratio of 1 settles without bounce. A ratio below 1 permits overshoot. Motion expects a damping coefficient, so convert the ratio using c = 2ζ√(km). Passing Material’s ratio directly as Motion’s damping would create a very different animation.

{
  "type": "spring",
  "stiffness": 500,
  "damping": 44.721359549995796,
  "mass": 1,
  "restSpeed": 0.1,
  "restDelta": 0.01
}

A physical spring has a settling time rather than a fixed duration. We keep velocity under Motion’s control and do not mix stiffness/damping/mass with duration/bounce. Effects never overshoot opacity or color. The standard and expressive schemes share stiffness, isolating their difference to spatial damping.

Durations, easing and transition recipes

Duration guidelines

Keep ordinary UI animations under 300ms. Start at the lower end for frequent or small changes. Occasional page transitions are the explicit 300–400ms exception; never delay navigation or block input while waiting for them. These ranges are Dixy design guidance, not platform mandates.

Shorter exits can sit below the entrance range: Dialog exits use 120ms. Physical springs do not promise a fixed duration; inspect how quickly the content becomes usable and how long any residual movement lasts. Use a timing recipe when an exact deadline matters. Reduced motion takes priority over every range and becomes immediate.

The frequency principle

Estimate how often a person will encounter the animation before choosing its expression.

• 100+ times a day: use no animation or drastically reduce it. Prefer immediate state changes; keep only brief feedback that helps the person act.
• Occasional use: use standard motion with the smallest timing or spatial change that explains the result.
• Rare or first-time use: a restrained expressive moment may add delight, with a clear purpose and a reduced-motion equivalent.

The 100+ threshold is a design-review prompt, not a measured universal limit or a request to track people. Repetition is a reason to remove flourish. Never make completion depend on seeing an animation.

CSS durations use milliseconds; the Motion helpers convert them to seconds. Both read the same definitions. Recipes contain timing only, so each component explicitly lists the properties it animates. Avoid transition: all.

@import "@dixy-ui/tokens/motion.css";

.control {
  transition: background-color var(--dixy-motion-transition-feedback);
}
.panel {
  transition: opacity var(--dixy-motion-transition-enter),
    transform var(--dixy-motion-transition-enter);
}

Presence belongs to the primitive

Dialog keeps its existing Base UI lifecycle and starting/ending attributes. Motion powers the custom recipes above; it does not compete with the primitive’s mount/unmount handling. The spinner stays static when motion is reduced, while its accessible loading state remains. The loading preview starts only on request and stops automatically after four seconds.

One reduction policy for CSS and JavaScript

Theme motion="system" respects the OS preference. motion="reduced" requests additional reduction and is inherited through nested themes and portals. A child cannot turn motion back on. The hook subscribes to live preference changes and renders static on the server until the client preference is known.

import { Theme, useMotionPreferences } from "@dixy-ui/react";
import { MotionProvider } from "@dixy-ui/react/motion";
import { springTransition } from "@dixy-ui/tokens";

// Install motion separately. Place the provider inside its Theme.
<Theme motion="system">
  <MotionProvider>{/* Motion components */}</MotionProvider>
</Theme>;

// Inside a component:
const { reducedMotion } = useMotionPreferences();
const transition = springTransition("standard", "spatial", "default", reducedMotion);

The optional provider sets MotionConfig’s reduction policy. Use the hook for opacity, color, sequencing delays, imperative animations and any loops too. Our recipes become immediate, sequence delays become zero, and no preview autoplays. There is no device or battery heuristic: reductions follow the person’s preference. Legacy --dixy-duration-fast, --dixy-duration-normal and --dixy-ease aliases remain available; prefer the explicit motion namespace for new work.

Reference decisions

Material’s Expressive fast spatial reference uses stiffness 800 and ratio 0.6; our expressive version uses the same stiffness with ratio 0.8 for less bounce. Material’s default spatial reference is 380/0.8; Dixy uses 500/0.8 for a firmer response. Effects use ratio 1. These deliberate web adjustments avoid pretending that one native platform’s numbers define every web context. Verified Material source values ↗