@rootnative/inertia-svg 0.0.8 → 0.0.10

package/CHANGELOG.md

@@ -6,6 +6,26 @@ This package ships in lockstep with `@rootnative/inertia` — version numbers tr
 
 ## [Unreleased]
 
+## [0.0.10] - 2026-09-06
+
+### Changed
+
+- **The `@rootnative/inertia` peer range has an upper bound: `>=0.0.9 <0.1.0`.** Pre-`1.0.0`, a minor bump of core is where a breaking change lands, so this adapter must not accept it. Enforced by `check:versions`. Found by the `1.0.0` readiness audit (2026-09-05), Phase 3.
+
+### Added
+
+- A test for the `initial.d` template-mismatch throw. Found by the `1.0.0` readiness audit (2026-09-05), Phase 3.
+
+### Fixed
+
+- **A spring config without a `type` key is now honoured as the top-level transition.** `SpringTransition.type` is optional, so `transition={{ tension: 300, friction: 20 }}` is valid. The adapter's `'type' in transition` check read it as a per-property map, looked up the prop name, found nothing, and ran the library default spring with no warning. The check is now `isTopLevelTransition`, exported from `@rootnative/inertia`, which is the same structural discriminator the core factory uses. Found by the `1.0.0` readiness audit (2026-09-05).
+
+- **An inline `transition` literal no longer restarts the animation on every parent re-render.** The value-driving effects keyed on the `transition` object's identity. The documented call shape passes `transition={{ type: 'timing', duration: 600 }}` inline, so each parent render made a new object, re-fired every effect, and re-assigned the animation from its current value with the full duration; a frequently re-rendering parent never let the animation finish. The effects now key on `stableSig(transition)`, exported from `@rootnative/inertia`, so only a change to the config's content re-resolves. Found by the `1.0.0` readiness audit (2026-09-05).
+
+## [0.0.9] - 2026-08-22
+
+**Lockstep version bump** alongside `@rootnative/inertia@0.0.9` (`useInterpolatedStyle` types its return against the map it was given, so a `style` array no longer needs a cast). No runtime changes in this adapter; the `@rootnative/inertia` peer range moves to `>=0.0.9`.
+
 ## [0.0.8] - 2026-08-16
 
 **Lockstep version bump** alongside `@rootnative/inertia@0.0.8` (`<Stagger>`, parent-owned per-child delays for cascading list entrances, and a settle callback on `buildReleaseAnimation`). No runtime changes in this adapter; the `@rootnative/inertia` peer range moves to `>=0.0.8`.
@@ -61,7 +81,9 @@ _No git tag was cut for this release; the published artifact is on npm as [`@roo
 
 - `MotionPath` over `react-native-svg`. Animatable: `d` (element-wise scalar interpolation on structurally-compatible paths), `fill`, `stroke`, `strokeWidth`, opacities, `strokeDashoffset`. Source and target paths must share the same command sequence after implicit-repeat expansion; remount with `key` to switch shape.
 
-[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.8...HEAD
+[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.10...HEAD
+[0.0.10]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.10
+[0.0.9]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.9
 [0.0.8]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.8
 [0.0.7]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.7
 [0.0.6]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.6

package/dist/index.js

@@ -180,7 +180,7 @@ var AnimatedPath = Animated__default.default.createAnimatedComponent(reactNative
 var NO_ANIMATION = { type: "no-animation" };
 function pickTransition(per, key) {
   if (!per) return void 0;
-  if ("type" in per) return per;
+  if (inertia.isTopLevelTransition(per)) return per;
   return per[key];
 }
 function MotionPath(props) {
@@ -254,6 +254,7 @@ If you need to swap to a structurally different path, remount with key={...}.`
     seedSource?.strokeDashoffset ?? strokeDashoffset ?? 0
   );
   const reduce = inertia.useShouldReduceMotion();
+  const transitionSig = inertia.stableSig(transition);
   const animateD = animate?.d;
   const animateFill = animate?.fill;
   const animateStroke = animate?.stroke;
