r3f-motion 1.0.3 → 1.0.5

package/dist/cjs/index.js

@@ -8,18 +8,37 @@ var jsxRuntime = require('react/jsx-runtime');
 var fiber = require('@react-three/fiber');
 var three = require('three');
 
+const PresenceContext = react.createContext(null);
+/**
+ * Returns presence information for the current component.
+ *
+ * - `isPresent`: Whether the component is currently present in the tree.
+ *   When `false`, the component is exiting and should play its exit animation.
+ * - `safeToRemove`: Call this function when the exit animation is complete
+ *   to signal that the component can be unmounted.
+ *
+ * Returns `null` if the component is not wrapped in `AnimatePresence`.
+ */
+function usePresence() {
+    const context = react.useContext(PresenceContext);
+    if (!context)
+        return null;
+    return [context.isPresent, context.safeToRemove];
+}
+
 const useRender = (Component, props, forwardedRef, instanceRef, initialValues) => {
     const initialValuesAppliedRef = react.useRef(false);
     /**
      * Create a callback ref that captures the Three.js instance
      */
     const callbackRef = react.useCallback((instance) => {
+        var _a;
         if (!instance)
             return;
         // Apply initial values immediately to prevent FOUC - but only once
         if (initialValues && !initialValuesAppliedRef.current) {
             initialValuesAppliedRef.current = true;
-            // Property mapping configuration
+            // Transform property mapping
             const propertyMap = {
                 x: (val) => instance.position && (instance.position.x = val),
                 y: (val) => instance.position && (instance.position.y = val),
@@ -32,32 +51,35 @@ const useRender = (Component, props, forwardedRef, instanceRef, initialValues) =
                 scaleX: (val) => instance.scale && (instance.scale.x = val),
                 scaleY: (val) => instance.scale && (instance.scale.y = val),
                 scaleZ: (val) => instance.scale && (instance.scale.z = val),
-                color: (val) => {
-                    const color = instance.color;
-                    if (color && color.set) {
-                        color.set(val);
-                    }
-                },
-                opacity: (val) => instance.opacity !== undefined &&
-                    (instance.opacity = val),
-                emissive: (val) => {
-                    const emissive = instance.emissive;
-                    if (emissive && emissive.set) {
-                        emissive.set(val);
-                    }
-                },
-                emissiveIntensity: (val) => instance.emissiveIntensity !== undefined &&
-                    (instance.emissiveIntensity = val),
-                roughness: (val) => instance.roughness !== undefined &&
-                    (instance.roughness = val),
-                metalness: (val) => instance.metalness !== undefined &&
-                    (instance.metalness = val),
             };
+            // Color-type properties that need .set()
+            const colorKeys = new Set([
+                "color",
+                "emissive",
+                "specular",
+                "sheenColor",
+                "attenuationColor",
+            ]);
             for (const key in initialValues) {
                 const setter = propertyMap[key];
                 if (setter) {
                     setter(initialValues[key]);
                 }
+                else if (colorKeys.has(key)) {
+                    const colorProp = instance[key];
+                    if (colorProp && colorProp.set) {
+                        colorProp.set(initialValues[key]);
+                    }
+                }
+                else if (instance.uniforms &&
+                    instance.uniforms[key] &&
+                    typeof ((_a = instance.uniforms[key]) === null || _a === void 0 ? void 0 : _a.value) === "number") {
+                    // Set ShaderMaterial uniform initial value
+                    instance.uniforms[key].value = initialValues[key];
+                }
+                else if (key in instance && typeof instance[key] === "number") {
+                    instance[key] = initialValues[key];
+                }
             }
         }
         // Store instance in the ref so animations can access it
@@ -286,7 +308,8 @@ function custom(Component) {
         const childIndex = react.useMemo(() => { var _a, _b; return (_b = (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.getNextChildIndex) === null || _a === void 0 ? void 0 : _a.call(parentContext)) !== null && _b !== void 0 ? _b : 0; }, 
         // eslint-disable-next-line react-hooks/exhaustive-deps
         []);
-        const _a = props, { initial: initialProp, animate: animateProp, transition, variants, custom, inherit = true, children, onAnimationUpdate, onAnimationStart, onAnimationComplete } = _a, restProps = tslib.__rest(_a, ["initial", "animate", "transition", "variants", "custom", "inherit", "children", "onAnimationUpdate", "onAnimationStart", "onAnimationComplete"]);
+        const presenceContext = react.useContext(PresenceContext);
+        const _a = props, { initial: initialProp, animate: animateProp, exit: exitProp, transition, variants, custom, inherit = true, children, onAnimationUpdate, onAnimationStart, onAnimationComplete } = _a, restProps = tslib.__rest(_a, ["initial", "animate", "exit", "transition", "variants", "custom", "inherit", "children", "onAnimationUpdate", "onAnimationStart", "onAnimationComplete"]);
         const initial = initialProp !== undefined
             ? initialProp
             : inherit && (parentContext === null || parentContext === void 0 ? void 0 : parentContext.initial);
@@ -422,7 +445,16 @@ function custom(Component) {
                 const tempColor = new ColorConstructor(value);
                 ["r", "g", "b"].forEach((channel) => createAnimation(target, { [channel]: tempColor[channel] }, opts, key));
             };
+            // Color-type properties that need RGB channel animation
+            const colorKeys = new Set([
+                "color",
+                "emissive",
+                "specular",
+                "sheenColor",
+                "attenuationColor",
+            ]);
             Object.entries(targetValues).forEach(([key, value]) => {
+                var _a;
                 const opts = getPropertyOpts(key);
                 const mapping = transformMap[key];
                 if (mapping === null || mapping === void 0 ? void 0 : mapping.target) {
@@ -433,26 +465,19 @@ function custom(Component) {
                         createAnimation(mapping.target, { [mapping.prop]: value }, opts, key);
                     }
                 }
-                else if (key === "color" && instance.color) {
-                    animateColor(instance.color, value, opts, key);
-                }
-                else if (key === "emissive" && instance.emissive) {
-                    animateColor(instance.emissive, value, opts, key);
+                else if (colorKeys.has(key) && instance[key]) {
+                    animateColor(instance[key], value, opts, key);
                 }
-                else if (key === "opacity" && instance.opacity !== undefined) {
-                    createAnimation(instance, { opacity: value }, opts, key);
+                else if (instance.uniforms &&
+                    instance.uniforms[key] &&
+                    typeof ((_a = instance.uniforms[key]) === null || _a === void 0 ? void 0 : _a.value) === "number") {
+                    // Animate ShaderMaterial uniforms (uniforms[key].value)
+                    // Note: consumers must useMemo their uniforms prop to prevent
+                    // R3F from overwriting animated values on re-render
+                    createAnimation(instance.uniforms[key], { value: value }, opts, key);
                 }
-                else if (key === "emissiveIntensity" &&
-                    instance.emissiveIntensity !== undefined) {
-                    createAnimation(instance, { emissiveIntensity: value }, opts, key);
-                }
-                else if (key === "roughness" &&
-                    instance.roughness !== undefined) {
-                    createAnimation(instance, { roughness: value }, opts, key);
-                }
-                else if (key === "metalness" &&
-                    instance.metalness !== undefined) {
-                    createAnimation(instance, { metalness: value }, opts, key);
+                else if (key in instance && typeof instance[key] === "number") {
+                    createAnimation(instance, { [key]: value }, opts, key);
                 }
             });
             animationRef.current = {
@@ -479,6 +504,35 @@ function custom(Component) {
             return () => { var _a; return (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.stop(); };
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [animate]);
+        // Handle exit animation when presence context signals removal
+        react.useEffect(() => {
+            var _a;
+            if (!presenceContext || presenceContext.isPresent)
+                return;
+            if (!instanceRef.current || !exitProp) {
+                // No exit animation defined, safe to remove immediately
+                presenceContext.safeToRemove();
+                return;
+            }
+            const resolved = typeof exitProp === "string" ? resolveVariant(exitProp) : exitProp;
+            if (!resolved) {
+                presenceContext.safeToRemove();
+                return;
+            }
+            const resolvedObj = resolved;
+            const { transition: exitTransition } = resolvedObj, exitValues = tslib.__rest(resolvedObj, ["transition"]);
+            const effectiveExitTransition = exitTransition || transition;
+            // Store safeToRemove in a ref-like closure so onAnimationComplete can call it
+            const originalComplete = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onAnimationComplete;
+            const safeToRemove = presenceContext.safeToRemove;
+            callbacksRef.current = Object.assign(Object.assign({}, callbacksRef.current), { onAnimationComplete: (variant) => {
+                    originalComplete === null || originalComplete === void 0 ? void 0 : originalComplete(variant);
+                    safeToRemove();
+                } });
+            animateToTarget(exitValues, effectiveExitTransition, true);
+            return () => { var _a; return (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.stop(); };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.isPresent]);
         const gestureProps = {
             captureInstanceState,
             buildTargetFromState,
@@ -542,5 +596,121 @@ const MotionCamera = (props) => {
     return jsxRuntime.jsx(motion.primitive, Object.assign({ object: camera }, restProps));
 };
 
+function getChildKey(child) {
+    var _a;
+    return (_a = child.key) !== null && _a !== void 0 ? _a : "";
+}
+function getValidChildren(children) {
+    const result = [];
+    const childArray = Array.isArray(children) ? children : [children];
+    for (const child of childArray) {
+        if (react.isValidElement(child)) {
+            result.push(child);
+        }
+    }
+    return result;
+}
+function AnimatePresence({ children, mode = "sync", onExitComplete, custom, }) {
+    const validChildren = getValidChildren(children);
+    const [entries, setEntries] = react.useState(() => validChildren.map((child) => ({
+        key: getChildKey(child),
+        element: child,
+        isPresent: true,
+    })));
+    const exitingCount = react.useRef(0);
+    const onExitCompleteRef = react.useRef(onExitComplete);
+    onExitCompleteRef.current = onExitComplete;
+    // Track whether we're waiting for exits to complete (for mode="wait")
+    const [isWaiting, setIsWaiting] = react.useState(false);
+    const pendingChildrenRef = react.useRef(null);
+    react.useEffect(() => {
+        const currentKeys = new Set(validChildren.map(getChildKey));
+        const prevKeys = new Set(entries.map((e) => e.key));
+        // Find new children to add
+        const entering = validChildren.filter((c) => !prevKeys.has(getChildKey(c)));
+        // Find children to remove
+        const exitingKeys = new Set(entries
+            .filter((e) => e.isPresent && !currentKeys.has(e.key))
+            .map((e) => e.key));
+        if (exitingKeys.size === 0 && entering.length === 0) {
+            // Just update existing children elements
+            setEntries((prev) => prev.map((entry) => {
+                const updated = validChildren.find((c) => getChildKey(c) === entry.key);
+                return updated ? Object.assign(Object.assign({}, entry), { element: updated }) : entry;
+            }));
+            return;
+        }
+        if (mode === "wait" && exitingKeys.size > 0 && entering.length > 0) {
+            // Store pending children, mark exits, wait for them to complete
+            pendingChildrenRef.current = validChildren;
+            setIsWaiting(true);
+            exitingCount.current = exitingKeys.size;
+            setEntries((prev) => prev.map((entry) => exitingKeys.has(entry.key)
+                ? Object.assign(Object.assign({}, entry), { isPresent: false }) : entry));
+            return;
+        }
+        exitingCount.current = exitingKeys.size;
+        setEntries((prev) => {
+            // Update existing, mark exiting
+            const updated = prev.map((entry) => {
+                if (exitingKeys.has(entry.key)) {
+                    return Object.assign(Object.assign({}, entry), { isPresent: false });
+                }
+                const updatedChild = validChildren.find((c) => getChildKey(c) === entry.key);
+                return updatedChild ? Object.assign(Object.assign({}, entry), { element: updatedChild }) : entry;
+            });
+            // Add entering children
+            const newEntries = entering.map((child) => ({
+                key: getChildKey(child),
+                element: child,
+                isPresent: true,
+            }));
+            return [...updated, ...newEntries];
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [children]);
+    const handleSafeToRemove = (key) => {
+        var _a;
+        setEntries((prev) => prev.filter((entry) => entry.key !== key));
+        exitingCount.current--;
+        if (exitingCount.current <= 0) {
+            (_a = onExitCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onExitCompleteRef);
+            // If in wait mode and we have pending children, add them now
+            if (isWaiting && pendingChildrenRef.current) {
+                const pending = pendingChildrenRef.current;
+                pendingChildrenRef.current = null;
+                setIsWaiting(false);
+                setEntries((prev) => {
+                    const remaining = prev; // exiting ones already filtered out above
+                    const currentKeys = new Set(remaining.map((e) => e.key));
+                    const newEntries = pending
+                        .filter((c) => !currentKeys.has(getChildKey(c)))
+                        .map((child) => ({
+                        key: getChildKey(child),
+                        element: child,
+                        isPresent: true,
+                    }));
+                    // Update existing entries with new elements
+                    const updated = remaining.map((entry) => {
+                        const updatedChild = pending.find((c) => getChildKey(c) === entry.key);
+                        return updatedChild ? Object.assign(Object.assign({}, entry), { element: updatedChild }) : entry;
+                    });
+                    return [...updated, ...newEntries];
+                });
+            }
+        }
+    };
+    return entries.map((entry) => {
+        const contextValue = {
+            isPresent: entry.isPresent,
+            safeToRemove: () => handleSafeToRemove(entry.key),
+            custom,
+        };
+        return react.createElement(PresenceContext.Provider, { key: entry.key, value: contextValue }, react.cloneElement(entry.element));
+    });
+}
+
+exports.AnimatePresence = AnimatePresence;
 exports.MotionCamera = MotionCamera;
 exports.motion = motion;
+exports.usePresence = usePresence;

package/dist/es/components/AnimatePresence/PresenceContext.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+const PresenceContext = createContext(null);
+/**
+ * Returns presence information for the current component.
+ *
+ * - `isPresent`: Whether the component is currently present in the tree.
+ *   When `false`, the component is exiting and should play its exit animation.
+ * - `safeToRemove`: Call this function when the exit animation is complete
+ *   to signal that the component can be unmounted.
+ *
+ * Returns `null` if the component is not wrapped in `AnimatePresence`.
+ */
+function usePresence() {
+    const context = useContext(PresenceContext);
+    if (!context)
+        return null;
+    return [context.isPresent, context.safeToRemove];
+}
+
+export { PresenceContext, usePresence };

package/dist/es/components/AnimatePresence/index.mjs

@@ -0,0 +1,119 @@
+"use client";
+import { useState, useRef, useEffect, createElement, cloneElement, isValidElement } from 'react';
+import { PresenceContext } from './PresenceContext.mjs';
+
+function getChildKey(child) {
+    var _a;
+    return (_a = child.key) !== null && _a !== void 0 ? _a : "";
+}
+function getValidChildren(children) {
+    const result = [];
+    const childArray = Array.isArray(children) ? children : [children];
+    for (const child of childArray) {
+        if (isValidElement(child)) {
+            result.push(child);
+        }
+    }
+    return result;
+}
+function AnimatePresence({ children, mode = "sync", onExitComplete, custom, }) {
+    const validChildren = getValidChildren(children);
+    const [entries, setEntries] = useState(() => validChildren.map((child) => ({
+        key: getChildKey(child),
+        element: child,
+        isPresent: true,
+    })));
+    const exitingCount = useRef(0);
+    const onExitCompleteRef = useRef(onExitComplete);
+    onExitCompleteRef.current = onExitComplete;
+    // Track whether we're waiting for exits to complete (for mode="wait")
+    const [isWaiting, setIsWaiting] = useState(false);
+    const pendingChildrenRef = useRef(null);
+    useEffect(() => {
+        const currentKeys = new Set(validChildren.map(getChildKey));
+        const prevKeys = new Set(entries.map((e) => e.key));
+        // Find new children to add
+        const entering = validChildren.filter((c) => !prevKeys.has(getChildKey(c)));
+        // Find children to remove
+        const exitingKeys = new Set(entries
+            .filter((e) => e.isPresent && !currentKeys.has(e.key))
+            .map((e) => e.key));
+        if (exitingKeys.size === 0 && entering.length === 0) {
+            // Just update existing children elements
+            setEntries((prev) => prev.map((entry) => {
+                const updated = validChildren.find((c) => getChildKey(c) === entry.key);
+                return updated ? Object.assign(Object.assign({}, entry), { element: updated }) : entry;
+            }));
+            return;
+        }
+        if (mode === "wait" && exitingKeys.size > 0 && entering.length > 0) {
+            // Store pending children, mark exits, wait for them to complete
+            pendingChildrenRef.current = validChildren;
+            setIsWaiting(true);
+            exitingCount.current = exitingKeys.size;
+            setEntries((prev) => prev.map((entry) => exitingKeys.has(entry.key)
+                ? Object.assign(Object.assign({}, entry), { isPresent: false }) : entry));
+            return;
+        }
+        exitingCount.current = exitingKeys.size;
+        setEntries((prev) => {
+            // Update existing, mark exiting
+            const updated = prev.map((entry) => {
+                if (exitingKeys.has(entry.key)) {
+                    return Object.assign(Object.assign({}, entry), { isPresent: false });
+                }
+                const updatedChild = validChildren.find((c) => getChildKey(c) === entry.key);
+                return updatedChild ? Object.assign(Object.assign({}, entry), { element: updatedChild }) : entry;
+            });
+            // Add entering children
+            const newEntries = entering.map((child) => ({
+                key: getChildKey(child),
+                element: child,
+                isPresent: true,
+            }));
+            return [...updated, ...newEntries];
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [children]);
+    const handleSafeToRemove = (key) => {
+        var _a;
+        setEntries((prev) => prev.filter((entry) => entry.key !== key));
+        exitingCount.current--;
+        if (exitingCount.current <= 0) {
+            (_a = onExitCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onExitCompleteRef);
+            // If in wait mode and we have pending children, add them now
+            if (isWaiting && pendingChildrenRef.current) {
+                const pending = pendingChildrenRef.current;
+                pendingChildrenRef.current = null;
+                setIsWaiting(false);
+                setEntries((prev) => {
+                    const remaining = prev; // exiting ones already filtered out above
+                    const currentKeys = new Set(remaining.map((e) => e.key));
+                    const newEntries = pending
+                        .filter((c) => !currentKeys.has(getChildKey(c)))
+                        .map((child) => ({
+                        key: getChildKey(child),
+                        element: child,
+                        isPresent: true,
+                    }));
+                    // Update existing entries with new elements
+                    const updated = remaining.map((entry) => {
+                        const updatedChild = pending.find((c) => getChildKey(c) === entry.key);
+                        return updatedChild ? Object.assign(Object.assign({}, entry), { element: updatedChild }) : entry;
+                    });
+                    return [...updated, ...newEntries];
+                });
+            }
+        }
+    };
+    return entries.map((entry) => {
+        const contextValue = {
+            isPresent: entry.isPresent,
+            safeToRemove: () => handleSafeToRemove(entry.key),
+            custom,
+        };
+        return createElement(PresenceContext.Provider, { key: entry.key, value: contextValue }, cloneElement(entry.element));
+    });
+}
+
+export { AnimatePresence };

package/dist/es/index.mjs

@@ -1,3 +1,5 @@
 "use client";
 export { motion } from './render/motion.mjs';
 export { default as MotionCamera } from './components/MotionCamera.mjs';
+export { AnimatePresence } from './components/AnimatePresence/index.mjs';
+export { usePresence } from './components/AnimatePresence/PresenceContext.mjs';

package/dist/es/render/motion.mjs

@@ -1,7 +1,8 @@
 "use client";
 import { __rest } from 'tslib';
-import { createContext, forwardRef, useRef, useContext, useMemo, useCallback, useEffect, createElement, memo } from 'react';
+import { forwardRef, useRef, useContext, useMemo, useCallback, useEffect, createElement, memo, createContext } from 'react';
 import { animate } from 'motion';
+import { PresenceContext } from '../components/AnimatePresence/PresenceContext.mjs';
 import { useRender } from './use-render.mjs';
 import { useHover } from './gestures/use-hover.mjs';
 import { useTap } from './gestures/use-tap.mjs';
@@ -19,7 +20,8 @@ function custom(Component) {
         const childIndex = useMemo(() => { var _a, _b; return (_b = (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.getNextChildIndex) === null || _a === void 0 ? void 0 : _a.call(parentContext)) !== null && _b !== void 0 ? _b : 0; }, 
         // eslint-disable-next-line react-hooks/exhaustive-deps
         []);
-        const _a = props, { initial: initialProp, animate: animateProp, transition, variants, custom, inherit = true, children, onAnimationUpdate, onAnimationStart, onAnimationComplete } = _a, restProps = __rest(_a, ["initial", "animate", "transition", "variants", "custom", "inherit", "children", "onAnimationUpdate", "onAnimationStart", "onAnimationComplete"]);
+        const presenceContext = useContext(PresenceContext);
+        const _a = props, { initial: initialProp, animate: animateProp, exit: exitProp, transition, variants, custom, inherit = true, children, onAnimationUpdate, onAnimationStart, onAnimationComplete } = _a, restProps = __rest(_a, ["initial", "animate", "exit", "transition", "variants", "custom", "inherit", "children", "onAnimationUpdate", "onAnimationStart", "onAnimationComplete"]);
         const initial = initialProp !== undefined
             ? initialProp
             : inherit && (parentContext === null || parentContext === void 0 ? void 0 : parentContext.initial);
@@ -155,7 +157,16 @@ function custom(Component) {
                 const tempColor = new ColorConstructor(value);
                 ["r", "g", "b"].forEach((channel) => createAnimation(target, { [channel]: tempColor[channel] }, opts, key));
             };
+            // Color-type properties that need RGB channel animation
+            const colorKeys = new Set([
+                "color",
+                "emissive",
+                "specular",
+                "sheenColor",
+                "attenuationColor",
+            ]);
             Object.entries(targetValues).forEach(([key, value]) => {
+                var _a;
                 const opts = getPropertyOpts(key);
                 const mapping = transformMap[key];
                 if (mapping === null || mapping === void 0 ? void 0 : mapping.target) {
@@ -166,26 +177,19 @@ function custom(Component) {
                         createAnimation(mapping.target, { [mapping.prop]: value }, opts, key);
                     }
                 }
-                else if (key === "color" && instance.color) {
-                    animateColor(instance.color, value, opts, key);
+                else if (colorKeys.has(key) && instance[key]) {
+                    animateColor(instance[key], value, opts, key);
                 }
-                else if (key === "emissive" && instance.emissive) {
-                    animateColor(instance.emissive, value, opts, key);
+                else if (instance.uniforms &&
+                    instance.uniforms[key] &&
+                    typeof ((_a = instance.uniforms[key]) === null || _a === void 0 ? void 0 : _a.value) === "number") {
+                    // Animate ShaderMaterial uniforms (uniforms[key].value)
+                    // Note: consumers must useMemo their uniforms prop to prevent
+                    // R3F from overwriting animated values on re-render
+                    createAnimation(instance.uniforms[key], { value: value }, opts, key);
                 }
-                else if (key === "opacity" && instance.opacity !== undefined) {
-                    createAnimation(instance, { opacity: value }, opts, key);
-                }
-                else if (key === "emissiveIntensity" &&
-                    instance.emissiveIntensity !== undefined) {
-                    createAnimation(instance, { emissiveIntensity: value }, opts, key);
-                }
-                else if (key === "roughness" &&
-                    instance.roughness !== undefined) {
-                    createAnimation(instance, { roughness: value }, opts, key);
-                }
-                else if (key === "metalness" &&
-                    instance.metalness !== undefined) {
-                    createAnimation(instance, { metalness: value }, opts, key);
+                else if (key in instance && typeof instance[key] === "number") {
+                    createAnimation(instance, { [key]: value }, opts, key);
                 }
             });
             animationRef.current = {
@@ -212,6 +216,35 @@ function custom(Component) {
             return () => { var _a; return (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.stop(); };
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [animate$1]);
+        // Handle exit animation when presence context signals removal
+        useEffect(() => {
+            var _a;
+            if (!presenceContext || presenceContext.isPresent)
+                return;
+            if (!instanceRef.current || !exitProp) {
+                // No exit animation defined, safe to remove immediately
+                presenceContext.safeToRemove();
+                return;
+            }
+            const resolved = typeof exitProp === "string" ? resolveVariant(exitProp) : exitProp;
+            if (!resolved) {
+                presenceContext.safeToRemove();
+                return;
+            }
+            const resolvedObj = resolved;
+            const { transition: exitTransition } = resolvedObj, exitValues = __rest(resolvedObj, ["transition"]);
+            const effectiveExitTransition = exitTransition || transition;
+            // Store safeToRemove in a ref-like closure so onAnimationComplete can call it
+            const originalComplete = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onAnimationComplete;
+            const safeToRemove = presenceContext.safeToRemove;
+            callbacksRef.current = Object.assign(Object.assign({}, callbacksRef.current), { onAnimationComplete: (variant) => {
+                    originalComplete === null || originalComplete === void 0 ? void 0 : originalComplete(variant);
+                    safeToRemove();
+                } });
+            animateToTarget(exitValues, effectiveExitTransition, true);
+            return () => { var _a; return (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.stop(); };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.isPresent]);
         const gestureProps = {
             captureInstanceState,
             buildTargetFromState,

package/dist/es/render/use-render.mjs

@@ -7,12 +7,13 @@ const useRender = (Component, props, forwardedRef, instanceRef, initialValues) =
      * Create a callback ref that captures the Three.js instance
      */
     const callbackRef = useCallback((instance) => {
+        var _a;
         if (!instance)
             return;
         // Apply initial values immediately to prevent FOUC - but only once
         if (initialValues && !initialValuesAppliedRef.current) {
             initialValuesAppliedRef.current = true;
-            // Property mapping configuration
+            // Transform property mapping
             const propertyMap = {
                 x: (val) => instance.position && (instance.position.x = val),
                 y: (val) => instance.position && (instance.position.y = val),
@@ -25,32 +26,35 @@ const useRender = (Component, props, forwardedRef, instanceRef, initialValues) =
                 scaleX: (val) => instance.scale && (instance.scale.x = val),
                 scaleY: (val) => instance.scale && (instance.scale.y = val),
                 scaleZ: (val) => instance.scale && (instance.scale.z = val),
-                color: (val) => {
-                    const color = instance.color;
-                    if (color && color.set) {
-                        color.set(val);
-                    }
-                },
-                opacity: (val) => instance.opacity !== undefined &&
-                    (instance.opacity = val),
-                emissive: (val) => {
-                    const emissive = instance.emissive;
-                    if (emissive && emissive.set) {
-                        emissive.set(val);
-                    }
-                },
-                emissiveIntensity: (val) => instance.emissiveIntensity !== undefined &&
-                    (instance.emissiveIntensity = val),
-                roughness: (val) => instance.roughness !== undefined &&
-                    (instance.roughness = val),
-                metalness: (val) => instance.metalness !== undefined &&
-                    (instance.metalness = val),
             };
+            // Color-type properties that need .set()
+            const colorKeys = new Set([
+                "color",
+                "emissive",
+                "specular",
+                "sheenColor",
+                "attenuationColor",
+            ]);
             for (const key in initialValues) {
                 const setter = propertyMap[key];
                 if (setter) {
                     setter(initialValues[key]);
                 }
+                else if (colorKeys.has(key)) {
+                    const colorProp = instance[key];
+                    if (colorProp && colorProp.set) {
+                        colorProp.set(initialValues[key]);
+                    }
+                }
+                else if (instance.uniforms &&
+                    instance.uniforms[key] &&
+                    typeof ((_a = instance.uniforms[key]) === null || _a === void 0 ? void 0 : _a.value) === "number") {
+                    // Set ShaderMaterial uniform initial value
+                    instance.uniforms[key].value = initialValues[key];
+                }
+                else if (key in instance && typeof instance[key] === "number") {
+                    instance[key] = initialValues[key];
+                }
             }
         }
         // Store instance in the ref so animations can access it

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { Vector3, Euler, Color, ReactThreeFiber } from '@react-three/fiber';
 import * as THREE from 'three';
-import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import * as react from 'react';
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, ReactNode } from 'react';
 import { MotionValue, MotionProps, ResolvedValues } from 'motion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -51,5 +52,43 @@ interface MotionCameraProps extends ThreeMotionProps {
 }
 declare const MotionCamera: (props: MotionCameraProps) => react_jsx_runtime.JSX.Element;
 
-export { MotionCamera, motion };
+interface PresenceContextValue {
+    isPresent: boolean;
+    safeToRemove: () => void;
+    custom?: unknown;
+}
+/**
+ * Returns presence information for the current component.
+ *
+ * - `isPresent`: Whether the component is currently present in the tree.
+ *   When `false`, the component is exiting and should play its exit animation.
+ * - `safeToRemove`: Call this function when the exit animation is complete
+ *   to signal that the component can be unmounted.
+ *
+ * Returns `null` if the component is not wrapped in `AnimatePresence`.
+ */
+declare function usePresence(): [boolean, () => void] | null;
+
+interface AnimatePresenceProps {
+    children?: ReactNode;
+    /**
+     * If `true`, `AnimatePresence` will only render one component
+     * at a time. The exiting component will finish its exit animation
+     * before the entering component is rendered.
+     *
+     * @default "sync"
+     */
+    mode?: "sync" | "wait";
+    /**
+     * Fires when all exiting children have finished animating out.
+     */
+    onExitComplete?: () => void;
+    /**
+     * Custom data to pass to exiting children via the presence context.
+     */
+    custom?: unknown;
+}
+declare function AnimatePresence({ children, mode, onExitComplete, custom, }: AnimatePresenceProps): react.FunctionComponentElement<react.ProviderProps<PresenceContextValue | null>>[];
+
+export { AnimatePresence, MotionCamera, motion, usePresence };
 export type { AcceptMotionValues, ForwardRefComponent, ThreeElement, ThreeMotionComponents, ThreeMotionProps, ThreeRenderState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "r3f-motion",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "A simple and powerful React animation library for @react-three/fiber leveraging motion.dev",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.mjs",
@@ -50,6 +50,7 @@
     "postpublish": "git push --tags"
   },
   "dependencies": {
+    "@storybook/addon-docs": "^10.2.10",
     "motion": "^12.29.0",
     "react-merge-refs": "^3.0.2"
   },