framer-motion 5.4.0-beta.4 → 5.4.0-beta.5

package/dist/es/render/three/utils/use-time.mjs

@@ -0,0 +1,10 @@
+import { useFrame } from '@react-three/fiber';
+import { useMotionValue } from '../../../value/use-motion-value.mjs';
+
+function useTime() {
+    var time = useMotionValue(0);
+    useFrame(function (state) { return time.set(state.clock.getElapsedTime()); });
+    return time;
+}
+
+export { useTime };

package/dist/es/three-entry.mjs

@@ -1,2 +1,3 @@
 export { motion } from './render/three/motion.mjs';
 export { MotionCanvas } from './components/MotionCanvas/index.mjs';
+export { useTime } from './render/three/utils/use-time.mjs';

package/dist/framer-motion-three.cjs.js

@@ -3029,5 +3029,44 @@ function MotionCanvas(_a) {
         React__namespace.createElement(MotionContext.Provider, { value: motionContext }, children)));
 }
 
+/**
+ * Creates a `MotionValue` to track the state and velocity of a value.
+ *
+ * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
+ *
+ * ```jsx
+ * export const MyComponent = () => {
+ *   const scale = useMotionValue(1)
+ *
+ *   return <motion.div style={{ scale }} />
+ * }
+ * ```
+ *
+ * @param initial - The initial state.
+ *
+ * @public
+ */
+function useMotionValue(initial) {
+    var value = useConstant(function () { return motionValue(initial); });
+    /**
+     * If this motion value is being used in static mode, like on
+     * the Framer canvas, force components to rerender when the motion
+     * value is updated.
+     */
+    var isStatic = React.useContext(MotionConfigContext).isStatic;
+    if (isStatic) {
+        var _a = tslib.__read(React.useState(initial), 2), setLatest_1 = _a[1];
+        React.useEffect(function () { return value.onChange(setLatest_1); }, []);
+    }
+    return value;
+}
+
+function useTime() {
+    var time = useMotionValue(0);
+    fiber.useFrame(function (state) { return time.set(state.clock.getElapsedTime()); });
+    return time;
+}
+
 exports.MotionCanvas = MotionCanvas;
 exports.motion = motion;
+exports.useTime = useTime;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "5.4.0-beta.4",
+    "version": "5.4.0-beta.5",
     "description": "A simple and powerful React animation library",
     "main": "dist/framer-motion.cjs.js",
     "module": "dist/es/index.mjs",

package/types/render/three/utils/use-time.d.ts

@@ -0,0 +1 @@
+export declare function useTime(): import("../../..").MotionValue<number>;

package/types/three-entry.d.ts

@@ -1,2 +1,3 @@
 export { motion } from "./render/three/motion";
 export { MotionCanvas, MotionCanvasProps } from "./components/MotionCanvas";
+export { useTime } from "./render/three/utils/use-time";