@@ -278,22 +279,22 @@ If you need to swap to a structurally different path, remount with key={...}.`
     for (let i = 0; i < paramSvs.length; i++) {
       paramSvs[i].value = inertia.resolveTransition(cfg, target[i] ?? 0);
     }
-  }, [animateD, reduce, transition]);
+  }, [animateD, reduce, transitionSig]);
   react.useEffect(() => {
     if (animateFill === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "fill");
     fillSv.value = inertia.resolveTransition(cfg, animateFill);
-  }, [animateFill, reduce, transition]);
+  }, [animateFill, reduce, transitionSig]);
   react.useEffect(() => {
     if (animateStroke === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "stroke");
     strokeSv.value = inertia.resolveTransition(cfg, animateStroke);
-  }, [animateStroke, reduce, transition]);
+  }, [animateStroke, reduce, transitionSig]);
   react.useEffect(() => {
     if (animateStrokeWidth === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "strokeWidth");
     strokeWidthSv.value = inertia.resolveTransition(cfg, animateStrokeWidth);
-  }, [animateStrokeWidth, reduce, transition]);
+  }, [animateStrokeWidth, reduce, transitionSig]);
   react.useEffect(() => {
     if (animateStrokeOpacity === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "strokeOpacity");
@@ -301,17 +302,17 @@ If you need to swap to a structurally different path, remount with key={...}.`
       cfg,
       animateStrokeOpacity
     );
