use-clock.ts

import {
  MotionValue,
  useAnimationFrame,
  useMotionValue,
} from "framer-motion";
import React from "react";

export interface Clock {
  value: MotionValue<number>;
  setRate: (rate: number) => void;
}

export const useClock = ({ defaultValue = 0, rate = 1 } = {}): Clock => {
  const value = useMotionValue(defaultValue);
  const rateRef = React.useRef(rate);
  useAnimationFrame((_, delta) => {
    value.set(value.get() + delta * rateRef.current);
  });
  return {
    value,
    setRate: (rate: number) => {
      rateRef.current = rate;
    },
  };
};