motion 12.18.1 → 12.19.0

package/dist/es/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs

@@ -1,47 +0,0 @@
-import { useState } from 'react';
-import { initPrefersReducedMotion } from './index.mjs';
-import { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';
-import { warnOnce } from '../../../../../motion-utils/dist/es/warn-once.mjs';
-
-/**
- * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
- *
- * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
- * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
- *
- * It will actively respond to changes and re-render your components with the latest setting.
- *
- * ```jsx
- * export function Sidebar({ isOpen }) {
- *   const shouldReduceMotion = useReducedMotion()
- *   const closedX = shouldReduceMotion ? 0 : "-100%"
- *
- *   return (
- *     <motion.div animate={{
- *       opacity: isOpen ? 1 : 0,
- *       x: isOpen ? 0 : closedX
- *     }} />
- *   )
- * }
- * ```
- *
- * @return boolean
- *
- * @public
- */
-function useReducedMotion() {
-    /**
-     * Lazy initialisation of prefersReducedMotion
-     */
-    !hasReducedMotionListener.current && initPrefersReducedMotion();
-    const [shouldReduceMotion] = useState(prefersReducedMotion.current);
-    if (process.env.NODE_ENV !== "production") {
-        warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
-    }
-    /**
-     * TODO See if people miss automatically updating shouldReduceMotion setting
-     */
-    return shouldReduceMotion;
-}
-
-export { useReducedMotion };

package/dist/es/framer-motion/dist/es/utils/shallow-compare.mjs

@@ -1,14 +0,0 @@
-function shallowCompare(next, prev) {
-    if (!Array.isArray(prev))
-        return false;
-    const prevLength = prev.length;
-    if (prevLength !== next.length)
-        return false;
-    for (let i = 0; i < prevLength; i++) {
-        if (prev[i] !== next[i])
-            return false;
-    }
-    return true;
-}
-
-export { shallowCompare };

package/dist/es/framer-motion/dist/es/utils/use-animation-frame.mjs

@@ -1,21 +0,0 @@
-import { useRef, useContext, useEffect } from 'react';
-import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
-import { frame, cancelFrame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
-
-function useAnimationFrame(callback) {
-    const initialTimestamp = useRef(0);
-    const { isStatic } = useContext(MotionConfigContext);
-    useEffect(() => {
-        if (isStatic)
-            return;
-        const provideTimeSinceStart = ({ timestamp, delta }) => {
-            if (!initialTimestamp.current)
-                initialTimestamp.current = timestamp;
-            callback(timestamp - initialTimestamp.current, delta);
-        };
-        frame.update(provideTimeSinceStart, true);
-        return () => cancelFrame(provideTimeSinceStart);
-    }, [callback]);
-}
-
-export { useAnimationFrame };

package/dist/es/framer-motion/dist/es/utils/use-constant.mjs

@@ -1,18 +0,0 @@
-import { useRef } from 'react';
-
-/**
- * Creates a constant value over the lifecycle of a component.
- *
- * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
- * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
- * you can ensure that initialisers don't execute twice or more.
- */
-function useConstant(init) {
-    const ref = useRef(null);
-    if (ref.current === null) {
-        ref.current = init();
-    }
-    return ref.current;
-}
-
-export { useConstant };

package/dist/es/framer-motion/dist/es/utils/use-cycle.mjs

@@ -1,47 +0,0 @@
-import { useRef, useState, useCallback } from 'react';
-import { wrap } from '../../../../motion-utils/dist/es/wrap.mjs';
-
-/**
- * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
- *
- * An index value can be passed to the returned `cycle` function to cycle to a specific index.
- *
- * ```jsx
- * import * as React from "react"
- * import { motion, useCycle } from "framer-motion"
- *
- * export const MyComponent = () => {
- *   const [x, cycleX] = useCycle(0, 50, 100)
- *
- *   return (
- *     <motion.div
- *       animate={{ x: x }}
- *       onTap={() => cycleX()}
- *      />
- *    )
- * }
- * ```
- *
- * @param items - items to cycle through
- * @returns [currentState, cycleState]
- *
- * @public
- */
-function useCycle(...items) {
-    const index = useRef(0);
-    const [item, setItem] = useState(items[index.current]);
-    const runCycle = useCallback((next) => {
-        index.current =
-            typeof next !== "number"
-                ? wrap(0, items.length, index.current + 1)
-                : next;
-        setItem(items[index.current]);
-    }, 
-    // The array will change on each call, but by putting items.length at
-    // the front of this array, we guarantee the dependency comparison will match up
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [items.length, ...items]);
-    return [item, runCycle];
-}
-
-export { useCycle };

package/dist/es/framer-motion/dist/es/utils/use-force-update.mjs

@@ -1,19 +0,0 @@
-import { useState, useCallback } from 'react';
-import { useIsMounted } from './use-is-mounted.mjs';
-import { frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
-
-function useForceUpdate() {
-    const isMounted = useIsMounted();
-    const [forcedRenderCount, setForcedRenderCount] = useState(0);
-    const forceRender = useCallback(() => {
-        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
-    }, [forcedRenderCount]);
-    /**
-     * Defer this to the end of the next animation frame in case there are multiple
-     * synchronous calls.
-     */
-    const deferredForceRender = useCallback(() => frame.postRender(forceRender), [forceRender]);
-    return [deferredForceRender, forcedRenderCount];
-}
-
-export { useForceUpdate };

package/dist/es/framer-motion/dist/es/utils/use-in-view.mjs

@@ -1,23 +0,0 @@
-import { useState, useEffect } from 'react';
-import { inView } from '../render/dom/viewport/index.mjs';
-
-function useInView(ref, { root, margin, amount, once = false, initial = false, } = {}) {
-    const [isInView, setInView] = useState(initial);
-    useEffect(() => {
-        if (!ref.current || (once && isInView))
-            return;
-        const onEnter = () => {
-            setInView(true);
-            return once ? undefined : () => setInView(false);
-        };
-        const options = {
-            root: (root && root.current) || undefined,
-            margin,
-            amount,
-        };
-        return inView(ref.current, onEnter, options);
-    }, [root, ref, margin, once, amount]);
-    return isInView;
-}
-
-export { useInView };

package/dist/es/framer-motion/dist/es/utils/use-instant-transition.mjs

@@ -1,41 +0,0 @@
-import { useRef, useEffect } from 'react';
-import { useInstantLayoutTransition } from '../projection/use-instant-layout-transition.mjs';
-import { useForceUpdate } from './use-force-update.mjs';
-import { frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
-import { MotionGlobalConfig } from '../../../../motion-utils/dist/es/global-config.mjs';
-
-function useInstantTransition() {
-    const [forceUpdate, forcedRenderCount] = useForceUpdate();
-    const startInstantLayoutTransition = useInstantLayoutTransition();
-    const unlockOnFrameRef = useRef(-1);
-    useEffect(() => {
-        /**
-         * Unblock after two animation frames, otherwise this will unblock too soon.
-         */
-        frame.postRender(() => frame.postRender(() => {
-            /**
-             * If the callback has been called again after the effect
-             * triggered this 2 frame delay, don't unblock animations. This
-             * prevents the previous effect from unblocking the current
-             * instant transition too soon. This becomes more likely when
-             * used in conjunction with React.startTransition().
-             */
-            if (forcedRenderCount !== unlockOnFrameRef.current)
-                return;
-            MotionGlobalConfig.instantAnimations = false;
-        }));
-    }, [forcedRenderCount]);
-    return (callback) => {
-        startInstantLayoutTransition(() => {
-            MotionGlobalConfig.instantAnimations = true;
-            forceUpdate();
-            callback();
-            unlockOnFrameRef.current = forcedRenderCount + 1;
-        });
-    };
-}
-function disableInstantTransitions() {
-    MotionGlobalConfig.instantAnimations = false;
-}
-
-export { disableInstantTransitions, useInstantTransition };

package/dist/es/framer-motion/dist/es/utils/use-is-mounted.mjs

@@ -1,15 +0,0 @@
-import { useRef } from 'react';
-import { useIsomorphicLayoutEffect } from './use-isomorphic-effect.mjs';
-
-function useIsMounted() {
-    const isMounted = useRef(false);
-    useIsomorphicLayoutEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-    return isMounted;
-}
-
-export { useIsMounted };

package/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs

@@ -1,6 +0,0 @@
-import { useLayoutEffect, useEffect } from 'react';
-import { isBrowser } from './is-browser.mjs';
-
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-
-export { useIsomorphicLayoutEffect };

package/dist/es/framer-motion/dist/es/utils/use-motion-value-event.mjs

@@ -1,13 +0,0 @@
-import { useInsertionEffect } from 'react';
-
-function useMotionValueEvent(value, event, callback) {
-    /**
-     * useInsertionEffect will create subscriptions before any other
-     * effects will run. Effects run upwards through the tree so it
-     * can be that binding a useLayoutEffect higher up the tree can
-     * miss changes from lower down the tree.
-     */
-    useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
-}
-
-export { useMotionValueEvent };

package/dist/es/framer-motion/dist/es/utils/use-unmount-effect.mjs

@@ -1,7 +0,0 @@
-import { useEffect } from 'react';
-
-function useUnmountEffect(callback) {
-    return useEffect(() => () => callback(), []);
-}
-
-export { useUnmountEffect };

package/dist/es/framer-motion/dist/es/value/scroll/use-element-scroll.mjs

@@ -1,14 +0,0 @@
-import { useScroll } from '../use-scroll.mjs';
-import { warnOnce } from '../../../../../motion-utils/dist/es/warn-once.mjs';
-
-/**
- * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
- */
-function useElementScroll(ref) {
-    if (process.env.NODE_ENV === "development") {
-        warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
-    }
-    return useScroll({ container: ref });
-}
-
-export { useElementScroll };

package/dist/es/framer-motion/dist/es/value/scroll/use-viewport-scroll.mjs

@@ -1,14 +0,0 @@
-import { useScroll } from '../use-scroll.mjs';
-import { warnOnce } from '../../../../../motion-utils/dist/es/warn-once.mjs';
-
-/**
- * @deprecated useViewportScroll is deprecated. Convert to useScroll()
- */
-function useViewportScroll() {
-    if (process.env.NODE_ENV !== "production") {
-        warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
-    }
-    return useScroll();
-}
-
-export { useViewportScroll };

package/dist/es/framer-motion/dist/es/value/use-combine-values.mjs

@@ -1,37 +0,0 @@
-import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
-import { useMotionValue } from './use-motion-value.mjs';
-import { cancelFrame, frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
-
-function useCombineMotionValues(values, combineValues) {
-    /**
-     * Initialise the returned motion value. This remains the same between renders.
-     */
-    const value = useMotionValue(combineValues());
-    /**
-     * Create a function that will update the template motion value with the latest values.
-     * This is pre-bound so whenever a motion value updates it can schedule its
-     * execution in Framesync. If it's already been scheduled it won't be fired twice
-     * in a single frame.
-     */
-    const updateValue = () => value.set(combineValues());
-    /**
-     * Synchronously update the motion value with the latest values during the render.
-     * This ensures that within a React render, the styles applied to the DOM are up-to-date.
-     */
-    updateValue();
-    /**
-     * Subscribe to all motion values found within the template. Whenever any of them change,
-     * schedule an update.
-     */
-    useIsomorphicLayoutEffect(() => {
-        const scheduleUpdate = () => frame.preRender(updateValue, false, true);
-        const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
-        return () => {
-            subscriptions.forEach((unsubscribe) => unsubscribe());
-            cancelFrame(updateValue);
-        };
-    });
-    return value;
-}
-
-export { useCombineMotionValues };

package/dist/es/framer-motion/dist/es/value/use-computed.mjs

@@ -1,19 +0,0 @@
-import { useCombineMotionValues } from './use-combine-values.mjs';
-import { collectMotionValues } from '../../../../motion-dom/dist/es/value/index.mjs';
-
-function useComputed(compute) {
-    /**
-     * Open session of collectMotionValues. Any MotionValue that calls get()
-     * will be saved into this array.
-     */
-    collectMotionValues.current = [];
-    compute();
-    const value = useCombineMotionValues(collectMotionValues.current, compute);
-    /**
-     * Synchronously close session of collectMotionValues.
-     */
-    collectMotionValues.current = undefined;
-    return value;
-}
-
-export { useComputed };

package/dist/es/framer-motion/dist/es/value/use-inverted-scale.mjs

@@ -1,52 +0,0 @@
-import { useContext } from 'react';
-import { MotionContext } from '../context/MotionContext/index.mjs';
-import { useMotionValue } from './use-motion-value.mjs';
-import { useTransform } from './use-transform.mjs';
-import { invariant, warning } from '../../../../motion-utils/dist/es/errors.mjs';
-
-// Keep things reasonable and avoid scale: Infinity. In practise we might need
-// to add another value, opacity, that could interpolate scaleX/Y [0,0.01] => [0,1]
-// to simply hide content at unreasonable scales.
-const maxScale = 100000;
-const invertScale = (scale) => scale > 0.001 ? 1 / scale : maxScale;
-let hasWarned = false;
-/**
- * Returns a `MotionValue` each for `scaleX` and `scaleY` that update with the inverse
- * of their respective parent scales.
- *
- * This is useful for undoing the distortion of content when scaling a parent component.
- *
- * By default, `useInvertedScale` will automatically fetch `scaleX` and `scaleY` from the nearest parent.
- * By passing other `MotionValue`s in as `useInvertedScale({ scaleX, scaleY })`, it will invert the output
- * of those instead.
- *
- * ```jsx
- * const MyComponent = () => {
- *   const { scaleX, scaleY } = useInvertedScale()
- *   return <motion.div style={{ scaleX, scaleY }} />
- * }
- * ```
- *
- * @deprecated
- */
-function useInvertedScale(scale) {
-    let parentScaleX = useMotionValue(1);
-    let parentScaleY = useMotionValue(1);
-    const { visualElement } = useContext(MotionContext);
-    invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
-    warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
-    hasWarned = true;
-    if (scale) {
-        parentScaleX = scale.scaleX || parentScaleX;
-        parentScaleY = scale.scaleY || parentScaleY;
-    }
-    else if (visualElement) {
-        parentScaleX = visualElement.getValue("scaleX", 1);
-        parentScaleY = visualElement.getValue("scaleY", 1);
-    }
-    const scaleX = useTransform(parentScaleX, invertScale);
-    const scaleY = useTransform(parentScaleY, invertScale);
-    return { scaleX, scaleY };
-}
-
-export { invertScale, useInvertedScale };

package/dist/es/framer-motion/dist/es/value/use-motion-template.mjs

@@ -1,45 +0,0 @@
-import { useCombineMotionValues } from './use-combine-values.mjs';
-import { isMotionValue } from '../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
-
-/**
- * Combine multiple motion values into a new one using a string template literal.
- *
- * ```jsx
- * import {
- *   motion,
- *   useSpring,
- *   useMotionValue,
- *   useMotionTemplate
- * } from "framer-motion"
- *
- * function Component() {
- *   const shadowX = useSpring(0)
- *   const shadowY = useMotionValue(0)
- *   const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
- *
- *   return <motion.div style={{ filter: shadow }} />
- * }
- * ```
- *
- * @public
- */
-function useMotionTemplate(fragments, ...values) {
-    /**
-     * Create a function that will build a string from the latest motion values.
-     */
-    const numFragments = fragments.length;
-    function buildValue() {
-        let output = ``;
-        for (let i = 0; i < numFragments; i++) {
-            output += fragments[i];
-            const value = values[i];
-            if (value) {
-                output += isMotionValue(value) ? value.get() : value;
-            }
-        }
-        return output;
-    }
-    return useCombineMotionValues(values.filter(isMotionValue), buildValue);
-}
-
-export { useMotionTemplate };

package/dist/es/framer-motion/dist/es/value/use-motion-value.mjs

@@ -1,38 +0,0 @@
-import { useContext, useState, useEffect } from 'react';
-import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
-import { useConstant } from '../utils/use-constant.mjs';
-import { motionValue } from '../../../../motion-dom/dist/es/value/index.mjs';
-
-/**
- * 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) {
-    const value = useConstant(() => 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.
-     */
-    const { isStatic } = useContext(MotionConfigContext);
-    if (isStatic) {
-        const [, setLatest] = useState(initial);
-        useEffect(() => value.on("change", setLatest), []);
-    }
-    return value;
-}
-
-export { useMotionValue };

package/dist/es/framer-motion/dist/es/value/use-scroll.mjs

@@ -1,39 +0,0 @@
-import { useEffect } from 'react';
-import { scroll } from '../render/dom/scroll/index.mjs';
-import { useConstant } from '../utils/use-constant.mjs';
-import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
-import { warning } from '../../../../motion-utils/dist/es/errors.mjs';
-import { motionValue } from '../../../../motion-dom/dist/es/value/index.mjs';
-
-function refWarning(name, ref) {
-    warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
-}
-const createScrollMotionValues = () => ({
-    scrollX: motionValue(0),
-    scrollY: motionValue(0),
-    scrollXProgress: motionValue(0),
-    scrollYProgress: motionValue(0),
-});
-function useScroll({ container, target, layoutEffect = true, ...options } = {}) {
-    const values = useConstant(createScrollMotionValues);
-    const useLifecycleEffect = layoutEffect
-        ? useIsomorphicLayoutEffect
-        : useEffect;
-    useLifecycleEffect(() => {
-        refWarning("target", target);
-        refWarning("container", container);
-        return scroll((_progress, { x, y, }) => {
-            values.scrollX.set(x.current);
-            values.scrollXProgress.set(x.progress);
-            values.scrollY.set(y.current);
-            values.scrollYProgress.set(y.progress);
-        }, {
-            ...options,
-            container: container?.current || undefined,
-            target: target?.current || undefined,
-        });
-    }, [container, target, JSON.stringify(options.offset)]);
-    return values;
-}
-
-export { useScroll };

package/dist/es/framer-motion/dist/es/value/use-spring.mjs

@@ -1,22 +0,0 @@
-import { useContext, useInsertionEffect } from 'react';
-import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
-import { useMotionValue } from './use-motion-value.mjs';
-import { useTransform } from './use-transform.mjs';
-import { attachSpring } from '../../../../motion-dom/dist/es/value/spring-value.mjs';
-import { isMotionValue } from '../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
-
-function useSpring(source, options = {}) {
-    const { isStatic } = useContext(MotionConfigContext);
-    const getFromSource = () => (isMotionValue(source) ? source.get() : source);
-    // isStatic will never change, allowing early hooks return
-    if (isStatic) {
-        return useTransform(getFromSource);
-    }
-    const value = useMotionValue(getFromSource());
-    useInsertionEffect(() => {
-        return attachSpring(value, source, options);
-    }, [value, JSON.stringify(options)]);
-    return value;
-}
-
-export { useSpring };

package/dist/es/framer-motion/dist/es/value/use-time.mjs

@@ -1,10 +0,0 @@
-import { useAnimationFrame } from '../utils/use-animation-frame.mjs';
-import { useMotionValue } from './use-motion-value.mjs';
-
-function useTime() {
-    const time = useMotionValue(0);
-    useAnimationFrame((t) => time.set(t));
-    return time;
-}
-
-export { useTime };

package/dist/es/framer-motion/dist/es/value/use-transform.mjs

@@ -1,29 +0,0 @@
-import { useConstant } from '../utils/use-constant.mjs';
-import { useCombineMotionValues } from './use-combine-values.mjs';
-import { useComputed } from './use-computed.mjs';
-import { transform } from '../../../../motion-dom/dist/es/utils/transform.mjs';
-
-function useTransform(input, inputRangeOrTransformer, outputRange, options) {
-    if (typeof input === "function") {
-        return useComputed(input);
-    }
-    const transformer = typeof inputRangeOrTransformer === "function"
-        ? inputRangeOrTransformer
-        : transform(inputRangeOrTransformer, outputRange, options);
-    return Array.isArray(input)
-        ? useListTransform(input, transformer)
-        : useListTransform([input], ([latest]) => transformer(latest));
-}
-function useListTransform(values, transformer) {
-    const latest = useConstant(() => []);
-    return useCombineMotionValues(values, () => {
-        latest.length = 0;
-        const numValues = values.length;
-        for (let i = 0; i < numValues; i++) {
-            latest[i] = values[i].get();
-        }
-        return transformer(latest);
-    });
-}
-
-export { useTransform };

package/dist/es/framer-motion/dist/es/value/use-velocity.mjs

@@ -1,35 +0,0 @@
-import { useMotionValueEvent } from '../utils/use-motion-value-event.mjs';
-import { useMotionValue } from './use-motion-value.mjs';
-import { frame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
-
-/**
- * Creates a `MotionValue` that updates when the velocity of the provided `MotionValue` changes.
- *
- * ```javascript
- * const x = useMotionValue(0)
- * const xVelocity = useVelocity(x)
- * const xAcceleration = useVelocity(xVelocity)
- * ```
- *
- * @public
- */
-function useVelocity(value) {
-    const velocity = useMotionValue(value.getVelocity());
-    const updateVelocity = () => {
-        const latest = value.getVelocity();
-        velocity.set(latest);
-        /**
-         * If we still have velocity, schedule an update for the next frame
-         * to keep checking until it is zero.
-         */
-        if (latest)
-            frame.update(updateVelocity);
-    };
-    useMotionValueEvent(value, "change", () => {
-        // Schedule an update to this value at the end of the current frame.
-        frame.update(updateVelocity, false, true);
-    });
-    return velocity;
-}
-
-export { useVelocity };