-  }, [animateStrokeOpacity, reduce, transition]);
+  }, [animateStrokeOpacity, reduce, transitionSig]);
   react.useEffect(() => {
     if (animateFillOpacity === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "fillOpacity");
     fillOpacitySv.value = inertia.resolveTransition(cfg, animateFillOpacity);
-  }, [animateFillOpacity, reduce, transition]);
+  }, [animateFillOpacity, reduce, transitionSig]);
   react.useEffect(() => {
     if (animateOpacity === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "opacity");
     opacitySv.value = inertia.resolveTransition(cfg, animateOpacity);
-  }, [animateOpacity, reduce, transition]);
+  }, [animateOpacity, reduce, transitionSig]);
   react.useEffect(() => {
     if (animateStrokeDashoffset === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "strokeDashoffset");
@@ -319,7 +320,7 @@ If you need to swap to a structurally different path, remount with key={...}.`
       cfg,
       animateStrokeDashoffset
     );
-  }, [animateStrokeDashoffset, reduce, transition]);
+  }, [animateStrokeDashoffset, reduce, transitionSig]);
   const animatedProps = Animated.useAnimatedProps(() => {
     "worklet";
     const params = new Array(paramSvs.length);
@@ -354,7 +355,7 @@ If you need to swap to a structurally different path, remount with key={...}.`
 var NO_ANIMATION2 = { type: "no-animation" };
 function pickTransition2(transition, key, registry) {
   if (!transition) return void 0;
-  if (typeof transition === "string" || "type" in transition) {
+  if (typeof transition === "string" || inertia.isTopLevelTransition(transition)) {
     return inertia.resolveNamedTransition(transition, registry);
   }
   return inertia.resolveNamedTransition(
@@ -447,6 +448,7 @@ function createMotionSvgComponent(Component, config) {
         }
       }
     }
+    const transitionSig = inertia.stableSig(transition);
     for (const k of numericKeys) {
       const target = anim?.[k];
       react.useEffect(() => {
@@ -457,7 +459,7 @@ function createMotionSvgComponent(Component, config) {
         }
         const cfg = reduce ? NO_ANIMATION2 : pickTransition2(transition, k, registry);
         numericSvs[k].value = inertia.resolveTransition(cfg, target);
-      }, [target, reduce, transition]);
+      }, [target, reduce, transitionSig]);
     }
     for (const k of colorKeys) {
       const target = anim?.[k];
@@ -469,7 +471,7 @@ function createMotionSvgComponent(Component, config) {
         }
         const cfg = reduce ? NO_ANIMATION2 : pickTransition2(transition, k, registry);
         colorSvs[k].value = inertia.resolveTransition(cfg, target);
-      }, [target, reduce, transition]);
+      }, [target, reduce, transitionSig]);
     }
     for (const k of arrayKeys) {
       const target = anim?.[k];
@@ -494,7 +496,7 @@ function createMotionSvgComponent(Component, config) {
         for (let i = 0; i < len; i++) {
           svs[i].value = inertia.resolveTransition(cfg, target[i] ?? 0);
         }
-      }, [sig, reduce, transition]);
+      }, [sig, reduce, transitionSig]);
     }
     const animatedProps = Animated.useAnimatedProps(() => {
       "worklet";

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { useRef, useEffect, useMemo } from 'react';
 import { Path, Circle, Rect, Line } from 'react-native-svg';
 import Animated, { useSharedValue, useAnimatedProps } from 'react-native-reanimated';
-import { useShouldReduceMotion, useNamedTransitions, TRANSPARENT, resolveTransition, resolveNamedTransition } from '@rootnative/inertia';
+import { useShouldReduceMotion, useNamedTransitions, TRANSPARENT, stableSig, resolveTransition, isTopLevelTransition, resolveNamedTransition } from '@rootnative/inertia';
 import { jsx } from 'react/jsx-runtime';
 
 // src/MotionPath.tsx
@@ -174,7 +174,7 @@ var AnimatedPath = Animated.createAnimatedComponent(Path);
 var NO_ANIMATION = { type: "no-animation" };
 function pickTransition(per, key) {
   if (!per) return void 0;
-  if ("type" in per) return per;
+  if (isTopLevelTransition(per)) return per;
   return per[key];
 }
 function MotionPath(props) {
@@ -248,6 +248,7 @@ If you need to swap to a structurally different path, remount with key={...}.`
     seedSource?.strokeDashoffset ?? strokeDashoffset ?? 0
   );
   const reduce = useShouldReduceMotion();
+  const transitionSig = stableSig(transition);
   const animateD = animate?.d;
   const animateFill = animate?.fill;
   const animateStroke = animate?.stroke;
@@ -272,22 +273,22 @@ If you need to swap to a structurally different path, remount with key={...}.`
     for (let i = 0; i < paramSvs.length; i++) {
       paramSvs[i].value = resolveTransition(cfg, target[i] ?? 0);
     }
-  }, [animateD, reduce, transition]);
+  }, [animateD, reduce, transitionSig]);
   useEffect(() => {
     if (animateFill === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "fill");
     fillSv.value = resolveTransition(cfg, animateFill);
-  }, [animateFill, reduce, transition]);
+  }, [animateFill, reduce, transitionSig]);
   useEffect(() => {
     if (animateStroke === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "stroke");
     strokeSv.value = resolveTransition(cfg, animateStroke);
-  }, [animateStroke, reduce, transition]);
+  }, [animateStroke, reduce, transitionSig]);
   useEffect(() => {
     if (animateStrokeWidth === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "strokeWidth");
     strokeWidthSv.value = resolveTransition(cfg, animateStrokeWidth);
-  }, [animateStrokeWidth, reduce, transition]);
+  }, [animateStrokeWidth, reduce, transitionSig]);
   useEffect(() => {
     if (animateStrokeOpacity === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "strokeOpacity");
@@ -295,17 +296,17 @@ If you need to swap to a structurally different path, remount with key={...}.`
       cfg,
       animateStrokeOpacity
     );
-  }, [animateStrokeOpacity, reduce, transition]);
+  }, [animateStrokeOpacity, reduce, transitionSig]);
   useEffect(() => {
     if (animateFillOpacity === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "fillOpacity");
     fillOpacitySv.value = resolveTransition(cfg, animateFillOpacity);
-  }, [animateFillOpacity, reduce, transition]);
+  }, [animateFillOpacity, reduce, transitionSig]);
   useEffect(() => {
     if (animateOpacity === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "opacity");
     opacitySv.value = resolveTransition(cfg, animateOpacity);
-  }, [animateOpacity, reduce, transition]);
+  }, [animateOpacity, reduce, transitionSig]);
   useEffect(() => {
     if (animateStrokeDashoffset === void 0) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "strokeDashoffset");
@@ -313,7 +314,7 @@ If you need to swap to a structurally different path, remount with key={...}.`
       cfg,
       animateStrokeDashoffset
     );
-  }, [animateStrokeDashoffset, reduce, transition]);
+  }, [animateStrokeDashoffset, reduce, transitionSig]);
   const animatedProps = useAnimatedProps(() => {
     "worklet";
     const params = new Array(paramSvs.length);
@@ -348,7 +349,7 @@ If you need to swap to a structurally different path, remount with key={...}.`
 var NO_ANIMATION2 = { type: "no-animation" };
 function pickTransition2(transition, key, registry) {
   if (!transition) return void 0;
-  if (typeof transition === "string" || "type" in transition) {
+  if (typeof transition === "string" || isTopLevelTransition(transition)) {
     return resolveNamedTransition(transition, registry);
   }
   return resolveNamedTransition(
@@ -441,6 +442,7 @@ function createMotionSvgComponent(Component, config) {
         }
       }
     }
+    const transitionSig = stableSig(transition);
     for (const k of numericKeys) {
       const target = anim?.[k];
       useEffect(() => {
@@ -451,7 +453,7 @@ function createMotionSvgComponent(Component, config) {
         }
         const cfg = reduce ? NO_ANIMATION2 : pickTransition2(transition, k, registry);
         numericSvs[k].value = resolveTransition(cfg, target);
-      }, [target, reduce, transition]);
+      }, [target, reduce, transitionSig]);
     }
     for (const k of colorKeys) {
       const target = anim?.[k];
@@ -463,7 +465,7 @@ function createMotionSvgComponent(Component, config) {
         }
         const cfg = reduce ? NO_ANIMATION2 : pickTransition2(transition, k, registry);
         colorSvs[k].value = resolveTransition(cfg, target);
-      }, [target, reduce, transition]);
+      }, [target, reduce, transitionSig]);
     }
     for (const k of arrayKeys) {
       const target = anim?.[k];
@@ -488,7 +490,7 @@ function createMotionSvgComponent(Component, config) {
         for (let i = 0; i < len; i++) {
           svs[i].value = resolveTransition(cfg, target[i] ?? 0);
         }
-      }, [sig, reduce, transition]);
+      }, [sig, reduce, transitionSig]);
     }
     const animatedProps = useAnimatedProps(() => {
       "worklet";

package/llms.txt

@@ -99,7 +99,7 @@ Path normalization that resamples between arbitrary shapes (the flubber-style ap
 | Key                | Shape    | Notes                                                                                                                       |
 | ------------------ | -------- | --------------------------------------------------------------------------------------------------------------------------- |
 | `d`                | `string` | Path data. Source and target must share the same template — see above. Each scalar param springs / times independently.     |
-| `fill`             | `string` | Color, interpolated via Reanimated's color setter. Defaults to `'transparent'` if neither static nor `initial` is supplied. |
+| `fill`             | `string` | Color, interpolated via Reanimated's color setter. Defaults to `TRANSPARENT` (`rgba(0, 0, 0, 0)`) if neither static nor `initial` is supplied. |
 | `stroke`           | `string` | Same as `fill`.                                                                                                             |
 | `strokeWidth`      | `number` | Numeric. Default seed `1`.                                                                                                  |
 | `strokeOpacity`    | `number` | Numeric, 0–1.                                                                                                               |
@@ -187,7 +187,7 @@ Shape-specific rules (they mirror `MotionPath`'s command-sequence lock):
 
 - **Array props lock their length at first render.** `strokeDasharray` interpolates element-wise, so a target with a different length throws in dev and is ignored in production. Remount with a new `key` to change the length.
 - **A key only animates when it's present at mount** — in the static props, `initial`, or `animate`. Keys introduced into `animate` after mount warn in dev and are ignored. Keys never mentioned pass through as ordinary static props, so un-animated attributes keep their element defaults.
-- Numeric keys engaged only via `animate` seed from `0`; colors seed from `'transparent'`. Give the key a static prop or an `initial` value when the mount animation should start elsewhere.
+- Numeric keys engaged only via `animate` seed from `0`; colors seed from `TRANSPARENT` (`rgba(0, 0, 0, 0)`, exported from `@rootnative/inertia`). Give the key a static prop or an `initial` value when the mount animation should start elsewhere.
 
 ## createMotionSvgComponent {#factory}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rootnative/inertia-svg",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Animatable SVG primitives (path morphing, fill/stroke) for @rootnative/inertia, built on react-native-svg.",
   "license": "MIT",
   "author": "RootNative",
@@ -50,7 +50,7 @@
     "!**/*.test.*"
   ],
   "peerDependencies": {
-    "@rootnative/inertia": ">=0.0.8",
+    "@rootnative/inertia": ">=0.0.10 <0.1.0",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
     "react-native-reanimated": ">=4.0.0",
@@ -69,7 +69,7 @@
     "react-test-renderer": "19.1.0",
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
-    "@rootnative/inertia": "0.0.8"
+    "@rootnative/inertia": "0.0.10"
   },
   "publishConfig": {
     "access": "public"

package/src/MotionPath.tsx

@@ -6,7 +6,9 @@ import Animated, {
   type SharedValue,
 } from 'react-native-reanimated'
 import {
+  isTopLevelTransition,
   resolveTransition,
+  stableSig,
   TRANSPARENT,
   useShouldReduceMotion,
   type TransitionConfig,
@@ -34,7 +36,10 @@ function pickTransition(
   key: keyof PathPerPropertyTransition,
 ): TransitionConfig | undefined {
   if (!per) return undefined
-  if ('type' in per) return per as TransitionConfig
+  // Structural check, not `'type' in per`: `SpringTransition.type` is
+  // optional, so `{ tension: 300 }` is a valid top-level config with no
+  // `type` key and must not be read as a per-property map.
+  if (isTopLevelTransition(per)) return per
   return (per as PathPerPropertyTransition)[key]
 }
 
@@ -209,6 +214,13 @@ export function MotionPath(props: MotionPathProps) {
   // Serialize scalar targets into stable keys so effects re-run on value
   // change, not on every parent re-render (a fresh `animate` literal each
   // render is the common case).
+  // Effects below key on this signature, not on the `transition` object. A
+  // parent that re-renders with an inline `transition={{ ... }}` literal makes
+  // a new object each time; keying on identity re-fired every effect and
+  // restarted the in-flight animation from its current value with the full
+  // duration. The signature only changes when the config itself changes.
+  const transitionSig = stableSig(transition)
+
   const animateD = animate?.d
   const animateFill = animate?.fill
   const animateStroke = animate?.stroke
@@ -236,21 +248,21 @@ export function MotionPath(props: MotionPathProps) {
     }
     // paramSvs / template are stable across renders by the locks above.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animateD, reduce, transition])
+  }, [animateD, reduce, transitionSig])
 
   useEffect(() => {
     if (animateFill === undefined) return
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, 'fill')
     fillSv.value = resolveTransition(cfg, animateFill) as string
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animateFill, reduce, transition])
+  }, [animateFill, reduce, transitionSig])
 
   useEffect(() => {
     if (animateStroke === undefined) return
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, 'stroke')
     strokeSv.value = resolveTransition(cfg, animateStroke) as string
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animateStroke, reduce, transition])
+  }, [animateStroke, reduce, transitionSig])
 
   useEffect(() => {
     if (animateStrokeWidth === undefined) return
@@ -259,7 +271,7 @@ export function MotionPath(props: MotionPathProps) {
       : pickTransition(transition, 'strokeWidth')
     strokeWidthSv.value = resolveTransition(cfg, animateStrokeWidth) as number
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animateStrokeWidth, reduce, transition])
+  }, [animateStrokeWidth, reduce, transitionSig])
 
   useEffect(() => {
     if (animateStrokeOpacity === undefined) return
@@ -271,7 +283,7 @@ export function MotionPath(props: MotionPathProps) {
       animateStrokeOpacity,
     ) as number
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animateStrokeOpacity, reduce, transition])
+  }, [animateStrokeOpacity, reduce, transitionSig])
 
   useEffect(() => {
     if (animateFillOpacity === undefined) return
@@ -280,14 +292,14 @@ export function MotionPath(props: MotionPathProps) {
       : pickTransition(transition, 'fillOpacity')
     fillOpacitySv.value = resolveTransition(cfg, animateFillOpacity) as number
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animateFillOpacity, reduce, transition])
+  }, [animateFillOpacity, reduce, transitionSig])
 
   useEffect(() => {
     if (animateOpacity === undefined) return
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, 'opacity')
     opacitySv.value = resolveTransition(cfg, animateOpacity) as number
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animateOpacity, reduce, transition])
+  }, [animateOpacity, reduce, transitionSig])
 
   useEffect(() => {
     if (animateStrokeDashoffset === undefined) return
@@ -299,7 +311,7 @@ export function MotionPath(props: MotionPathProps) {
       animateStrokeDashoffset,
     ) as number
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animateStrokeDashoffset, reduce, transition])
+  }, [animateStrokeDashoffset, reduce, transitionSig])
 
   const animatedProps = useAnimatedProps(() => {
     'worklet'

package/src/createMotionSvgComponent.tsx

@@ -5,8 +5,10 @@ import Animated, {
   type SharedValue,
 } from 'react-native-reanimated'
 import {
+  isTopLevelTransition,
   resolveNamedTransition,
   resolveTransition,
+  stableSig,
   TRANSPARENT,
   useNamedTransitions,
   useShouldReduceMotion,
@@ -112,7 +114,10 @@ function pickTransition(
   registry: NamedTransitions,
 ): TransitionConfig | undefined {
   if (!transition) return undefined
-  if (typeof transition === 'string' || 'type' in transition) {
+  // Structural check, not `'type' in transition`: `SpringTransition.type` is
+  // optional, so `{ tension: 300 }` is a valid top-level config with no
+  // `type` key and must not be read as a per-property map.
+  if (typeof transition === 'string' || isTopLevelTransition(transition)) {
     return resolveNamedTransition(transition as TransitionInput, registry)
   }
   return resolveNamedTransition(
@@ -299,6 +304,12 @@ export function createMotionSvgComponent<
       }
     }
 
+    // Effects below key on this signature, not on the `transition` object. A
+    // parent that re-renders with an inline `transition={{ ... }}` literal makes
+    // a new object each time; keying on identity re-fired every effect and
+    // restarted the in-flight animation from its current value with the full
+    // duration. The signature only changes when the config itself changes.
+    const transitionSig = stableSig(transition)
     // One effect per configured key (fixed count). Targets are read into
     // locals so the dep arrays key on the values, not on a fresh `animate`
     // literal each render.
@@ -318,7 +329,7 @@ export function createMotionSvgComponent<
         // SVs / engaged set are mount-stable; registry changes re-resolve via
         // the transition dep on the next animate change.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, [target, reduce, transition])
+      }, [target, reduce, transitionSig])
     }
 
     for (const k of colorKeys) {
@@ -335,7 +346,7 @@ export function createMotionSvgComponent<
           : pickTransition(transition, k, registry)
         colorSvs[k]!.value = resolveTransition(cfg, target) as string
         // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, [target, reduce, transition])
+      }, [target, reduce, transitionSig])
     }
 
     for (const k of arrayKeys) {
@@ -367,7 +378,7 @@ export function createMotionSvgComponent<
           svs[i]!.value = resolveTransition(cfg, target[i] ?? 0) as number
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, [sig, reduce, transition])
+      }, [sig, reduce, transitionSig])
     }
 
     const animatedProps = useAnimatedProps(() => {