51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1a67,"use client" import { useEffect, useRef, useState, type FC } from "react" import { motion, useSpring } from "motion/react" interface Position { x: number y: number } export interface SmoothCursorProps { cursor?: React.ReactNode springConfig?: { damping: number stiffness: number mass: number restDelta: number } } const DESKTOP_POINTER_QUERY = "(any-hover: hover) and (any-pointer: fine)" function isTrackablePointer(pointerType: string) { return pointerType !== "touch" } const DefaultCursorSVG: FC = () => { return ( ) } export function SmoothCursor({ cursor = , springConfig = { damping: 45, stiffness: 400, mass: 1, restDelta: 0.001, }, }: SmoothCursorProps) { const lastMousePos = useRef({ x: 0, y: 0 }) const velocity = useRef({ x: 0, y: 0 }) const lastUpdateTime = useRef(Date.now()) const previousAngle = useRef(0) const accumulatedRotation = useRef(0) const [isEnabled, setIsEnabled] = useState(false) const [isVisible, setIsVisible] = useState(false) const cursorX = useSpring(0, springConfig) const cursorY = useSpring(0, springConfig) const rotation = useSpring(0, { ...springConfig, damping: 60, stiffness: 300, }) const scale = useSpring(1, { ...springConfig, stiffness: 500, damping: 35, }) useEffect(() => { const mediaQuery = window.matchMedia(DESKTOP_POINTER_QUERY) const updateEnabled = () => { const nextIsEnabled = mediaQuery.matches setIsEnabled(nextIsEnabled) if (!nextIsEnabled) { setIsVisible(false) } } updateEnabled() mediaQuery.addEventListener("change", updateEnabled) return () => { mediaQuery.removeEventListener("change", updateEnabled) } }, []) useEffect(() => { if (!isEnabled) { return } let timeout: ReturnType | null = null const updateVelocity = (currentPos: Position) => { const currentTime = Date.now() const deltaTime = currentTime - lastUpdateTime.current if (deltaTime > 0) { velocity.current = { x: (currentPos.x - lastMousePos.current.x) / deltaTime, y: (currentPos.y - lastMousePos.current.y) / deltaTime, } } lastUpdateTime.current = currentTime lastMousePos.current = currentPos } const smoothPointerMove = (e: PointerEvent) => { if (!isTrackablePointer(e.pointerType)) { return } setIsVisible(true) const currentPos = { x: e.clientX, y: e.clientY } updateVelocity(currentPos) const speed = Math.sqrt( Math.pow(velocity.current.x, 2) + Math.pow(velocity.current.y, 2) ) cursorX.set(currentPos.x) cursorY.set(currentPos.y) if (speed > 0.1) { const currentAngle = Math.atan2(velocity.current.y, velocity.current.x) * (180 / Math.PI) + 90 let angleDiff = currentAngle - previousAngle.current if (angleDiff > 180) angleDiff -= 360 if (angleDiff < -180) angleDiff += 360 accumulatedRotation.current += angleDiff rotation.set(accumulatedRotation.current) previousAngle.current = currentAngle scale.set(0.95) if (timeout !== null) { clearTimeout(timeout) } timeout = setTimeout(() => { scale.set(1) }, 150) } } let rafId = 0 const throttledPointerMove = (e: PointerEvent) => { if (!isTrackablePointer(e.pointerType)) { return } if (rafId) return rafId = requestAnimationFrame(() => { smoothPointerMove(e) rafId = 0 }) } document.body.style.cursor = "none" window.addEventListener("pointermove", throttledPointerMove, { passive: true, }) return () => { window.removeEventListener("pointermove", throttledPointerMove) document.body.style.cursor = "auto" if (rafId) cancelAnimationFrame(rafId) if (timeout !== null) { clearTimeout(timeout) } } }, [cursorX, cursorY, rotation, scale, isEnabled]) if (!isEnabled) { return null } return ( {cursor} ) } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@magicui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/magicui/smooth-cursor.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]