morphicons 1.4.0 → 1.4.2

package/README.md

@@ -13,7 +13,14 @@
   <a href="https://www.morphicons.com"><strong>morphicons.com</strong></a> — live playground
 </p>
 
-Universal morphing for stroke-based icons (Lucide, Tabler, Heroicons, Iconoir, or your own paths): **any icon morphs into any other** with spring physics. Rotations are never declared by hand — they emerge from the math (2D Procrustes + polar interpolation). Zero runtime dependencies.
+<p align="center">
+  <a href="https://github.com/sponsors/guillermolg00">
+    <img src="https://img.shields.io/badge/%E2%98%95%20Buy%20me%20a%20coffee-EA4AAA" alt="Buy me a coffee — sponsor morphicons on GitHub Sponsors">
+  </a>
+</p>
+
+Universal morphing for stroke-based icons (Lucide, Tab
+ler, Heroicons, Iconoir, or your own paths): **any icon morphs into any other** with spring physics. Rotations are never declared by hand — they emerge from the math (2D Procrustes + polar interpolation). Zero runtime dependencies.
 
 ```tsx
 import { MorphIcon } from "morphicons/react";
@@ -58,7 +65,7 @@ ref.current?.morphTo(Check); // animates
 ref.current?.set(X);         // jumps without animating
 ```
 
