feat: add opt-in lightweight SVG motion

[tannerlinsley]

What changed

Adds motionLite() from @tanstack/charts/motion/lite for a whole-chart fade entrance and basic keyed SVG updates. Existing motion() imports, behavior, and tooltip motion inheritance are unchanged.

This is a smaller opt-in contract for #205, reported by @toomingos. It does not include springs, definition-local timing, rolling paths, specialized bar/arc entrances, or interpolated interaction points. The reference explains those limits and when to keep full motion.

The new entry adopts server SVG without replaying entrance, respects reduced motion, commits resize immediately by default, continues its entrance across data updates, and cancels animation on destruction. It uses the existing SVG renderer and reconciler without adding runtime dependencies.

Evidence

• All 114 existing consumer bundles are byte-identical to main.

• All 60 comparison size records are unchanged. Only the source fingerprint/revision refresh is approved.

• Standalone export: 25.713 kB minified, 9.541 kB gzip, 8.720 kB Brotli. Full motion: 69.396 / 23.192 / 20.534 kB.

• Same bar-chart consumer: 120.186 / 43.752 / 38.641 kB, compared with full motion at 168.856 / 59.250 / 51.411 kB. Different feature contracts, not functional parity.

• Chromium, Firefox, and WebKit cover interruption, entrance continuity, hydration, resize, reduced motion, line/pie endpoints, authored opacity, and cleanup.

• Packed consumer checks exclude full motion, springs, tooltip implementation, and D3 from the lightweight export.

• Required pnpm validate passes all 19 tasks, including 2,249 unit tests, adapter/type/packed/documentation checks and both bundle gates. Maintained pnpm build passes.

• All 188 normally regenerated catalog SVGs are unchanged; only the source manifest hash changed.

• React Strict Mode passes interrupted updates and unmount cleanup in all three browsers.

• Seven paired Chromium trials of 20 synchronous updates of 1,000 points: median 83.2 ms with existing SVG tweening, 80.5 ms with the lightweight renderer. This measures update work, not frame rate or full motion parity.

Includes a minor Changeset. The fixed package group plans 1.2.0 for the 12 public packages. No CI jobs, runtime dependencies, existing bundle ceilings, or default interaction policies change.

Summary by CodeRabbit

• New Features

  • Added the opt-in motionLite renderer for whole-chart fade entrances and basic transitions between keyed SVG updates. It supports configurable duration and easing, respects reduced-motion preferences, and skips animations in specified resize scenarios.
  • Published a dedicated import path for lightweight motion, separate from the full motion renderer.

• Documentation

  • Added guidance on lightweight motion options, behavior, and differences from the full motion renderer.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7b6322c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@tanstack/charts	Minor
@tanstack/alpine-charts	Minor
@tanstack/angular-charts	Minor
@tanstack/lit-charts	Minor
@tanstack/octane-charts	Minor
@tanstack/preact-charts	Minor
@tanstack/react-charts	Minor
@tanstack/react-native-charts	Minor
@tanstack/solid-charts	Minor
@tanstack/svelte-charts	Minor
@tanstack/vue-charts	Minor
@tanstack/charts-scales	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 7b6322c

Command	Status	Duration	Result
nx run charts-workspace:ci-distributed	✅ Succeeded	2m 34s	View ↗
nx run charts-workspace:package-check	✅ Succeeded	<1s	View ↗
nx run charts-workspace:benchmark-check	✅ Succeeded	<1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-10-14 19:29:32 UTC

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: ff0406df-fe42-47a4-824d-c4c8a872fb0b

📥 Commits

Reviewing files that changed from the base of the PR and between 6a16f87 and 7b6322c.

📒 Files selected for processing: 14

• .changeset/lightweight-svg-motion.md
• API-FRICTION.md
• benchmarks/comparison/bundle-baseline.json
• benchmarks/conformance/previews/manifest.json
• docs/comparison.md
• docs/reference/index.md
• docs/reference/motion.md
• packages/charts-core/docs/comparison.md
• packages/charts-core/docs/reference/index.md
• packages/charts-core/docs/reference/motion.md
• packages/charts-core/package.json
• packages/charts-core/src/motion-lite.test.ts
• packages/charts-core/src/motion-lite.ts
• scripts/check-packed-consumers.mjs

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

📝 Walkthrough

This pull request adds the opt-in motionLite() SVG renderer, exposes it through a package subpath, and adds tests and documentation for its behavior and limits. It also updates workspace revision and source-hash records.

Changes: Lightweight SVG Motion

Layer / File(s)	Summary
Renderer and package export packages/charts-core/src/motion-lite.ts, packages/charts-core/package.json	Adds motionLite() and ChartMotionLiteOptions. The renderer wraps SVG rendering, supports entrance fades and keyed updates, and applies the documented duration, easing, reduced-motion, and resize behavior. The package exports the /motion/lite subpath for source and published builds.
Renderer validation packages/charts-core/src/motion-lite.test.ts, scripts/check-packed-consumers.mjs	Adds tests for animation, SVG adoption, resizing, reduced motion, duration validation, and cleanup. Packed-consumer checks cover the runtime export, TypeScript options, and bundle boundaries.
Documentation and release records .changeset/*, API-FRICTION.md, docs/reference/*, packages/charts-core/docs/reference/*, docs/comparison.md, packages/charts-core/docs/comparison.md, benchmarks/comparison/*, benchmarks/conformance/previews/*	Documents the new renderer and how it differs from motion(). Adds a minor changeset and updates workspace revision and source-hash records.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant ChartHost
  participant motionLite
  participant SVGRenderer
  participant WebAnimations
  ChartHost->>motionLite: Render scene and options
  motionLite->>SVGRenderer: Render or update keyed SVG
  SVGRenderer-->>motionLite: Return SVG surface
  motionLite->>WebAnimations: Animate entrance or keyed updates

Loading

Suggested reviewers: greglum

Merge Risk: ⚪ Minimal · up to 7b632

The opt-in renderer has no identified issue that needs resolution before merge; normal checks remain appropriate.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 3 files. (11 skipped: …	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: adding opt-in lightweight SVG motion through the new renderer.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 3 files. (11 skipped: 11 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches: 💡 1

📝 Generate docstrings: 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}