Motion | kamod chartsSkip to content
GitHub

Foundations

Motion

Optional data animations for Kamod Charts, powered by the packed @kamod-ch/motion API.

Foundations / Motion

Overview

The static @kamod-ch/charts entries stay SSR-safe and do not load a motion runtime. Import @kamod-ch/charts/motion when a chart should animate data changes.

pnpm add @kamod-ch/charts @kamod-ch/motion motion

import { LineChart } from "@kamod-ch/charts/motion";

animate defaults to on for that entry. Disable it with animate={false} or wrap several charts in MotionConfig.

Static versus animated

Static versus animated line

The static entry never loads Motion. The motion entry reveals the path once, then morphs on updates.

Optional peerSSR final geometry
Static lineJanFebMarAprMayJun30k35k40k45k
Animated lineJanFebMarAprMayJun30k35k40k45k

Area and bar

Area uses a first-enter path reveal. Bars grow from the value baseline, including negatives.

Animated areaJanFebMarAprMayJunJulAugSepOctNovDec010k20k30k40k50k60k
Animated barsJanFebMarAprMayJun010k20k30k40k

Pie and scatter

Pie slices keep label keys while angles and radii change. Scatter tweens position, radius, and opacity.

Animated donut
Animated scatterJanFebMarAprMayJun1.2k1.3k1.4k1.5k1.6k1.7k

Reduced motion

always jumps to the final frame. user follows the operating-system preference.

Reduced motion lineJanFebMarAprMayJun30k35k40k45k

Reduced motion

reducedMotion accepts user, always, or never.

  • user follows prefers-reduced-motion after hydration.
  • always keeps the final geometry and skips clocks.
  • never animates even when the user prefers reduce.

SSR and the first client render always use the final path, bars, slices, and points. Animation starts after hydration, so markup does not drift.

Performance

  • Line markers stay suppressed above 500 points (showPoints: "auto").
  • One Value clock runs per series for path and bar updates. Scatter, bar, and pie marks reuse that clock instead of opening one WAAPI timeline per point when many items change together.
  • For streaming or very large datasets, set animate={false} or downsample first with @kamod-ch/charts/performance.

Bundle impact

@kamod-ch/charts/line and the root entry do not import @kamod-ch/motion. @kamod-ch/charts/motion is an optional subpath. @kamod-ch/motion and motion are optional peers.

Measured from pnpm size:report:

  • @kamod-ch/charts/line — 406 bytes, no Motion imports
  • @kamod-ch/charts/motion — 34 401 bytes, peers stay external
  • Package JS/CSS total — 158 123 bytes, including the optional motion entry

See docs/bundle-size.md for the full file list.

Accessibility

  • Tooltip placement and live-region announcements use committed values, not tween frames.
  • Axes, grid, and legend do not animate.
  • Pass reducedMotion: "always" in tests or print styles when motion must stay off.