-Drop-in replacement for lucide-react: `size`, `strokeWidth`, `absoluteStrokeWidth`, `color`, `className` and the rest of the `<svg>` props pass straight through. Correct accessibility by default: `aria-hidden` unless you pass `label` (→ `role="img"` + `<title>`). Clean SSR: the server emits the exact static SVG (zero flash, zero layout shift); the runtime is born on hydration. `prefers-reduced-motion` degrades to an instant swap.
+Drop-in replacement for lucide-react: `size`, `strokeWidth`, `absoluteStrokeWidth`, `color`, `className` and the rest of the `<svg>` props pass straight through. Correct accessibility by default: `aria-hidden` unless you pass `label` (→ `role="img"` + `<title>`). Clean SSR: the server emits the exact static SVG (zero flash, zero layout shift); the runtime is born on hydration. Morphs play regardless of the OS reduce-motion setting by default; opt into honoring it with `reducedMotion="user"` (see [Reduced motion](#reduced-motion-all-four-bindings)).
 
 ### Vue — same three modes
 
@@ -132,7 +139,7 @@ ref.current?.morphTo(Check); // animates
 ref.current?.set(X);         // jumps without animating
 ```
 
-The DOM-free core beyond the browser: the dom driver is reused verbatim as the engine (React Native has a global `requestAnimationFrame`, and `PathEl` is structural), so the whole platform difference is a shim that forwards the per-frame `d` write to `Path.setNativeProps` of react-native-svg — outside the React render, exactly like the web mutation. Same surface as the React binding (`size`, `strokeWidth`, `absoluteStrokeWidth`, `color`, plus the native `Svg` props: `testID`, touch handlers…), same accessibility defaults (`aria-hidden` unless you pass `label` → `role="img"` + `aria-label`). Reduced motion comes from `AccessibilityInfo` (best-effort: the query is async; a `reduceMotionChanged` subscription keeps it exact from then on). Requires Metro with package `exports` resolution — default since React Native 0.79; on older versions enable `unstable_enablePackageExports`.
+The DOM-free core beyond the browser: the dom driver is reused verbatim as the engine (React Native has a global `requestAnimationFrame`, and `PathEl` is structural), so the whole platform difference is a shim that forwards the per-frame `d` write to `Path.setNativeProps` of react-native-svg — outside the React render, exactly like the web mutation. Same surface as the React binding (`size`, `strokeWidth`, `absoluteStrokeWidth`, `color`, plus the native `Svg` props: `testID`, touch handlers…), same accessibility defaults (`aria-hidden` unless you pass `label` → `role="img"` + `aria-label`). With `reducedMotion="user"`, the OS setting comes from `AccessibilityInfo` (best-effort: the query is async; a `reduceMotionChanged` subscription keeps it exact from then on). Requires Metro with package `exports` resolution — default since React Native 0.79; on older versions enable `unstable_enablePackageExports`.
 
 ### Lifecycle contract (all four bindings)
 
@@ -142,6 +149,20 @@ The four components share one contract, pinned by mirrored client-mount tests:
 - **Controlled wins.** While `from` AND `to` are both present, the pair owns the path: `icon` changes are ignored, no spring fires. Drop the pair and the current `icon` takes over (animated). Mixing the modes is not an error — the precedence is just explicit.
 - **Clean re-entry.** Any exit from controlled mode (an imperative call or an icon takeover) invalidates the frozen pair, so returning to the same `from`/`to` re-bases on `from` and renders exactly like a clean mount at that `progress`.
 
+### Reduced motion (all four bindings)
+
+Icon morphs are small, short, communicative micro-transitions: the kind of motion the reduce-motion guidance considers generally acceptable, unlike parallax or full-screen movement. Auto-degrading them made the library look broken to every user with the OS setting on, so since 1.4.2 they play by default and the policy is an explicit prop (the same default Motion, formerly Framer Motion, ships):
+
+```tsx
+<MorphIcon icon={open ? X : Menu} reducedMotion="user" />
+```
+
+- `"never"` (default): morphs always animate; the OS setting is ignored.
+- `"user"`: while the OS reduce-motion setting is on, every `morphTo` degrades to an instant swap (the pre-1.4.2 behavior). The web bindings read `prefers-reduced-motion`; React Native reads `AccessibilityInfo`, and only touches the accessibility bridge when some instance opts in.
+- `"always"`: every `morphTo` jumps without animating (tests, screenshots).
+
+The prop is live: changing it governs the next morph. The vanilla driver takes the same policy as an option, `createMorph(el, icon, { reducedMotion: "user" })`, and exposes it as a mutable `morph.reducedMotion`. Apps that must strictly follow the user's system preference should pass `reducedMotion="user"` across the board.
+
 ### Vanilla (no React)
 
 ```ts
@@ -152,6 +173,7 @@ m.morphTo(X, "snappy");              // preset or { stiffness, damping }
 m.set(Check);                        // jump without animating (canonical d)
 m.seek(X, 0.4);                      // morph frozen at t — scrubbing, gestures
 m.progress = 0.4;                    // sugar: seek on the active target
+m.reducedMotion = "user";            // live policy: "never" (default) | "user" | "always"
 m.destroy();
 ```
 
@@ -312,7 +334,7 @@ c_k(t) = c_{A,k} + t·d_k + (σ*ᵗ·R(t·θ*) − I)·(c_{A,k} − g_A)
 
 ### 6. Serialization and canonical snap
 
-In flight, each subpath is emitted as `M x y L x y …` (+ `Z` if the pair is closed↔closed; closed→open flies open, the loop opening at the cut chosen by the circular correspondence) with 2 decimals — invisible at 24px, and the frame's only allocation. On settle, the driver **snaps to the canonical `d`** of the target icon: exact fidelity at rest (real curves, not polylines), subpath count reset after duplications, and the DOM ends up identical to a static icon's. The jump is < 0.02px — imperceptible.
+In flight, each subpath is emitted as `M x y L x y …` (+ `Z` if the pair is closed↔closed; closed→open flies open, the loop opening at the cut chosen by the circular correspondence) with 2 decimals — invisible at 24px, and the frame's only allocation. On settle, the driver **snaps to the canonical `d`** of the target icon: exact fidelity at rest (real curves, not polylines), subpath count reset after duplications, and the DOM ends up identical to a static icon's. The jump is < 0.02px — imperceptible. The canonical `d` itself is emitted with 4 decimals, and that is a correctness choice, not a size one: arc→cubic conversion goes through trig whose last ulp differs across JS engines, and SSR hydration compares the server's bytes against the browser's — quantized emission keeps them identical, where full precision leaked each engine's ulp into the markup (a Next hydration mismatch on icons with non-cardinal arcs).
 
 ### 7. The spring
 

package/dist/MorphIcon.svelte

@@ -25,6 +25,7 @@ let {
   to,
   progress,
   spring,
+  reducedMotion,
   size = 24,
   color = "currentColor",
   strokeWidth = 2,
@@ -40,17 +41,17 @@ const initialD = computeInitialD({ icon, from, to, progress });
 let pathEl: SVGPathElement | undefined = $state();
 // svelte-ignore state_referenced_locally — init-time values on purpose: they
 // seed the controller's watch baselines so the first $effect run is a no-op.
-const ctrl = createController({ icon, from, to, progress });
+const ctrl = createController({ icon, from, to, progress, reducedMotion });
 
 onMount(() => {
-  if (pathEl) ctrl.mount(pathEl, { icon, from, to, progress });
+  if (pathEl) ctrl.mount(pathEl, { icon, from, to, progress, reducedMotion });
   return () => ctrl.destroy();
 });
 
 // Prop changes: one watcher owns the mode logic (controlled wins — change
 // detection and precedence live in shared.ts).
 $effect(() => {
-  const next = { icon, from, to, progress, spring };
+  const next = { icon, from, to, progress, spring, reducedMotion };
   untrack(() => ctrl.watch(next));
 });
 

package/dist/dom.d.ts

@@ -10,6 +10,15 @@ interface MorphOptions {
   stiffness?: number;
   damping?: number;
 }
+/** Reduced-motion policy. `"never"` (default): morphs always animate,
+ *  ignoring the OS setting. `"user"`: while the OS reduce-motion setting is
+ *  on, `morphTo` degrades to an instant `set`. `"always"`: every `morphTo`
+ *  jumps (tests, screenshots). */
+type ReducedMotionMode = "never" | "user" | "always";
+interface CreateMorphOptions {
+  /** Reduced-motion policy; also live via the `reducedMotion` property. */
+  reducedMotion?: ReducedMotionMode;
+}
 interface Morph {
   /** Animates toward the icon with spring physics. Interruptible: mid-flight
    *  it re-plans from the intermediate shape while preserving velocity. */
@@ -23,14 +32,17 @@ interface Morph {
   /** Current progress (t of the last frame; 1 at rest). Assigning it is
    *  equivalent to seek(target, t) on the active target. */
   progress: number;
+  /** Reduced-motion policy, live: assigning it applies to the next morphTo. */
+  reducedMotion: ReducedMotionMode;
   /** Unregisters the instance; later calls are no-ops. */
   destroy(): void;
 }
 /** Canonical `d` of an icon: the input string verbatim, or the real cubics
- *  at full precision (the at-rest snap). Exported because it is what a
- *  binding renders at SSR/rest before any runtime exists. */
+ *  quantized to 4 decimals (the at-rest snap; engine-stable bytes so SSR
+ *  hydration matches, see fmtCanon in core/serialize). Exported because it
+ *  is what a binding renders at SSR/rest before any runtime exists. */
 declare function canonicalD(icon: IconInput): string;
 /** Creates the morph instance over a `<path>` and paints the initial icon. */
-declare function createMorph(el: PathEl, icon: IconInput): Morph;
+declare function createMorph(el: PathEl, icon: IconInput, options?: CreateMorphOptions): Morph;
 //#endregion
-export { Morph, MorphOptions, PathEl, canonicalD, createMorph };
+export { CreateMorphOptions, Morph, MorphOptions, PathEl, ReducedMotionMode, canonicalD, createMorph };

package/dist/dom.js

@@ -1,4 +1,4 @@
-import { a as buildPlan, c as cubicsToPathD, f as interpPolar, l as serialize, n as Spring, r as resampleIcon, s as iconToCubics, t as SPRING_PRESETS, u as allocOutputs } from "./spring-BTcHiHR5.js";
+import { a as buildPlan, c as cubicsToPathD, f as interpPolar, l as serialize, n as Spring, r as resampleIcon, s as iconToCubics, t as SPRING_PRESETS, u as allocOutputs } from "./spring-CBynweFS.js";
 //#region src/dom/index.ts
 const tickers = /* @__PURE__ */ new Set();
 let rafId = 0;
@@ -41,8 +41,9 @@ function sampledOf(icon) {
 	return s;
 }
 /** Canonical `d` of an icon: the input string verbatim, or the real cubics
-*  at full precision (the at-rest snap). Exported because it is what a
-*  binding renders at SSR/rest before any runtime exists. */
+*  quantized to 4 decimals (the at-rest snap; engine-stable bytes so SSR
+*  hydration matches, see fmtCanon in core/serialize). Exported because it
+*  is what a binding renders at SSR/rest before any runtime exists. */
 function canonicalD(icon) {
 	if (typeof icon === "string") return icon;
 	let d = canon.get(icon);
@@ -75,8 +76,9 @@ function resolveSpring(s) {
 	};
 }
 /** Creates the morph instance over a `<path>` and paints the initial icon. */
-function createMorph(el, icon) {
+function createMorph(el, icon, options) {
 	const spring = new Spring();
+	let reducedMotion = options?.reducedMotion ?? "never";
 	let target = icon;
 	let rest = true;
 	let plan = null;
@@ -141,6 +143,13 @@ function createMorph(el, icon) {
 		target = icon;
 		settle();
 	};
+	/** True when the policy says this morphTo must jump instead of flying. */
+	const motionOff = () => {
+		if (reducedMotion === "always") return true;
+		if (reducedMotion !== "user") return false;
+		if (typeof matchMedia === "undefined") return false;
+		return matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+	};
 	const seek = (icon, tt) => {
 		if (dead) return;
 		const reuse = !rest && plan !== null && icon === target;
@@ -153,11 +162,9 @@ function createMorph(el, icon) {
 		morphTo(icon, sp) {
 			if (dead) return;
 			if (icon === target && (rest || flying)) return;
-			if (typeof matchMedia !== "undefined") {
-				if (matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
-					setNow(icon);
-					return;
-				}
+			if (motionOff()) {
+				setNow(icon);
+				return;
 			}
 			const { k, c } = resolveSpring(sp);
 			spring.config(k, c);
@@ -179,6 +186,12 @@ function createMorph(el, icon) {
 		set progress(v) {
 			if (!dead) seek(target, v);
 		},
+		get reducedMotion() {
+			return reducedMotion;
+		},
+		set reducedMotion(v) {
+			reducedMotion = v;
+		},
 		destroy() {
 			stop();
 			dead = true;

package/dist/index.d.ts

@@ -72,7 +72,8 @@ declare function resampleIcon(input: IconInput, N?: number): Sampled[];
 /** Sampled subpaths → polyline `d` attribute. `closed[k]` appends Z to
  *  subpath k (closed loops in flight); without flags everything is open. */
 declare function serialize(subs: readonly Float64Array[], closed?: readonly boolean[]): string;
-/** Cubic subpaths → canonical `d` at full precision (round-trip). */
+/** Cubic subpaths → canonical `d`, quantized to 4 decimals (engine-stable
+ *  bytes; see fmtCanon). */
 declare function cubicsToPathD(paths: readonly CubicPath[]): string;
 //#endregion
 export { type CubicPath, type IconInput, type IconNode, type IconNodeAttrs, type MorphPlan, type PlanItem, SPRING_PRESETS, type Sampled, Spring, type SpringPreset, type ViewBox, allocOutputs, buildPlan, cubicsToPathD, fitIcon, iconToCubics, interpLinear, interpPolar, resampleIcon, resamplePath, serialize };

package/dist/index.js

@@ -1,2 +1,2 @@
-import { a as buildPlan, c as cubicsToPathD, d as interpLinear, f as interpPolar, i as resamplePath, l as serialize, n as Spring, o as fitIcon, r as resampleIcon, s as iconToCubics, t as SPRING_PRESETS, u as allocOutputs } from "./spring-BTcHiHR5.js";
+import { a as buildPlan, c as cubicsToPathD, d as interpLinear, f as interpPolar, i as resamplePath, l as serialize, n as Spring, o as fitIcon, r as resampleIcon, s as iconToCubics, t as SPRING_PRESETS, u as allocOutputs } from "./spring-CBynweFS.js";
 export { SPRING_PRESETS, Spring, allocOutputs, buildPlan, cubicsToPathD, fitIcon, iconToCubics, interpLinear, interpPolar, resampleIcon, resamplePath, serialize };

package/dist/react-native.d.ts

@@ -1,5 +1,5 @@
 import { a as Sampled, c as SpringPreset, n as IconInput, r as IconNode } from "./types-JAF3s76Y.js";
-import { Morph, MorphOptions, PathEl } from "./dom.js";
+import { Morph, MorphOptions, PathEl, ReducedMotionMode } from "./dom.js";
 import { SvgProps } from "react-native-svg";
 //#region src/react-native/index.d.ts
 /** Imperative surface exposed via ref. */
@@ -18,6 +18,11 @@ interface MorphIconProps extends Omit<SvgProps, "from" | "to"> {
   progress?: number;
   /** Physics for uncontrolled/imperative mode: preset or custom spring. */
   spring?: SpringPreset | MorphOptions;
+  /** Reduced-motion policy: "never" (default) animates regardless of the OS
+   *  setting, "user" honors AccessibilityInfo's reduce motion (morphs degrade
+   *  to an instant swap while it is on; best-effort, the query is async),
+   *  "always" always jumps. */
+  reducedMotion?: ReducedMotionMode;
   size?: number | string;
   color?: string;
   strokeWidth?: number | string;
@@ -28,4 +33,4 @@ interface MorphIconProps extends Omit<SvgProps, "from" | "to"> {
 }
 declare const MorphIcon: import("react").ForwardRefExoticComponent<MorphIconProps & import("react").RefAttributes<MorphHandle>>;
 //#endregion
-export { type IconInput, type IconNode, type Morph, MorphHandle, MorphIcon, MorphIconProps, type MorphOptions, type PathEl, type Sampled, type SpringPreset };
+export { type IconInput, type IconNode, type Morph, MorphHandle, MorphIcon, MorphIconProps, type MorphOptions, type PathEl, type ReducedMotionMode, type Sampled, type SpringPreset };

package/dist/react-native.js

@@ -1,4 +1,4 @@
-import { a as buildPlan, f as interpPolar, l as serialize, r as resampleIcon, u as allocOutputs } from "./spring-BTcHiHR5.js";
+import { a as buildPlan, f as interpPolar, l as serialize, r as resampleIcon, u as allocOutputs } from "./spring-CBynweFS.js";
 import { canonicalD, createMorph } from "./dom.js";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -31,7 +31,7 @@ function frozenD(from, to, t) {
 	return serialize(out, plan.items.map((it) => it.closed));
 }
 const MorphIcon = forwardRef(function MorphIcon(props, ref) {
-	const { icon, from, to, progress, spring, size = 24, color = "currentColor", strokeWidth = 2, absoluteStrokeWidth, label, ...rest } = props;
+	const { icon, from, to, progress, spring, reducedMotion, size = 24, color = "currentColor", strokeWidth = 2, absoluteStrokeWidth, label, ...rest } = props;
 	const controlled = from !== void 0 && to !== void 0;
 	const initialIcon = icon ?? from ?? to;
 	const [initialD] = useState(() => {
@@ -42,6 +42,8 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 	const morphRef = useRef(null);
 	const springRef = useRef(spring);
 	springRef.current = spring;
+	const rmRef = useRef(reducedMotion);
+	rmRef.current = reducedMotion;
 	const prevIcon = useRef(icon);
 	const prevControlled = useRef(controlled);
 	const dead = useRef(false);
@@ -52,9 +54,12 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 	const el = useRef({ setAttribute: (name, value) => {
 		if (name === "d") pathRef.current?.setNativeProps({ d: value });
 	} });
-	/** morphTo that honors the OS reduce-motion setting (best-effort). */
+	/** morphTo that applies the reduced-motion policy ("user" reads the OS
+	*  setting via AccessibilityInfo, best-effort). */
 	const fly = (m, i, s) => {
-		if (reduced) m.set(i);
+		const mode = rmRef.current ?? "never";
+		if (mode === "user") initReducedMotion();
+		if (mode === "always" || mode === "user" && reduced) m.set(i);
 		else m.morphTo(i, s);
 	};
 	const flyRef = useRef(fly);
@@ -71,7 +76,6 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 	}, []);
 	useIsoLayoutEffect(() => {
 		dead.current = false;
-		initReducedMotion();
 		if (pathRef.current && initialIcon !== void 0) {
 			const m = createMorph(el.current, controlled ? from : initialIcon);
 			morphRef.current = m;
@@ -94,6 +98,9 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 			pair.current = null;
 		};
 	}, []);
+	useEffect(() => {
+		if (reducedMotion === "user") initReducedMotion();
+	}, [reducedMotion]);
 	useEffect(() => {
 		const left = prevControlled.current && !controlled;
 		prevControlled.current = controlled;

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import { a as Sampled, c as SpringPreset, n as IconInput, r as IconNode } from "./types-JAF3s76Y.js";
-import { Morph, MorphOptions, PathEl } from "./dom.js";
+import { Morph, MorphOptions, PathEl, ReducedMotionMode } from "./dom.js";
 import { SVGProps } from "react";
 //#region src/react/index.d.ts
 /** Imperative surface exposed via ref. */
@@ -18,6 +18,10 @@ interface MorphIconProps extends Omit<SVGProps<SVGSVGElement>, "from" | "to" | "
   progress?: number;
   /** Physics for uncontrolled/imperative mode: preset or custom spring. */
   spring?: SpringPreset | MorphOptions;
+  /** Reduced-motion policy: "never" (default) animates regardless of the OS
+   *  setting, "user" honors prefers-reduced-motion (morphs degrade to an
+   *  instant swap while it is on), "always" always jumps. */
+  reducedMotion?: ReducedMotionMode;
   size?: number | string;
   color?: string;
   strokeWidth?: number | string;
@@ -28,4 +32,4 @@ interface MorphIconProps extends Omit<SVGProps<SVGSVGElement>, "from" | "to" | "
 }
 declare const MorphIcon: import("react").ForwardRefExoticComponent<MorphIconProps & import("react").RefAttributes<MorphHandle>>;
 //#endregion
-export { type IconInput, type IconNode, type Morph, MorphHandle, MorphIcon, MorphIconProps, type MorphOptions, type PathEl, type Sampled, type SpringPreset };
+export { type IconInput, type IconNode, type Morph, MorphHandle, MorphIcon, MorphIconProps, type MorphOptions, type PathEl, type ReducedMotionMode, type Sampled, type SpringPreset };

package/dist/react.js

@@ -1,4 +1,4 @@
-import { a as buildPlan, f as interpPolar, l as serialize, r as resampleIcon, u as allocOutputs } from "./spring-BTcHiHR5.js";
+import { a as buildPlan, f as interpPolar, l as serialize, r as resampleIcon, u as allocOutputs } from "./spring-CBynweFS.js";
 import { canonicalD, createMorph } from "./dom.js";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +15,7 @@ function frozenD(from, to, t) {
 	return serialize(out, plan.items.map((it) => it.closed));
 }
 const MorphIcon = forwardRef(function MorphIcon(props, ref) {
-	const { icon, from, to, progress, spring, size = 24, color = "currentColor", strokeWidth = 2, absoluteStrokeWidth, label, ...rest } = props;
+	const { icon, from, to, progress, spring, reducedMotion, size = 24, color = "currentColor", strokeWidth = 2, absoluteStrokeWidth, label, ...rest } = props;
 	const controlled = from !== void 0 && to !== void 0;
 	const initialIcon = icon ?? from ?? to;
 	const [initialD] = useState(() => {
@@ -26,6 +26,8 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 	const morphRef = useRef(null);
 	const springRef = useRef(spring);
 	springRef.current = spring;
+	const rmRef = useRef(reducedMotion);
+	rmRef.current = reducedMotion;
 	const prevIcon = useRef(icon);
 	const prevControlled = useRef(controlled);
 	const dead = useRef(false);
@@ -39,14 +41,14 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 		if (morphRef.current) return morphRef.current;
 		const el = pathRef.current;
 		if (dead.current || !el) return null;
-		morphRef.current = createMorph(el, birth);
+		morphRef.current = createMorph(el, birth, { reducedMotion: rmRef.current });
 		return morphRef.current;
 	}, []);
 	useIsoLayoutEffect(() => {
 		dead.current = false;
 		const el = pathRef.current;
 		if (el && initialIcon !== void 0) {
-			const m = createMorph(el, controlled ? from : initialIcon);
+			const m = createMorph(el, controlled ? from : initialIcon, { reducedMotion: rmRef.current });
 			morphRef.current = m;
 			if (controlled) {
 				pair.current = [from, to];
@@ -67,6 +69,10 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 			pair.current = null;
 		};
 	}, []);
+	useEffect(() => {
+		const m = morphRef.current;
+		if (m) m.reducedMotion = reducedMotion ?? "never";
+	}, [reducedMotion]);
 	useEffect(() => {
 		const left = prevControlled.current && !controlled;
 		prevControlled.current = controlled;

package/dist/{spring-BTcHiHR5.js → spring-CBynweFS.js}

@@ -305,12 +305,16 @@ function serialize(subs, closed) {
 	}
 	return d;
 }
-/** Cubic subpaths → canonical `d` at full precision (round-trip). */
+function fmtCanon(v) {
+	return String(Math.round(v * 1e4) / 1e4);
+}
+/** Cubic subpaths → canonical `d`, quantized to 4 decimals (engine-stable
+*  bytes; see fmtCanon). */
 function cubicsToPathD(paths) {
 	let d = "";
 	for (const { pts, closed } of paths) {
-		d += `M${pts[0]} ${pts[1]}`;
-		for (let i = 2; i < pts.length; i += 6) d += `C${pts[i]} ${pts[i + 1]} ${pts[i + 2]} ${pts[i + 3]} ${pts[i + 4]} ${pts[i + 5]}`;
+		d += `M${fmtCanon(pts[0])} ${fmtCanon(pts[1])}`;
+		for (let i = 2; i < pts.length; i += 6) d += `C${fmtCanon(pts[i])} ${fmtCanon(pts[i + 1])} ${fmtCanon(pts[i + 2])} ${fmtCanon(pts[i + 3])} ${fmtCanon(pts[i + 4])} ${fmtCanon(pts[i + 5])}`;
 		if (closed) d += "Z";
 	}
 	return d;

package/dist/svelte-shared.d.ts

@@ -1,5 +1,5 @@
 import { a as Sampled, c as SpringPreset, n as IconInput, r as IconNode } from "./types-JAF3s76Y.js";
-import { Morph, MorphOptions, PathEl } from "./dom.js";
+import { Morph, MorphOptions, PathEl, ReducedMotionMode } from "./dom.js";
 import { SVGAttributes } from "svelte/elements";
 //#region src/svelte/shared.d.ts
 /** Imperative surface exposed on the component instance (`bind:this`). */
@@ -22,6 +22,10 @@ interface MorphIconProps extends Omit<SVGAttributes<SVGSVGElement>, "from" | "to
   progress?: number;
   /** Physics for uncontrolled/imperative mode: preset or custom spring. */
   spring?: SpringPreset | MorphOptions;
+  /** Reduced-motion policy: "never" (default) animates regardless of the OS
+   *  setting, "user" honors prefers-reduced-motion (morphs degrade to an
+   *  instant swap while it is on), "always" always jumps. */
+  reducedMotion?: ReducedMotionMode;
   size?: number | string;
   color?: string;
   strokeWidth?: number | string;
@@ -31,7 +35,8 @@ interface MorphIconProps extends Omit<SVGAttributes<SVGSVGElement>, "from" | "to
   label?: string;
 }
 type ModeProps = Pick<MorphIconProps, "icon" | "from" | "to" | "progress">;
-type WatchProps = ModeProps & {
+type CtrlProps = ModeProps & Pick<MorphIconProps, "reducedMotion">;
+type WatchProps = CtrlProps & {
   spring?: SpringPreset | MorphOptions;
 };
 /** The initial d is constant for Svelte: computed once from the mount-time
@@ -54,15 +59,15 @@ declare function computeInitialD({ icon, from, to, progress }: ModeProps): strin
  *    path back to `icon`.
  *  - Every exit from controlled mode (imperative call or icon takeover)
  *    invalidates the frozen pair, so returning to it re-bases on `from`. */
-declare function createController({ icon, from, to, progress }: ModeProps): {
-  mount(mountEl: PathEl, { icon, from, to, progress }: ModeProps): void;
+declare function createController({ icon, from, to, progress, reducedMotion }: CtrlProps): {
+  mount(mountEl: PathEl, { icon, from, to, progress, reducedMotion }: CtrlProps): void;
   destroy(): void;
   /** Prop watcher: ONE owner decides per run — the controlled pair while it
    *  is fully present, `icon` otherwise (mount doesn't fire thanks to the
    *  init-time baselines). */
-  watch({ icon, from, to, progress, spring }: WatchProps): void;
+  watch({ icon, from, to, progress, spring, reducedMotion }: WatchProps): void;
   morphTo(icon: IconInput, spring?: SpringPreset | MorphOptions): void;
   set(icon: IconInput): void;
 };
 //#endregion
-export { type IconInput, type IconNode, type Morph, MorphHandle, MorphIconProps, type MorphOptions, type PathEl, type Sampled, type SpringPreset, computeInitialD, createController };
+export { type IconInput, type IconNode, type Morph, MorphHandle, MorphIconProps, type MorphOptions, type PathEl, type ReducedMotionMode, type Sampled, type SpringPreset, computeInitialD, createController };

package/dist/svelte-shared.js

@@ -1,4 +1,4 @@
-import { a as buildPlan, f as interpPolar, l as serialize, r as resampleIcon, u as allocOutputs } from "./spring-BTcHiHR5.js";
+import { a as buildPlan, f as interpPolar, l as serialize, r as resampleIcon, u as allocOutputs } from "./spring-CBynweFS.js";
 import { canonicalD, createMorph } from "./dom.js";
 //#region src/svelte/shared.ts
 /** Frozen shape of the from→to pair at t, using the pure core (SSR-safe).
@@ -35,10 +35,11 @@ function computeInitialD({ icon, from, to, progress }) {
 *    path back to `icon`.
 *  - Every exit from controlled mode (imperative call or icon takeover)
 *    invalidates the frozen pair, so returning to it re-bases on `from`. */
-function createController({ icon, from, to, progress }) {
+function createController({ icon, from, to, progress, reducedMotion }) {
 	let el = null;
 	let dead = false;
 	let morph = null;
+	let rm = reducedMotion ?? "never";
 	let based = false;
 	let pair = null;
 	let prevIcon = icon;
@@ -50,7 +51,7 @@ function createController({ icon, from, to, progress }) {
 	const ensure = (birth) => {
 		if (morph) return morph;
 		if (dead || !el) return null;
-		morph = createMorph(el, birth);
+		morph = createMorph(el, birth, { reducedMotion: rm });
 		return morph;
 	};
 	/** Controlled mode: freeze the pair at `progress` via seek (no spring). */
@@ -77,12 +78,13 @@ function createController({ icon, from, to, progress }) {
 		}
 	};
 	return {
-		mount(mountEl, { icon, from, to, progress }) {
+		mount(mountEl, { icon, from, to, progress, reducedMotion }) {
 			el = mountEl;
+			rm = reducedMotion ?? rm;
 			const controlled = from !== void 0 && to !== void 0;
 			const initialIcon = icon ?? from ?? to;
 			if (initialIcon === void 0) return;
-			const m = createMorph(el, controlled ? from : initialIcon);
+			const m = createMorph(el, controlled ? from : initialIcon, { reducedMotion: rm });
 			morph = m;
 			if (controlled) {
 				pair = [from, to];
@@ -106,7 +108,9 @@ function createController({ icon, from, to, progress }) {
 		/** Prop watcher: ONE owner decides per run — the controlled pair while it
 		*  is fully present, `icon` otherwise (mount doesn't fire thanks to the
 		*  init-time baselines). */
-		watch({ icon, from, to, progress, spring }) {
+		watch({ icon, from, to, progress, spring, reducedMotion }) {
+			rm = reducedMotion ?? "never";
+			if (morph) morph.reducedMotion = rm;
 			const controlled = from !== void 0 && to !== void 0;
 			const left = prevControlled && !controlled;
 			const iconChanged = icon !== prevIcon;

package/dist/vue.d.ts

@@ -1,5 +1,5 @@
 import { a as Sampled, c as SpringPreset, n as IconInput, r as IconNode } from "./types-JAF3s76Y.js";
-import { Morph, MorphOptions, PathEl } from "./dom.js";
+import { Morph, MorphOptions, PathEl, ReducedMotionMode } from "./dom.js";
 import { PropType } from "vue";
 //#region src/vue/index.d.ts
 /** Imperative surface exposed on the component instance (template ref). */
@@ -33,6 +33,13 @@ declare const MorphIcon: import("vue").DefineComponent<import("vue").ExtractProp
     type: PropType<SpringPreset | MorphOptions>;
     default: undefined;
   };
+  /** Reduced-motion policy: "never" (default) animates regardless of the OS
+   *  setting, "user" honors prefers-reduced-motion (morphs degrade to an
+   *  instant swap while it is on), "always" always jumps. */
+  reducedMotion: {
+    type: PropType<ReducedMotionMode>;
+    default: string;
+  };
   size: {
     type: (NumberConstructor | StringConstructor)[];
     default: number;
@@ -83,6 +90,13 @@ declare const MorphIcon: import("vue").DefineComponent<import("vue").ExtractProp
     type: PropType<SpringPreset | MorphOptions>;
     default: undefined;
   };
+  /** Reduced-motion policy: "never" (default) animates regardless of the OS
+   *  setting, "user" honors prefers-reduced-motion (morphs degrade to an
+   *  instant swap while it is on), "always" always jumps. */
+  reducedMotion: {
+    type: PropType<ReducedMotionMode>;
+    default: string;
+  };
   size: {
     type: (NumberConstructor | StringConstructor)[];
     default: number;
@@ -111,6 +125,7 @@ declare const MorphIcon: import("vue").DefineComponent<import("vue").ExtractProp
   to: IconInput;
   progress: number;
   spring: "bouncy" | "smooth" | "snappy" | MorphOptions;
+  reducedMotion: ReducedMotionMode;
   size: string | number;
   color: string;
   strokeWidth: string | number;
@@ -118,4 +133,4 @@ declare const MorphIcon: import("vue").DefineComponent<import("vue").ExtractProp
   label: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { type IconInput, type IconNode, type Morph, MorphHandle, MorphIcon, type MorphOptions, type PathEl, type Sampled, type SpringPreset };
+export { type IconInput, type IconNode, type Morph, MorphHandle, MorphIcon, type MorphOptions, type PathEl, type ReducedMotionMode, type Sampled, type SpringPreset };

package/dist/vue.js

@@ -1,4 +1,4 @@
-import { a as buildPlan, f as interpPolar, l as serialize, r as resampleIcon, u as allocOutputs } from "./spring-BTcHiHR5.js";
+import { a as buildPlan, f as interpPolar, l as serialize, r as resampleIcon, u as allocOutputs } from "./spring-CBynweFS.js";
 import { canonicalD, createMorph } from "./dom.js";
 import { defineComponent, h, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
 //#region src/vue/index.ts
@@ -40,6 +40,13 @@ const MorphIcon = defineComponent({
 			type: [String, Object],
 			default: void 0
 		},
+		/** Reduced-motion policy: "never" (default) animates regardless of the OS
+		*  setting, "user" honors prefers-reduced-motion (morphs degrade to an
+		*  instant swap while it is on), "always" always jumps. */
+		reducedMotion: {
+			type: String,
+			default: "never"
+		},
 		size: {
 			type: [Number, String],
 			default: 24
@@ -84,7 +91,7 @@ const MorphIcon = defineComponent({
 			if (morph) return morph;
 			const el = pathEl.value;
 			if (dead || !el) return null;
-			morph = createMorph(el, birth);
+			morph = createMorph(el, birth, { reducedMotion: props.reducedMotion });
 			return morph;
 		};
 		onMounted(() => {
@@ -93,7 +100,7 @@ const MorphIcon = defineComponent({
 			const controlled = from !== void 0 && to !== void 0;
 			const initialIcon = icon ?? from ?? to;
 			if (!el || initialIcon === void 0) return;
-			const m = createMorph(el, controlled ? from : initialIcon);
+			const m = createMorph(el, controlled ? from : initialIcon, { reducedMotion: props.reducedMotion });
 			morph = m;
 			if (controlled) {
 				pair = [from, to];
@@ -113,6 +120,9 @@ const MorphIcon = defineComponent({
 			based = false;
 			pair = null;
 		});
+		watch(() => props.reducedMotion, (v) => {
+			if (morph) morph.reducedMotion = v;
+		});
 		watch(() => [
 			props.icon,
 			props.from,
@@ -128,8 +138,10 @@ const MorphIcon = defineComponent({
 			if (icon === void 0 || !changed && !left) return;
 			pair = null;
 			based = false;
-			if (morph) morph.morphTo(icon, props.spring);
-			else ensure(icon);
+			if (morph) {
+				morph.reducedMotion = props.reducedMotion;
+				morph.morphTo(icon, props.spring);
+			} else ensure(icon);
 		});
 		watch(() => [
 			props.from,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphicons",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Universal morphing for stroke-based icons with spring physics — zero runtime dependencies",
   "license": "MIT",
   "author": "Guillermo (https://guillermolg.com)",