import { Box, useEventListener } from "@chakra-ui/react"; import { useSpring } from "framer-motion"; import { useState, useEffect, useRef, useContext, createContext, useMemo, useCallback } from "react"; import { useMouse, MouseProvider } from "./MouseProvider"; import { MotionBox } from "./chakra"; const CursorContext = createContext(null); export const useCursor = () => { return useContext(CursorContext); }; const CursorProviderInner = ({ children }) => { const [isActive, setIsActive] = useState(null); const [pointerDown, setPointerDown] = useState(false); const [data, setData] = useState({}); const { position, velocity } = useMouse(); const activate = useCallback( (data) => { setIsActive(true); setData((prev) => ({ ...prev, ...data })); }, [setIsActive, setData] ); const deactivate = useCallback( (data) => { setIsActive(false); setData((prev) => { const next = { ...prev }; Object.keys(data).forEach((key) => { delete next[key]; }); return next; }); }, [setIsActive, setData] ); useEventListener("pointerdown", () => { setPointerDown(true); }); useEventListener("pointerup", () => { setPointerDown(false); }); const api = useMemo( () => ({ position, velocity, activate, deactivate, isActive, pointerDown, data }), [position, velocity, activate, deactivate, isActive, pointerDown, data] ); return ( {children} ); }; const CursorProvider = (props) => { return ( ); }; const CursorFollower = ({ children, spring }) => { const cursor = useCursor(); const springs = { x: useSpring(cursor.position.x, spring || { mass: 0.01 }), y: useSpring(cursor.position.y, spring || { mass: 0.01 }) }; return ( {typeof children === "function" ? children(cursor) : children} ); }; export const CursorTarget = ({ children, data = {}, ...otherProps }) => { const ref = useRef(null); const cursor = useCursor(); useEffect(() => { return () => cursor.deactivate(data); }, []); return ( cursor.activate(data)} onMouseOut={() => cursor.deactivate(data)} {...otherProps} > {children} ); }; export const Cursor = { Target: CursorTarget, Follower: CursorFollower, Provider: CursorProvider };

SquashStretchBox