Motion

How charts enter

• Lines and areas draw left to right, then the labels and callout fade in.
• Bars grow from the baseline, staggered in data order.
• Rings, donuts and radars sweep in one after another.
• Points, tiles and heatmap cells appear by position, so the pattern builds.
• The headline number rolls in digit by digit.

Hover and focus bring in the crosshair, the highlight and the tooltip with short transitions (a donut segment lifts, a focused bar widens); they never replay the entry.

Turning it down

motion="subtle" shortens every duration, and "off" removes it. A reduced-motion setting in the operating system always wins: the chart appears settled at once, and nothing depends on the motion to be read. motionOptions.trigger="in-view" waits until the chart scrolls into view.

Motion by theme

Every theme uses the same order of events, in its own manner. Instrument eases on one curve: a quick start and a soft settle. Riso prints in four hard steps, like passes through a press, and its inks slide slightly out of register. Clay springs: marks overshoot a little and settle.

Sound

Sound is off by default, and it takes two switches. A chart plays soft cues on hover, scrub and select only when it has sound and the visitor has turned sound on for the page. That preference is saved in their browser.

"use client";

import { useSoundPreference } from "@/components/beautiful-charts/core/sound";

// Sound plays only when the page preference is on AND the chart has sound={true}.
export function SoundToggle() {
  const [on, setOn] = useSoundPreference();
  return <button type="button" onClick={() => setOn(!on)} aria-pressed={on}>Chart sounds</button>;
}