Motion

Motion here explains a change: a value arriving, a panel opening, a number settling. It never loops for decoration, and it is finished before you would wait for it.

Three levels

Story charts and the components that tell a story when they appear take a motion prop:

• "full" (the default): the designed entrance, with staggers and a springy settle.
• "subtle": shorter (about 30%), on a calm curve without overshoot; staggers tighten. Good for dense dashboards.
• "off": the final frame at once. Colours still change on interaction.

<OrbitCard motion="subtle" />
<TrendCard motion="off" /> {/* screenshots, tests, print */}

Items with a motion prop: Nav, App Sidebar, Footer, Stat Cards, Button, Metric Header, Safe Action, Hold Button, Async Button, Split Button, Clipboard Button, Line Chart, Area Chart, Bar Chart, Composed Chart, Heatmap, Day Rings, Flow Funnel, Orbit, Trend, Command Palette, Date Range, Landing Hero, FAQ. Each item's page says exactly what changes at each level.

Reduced motion is automatic

Every component reads the visitor's prefers-reduced-motion setting with no code from you: bounces, sheens and staggers stop, and only short fades remain so a change is still visible. A motion prop can make things calmer than the visitor asked for, never livelier.

One setting for your whole app

To offer your own "reduce motion" switch, keep the choice in your app and pass it down. The components stay plain props with no provider to mount.

"use client";
import * as React from "react";

type Motion = "full" | "subtle" | "off";
const MotionContext = React.createContext<Motion>("full");

export const MotionSetting = MotionContext.Provider;
export const useMotion = () => React.useContext(MotionContext);

// Then: <TrendCard motion={useMotion()} />

Sound

Sound is separate and off unless you mount the provider. See Installation.