import { motion, useMotionValueEvent, useScroll } from "framer-motion"; import { ComponentProps, RefObject, useRef, useState } from "react"; export const Globe = ({ ...props }: ComponentProps & {}) => { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref as unknown as RefObject, }); const [animate, setAnimate] = useState<"rotated" | "normal">("normal"); useMotionValueEvent(scrollYProgress, "change", (progress) => { const newState = progress < 0.9 ? "rotated" : "normal"; if (newState !== animate) { setAnimate(newState); } }); return ( ); };