50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T285e,'use client'; import * as React from 'react'; import { motion, useMotionValue, useSpring, AnimatePresence, type HTMLMotionProps, type SpringOptions, } from 'motion/react'; import { getStrictContext } from '@/lib/get-strict-context'; import { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot'; type CursorContextType = { cursorPos: { x: number; y: number }; active: boolean; global: boolean; containerRef: React.RefObject; cursorRef: React.RefObject; }; const [LocalCursorProvider, useCursor] = getStrictContext('CursorContext'); type CursorProviderProps = { children: React.ReactNode; global?: boolean; }; function CursorProvider({ children, global = false }: CursorProviderProps) { const [cursorPos, setCursorPos] = React.useState({ x: 0, y: 0 }); const [active, setActive] = React.useState(false); const containerRef = React.useRef(null); const cursorRef = React.useRef(null); React.useEffect(() => { const id = '__cursor_none_style__'; if (document.getElementById(id)) return; const style = document.createElement('style'); style.id = id; style.textContent = ` .animate-ui-cursor-none, .animate-ui-cursor-none * { cursor: none !important; } `; document.head.appendChild(style); }, []); React.useEffect(() => { let removeListeners: () => void; if (global) { const handlePointerMove = (e: PointerEvent) => { setCursorPos({ x: e.clientX, y: e.clientY }); setActive(true); }; const handlePointerOut = (e: PointerEvent | MouseEvent) => { if (e instanceof PointerEvent && e.relatedTarget === null) { setActive(false); } }; const handleVisibilityChange = () => { if (document.visibilityState === 'hidden') setActive(false); }; window.addEventListener('pointermove', handlePointerMove, { passive: true, }); window.addEventListener('pointerout', handlePointerOut, { passive: true, }); window.addEventListener('mouseout', handlePointerOut, { passive: true }); document.addEventListener('visibilitychange', handleVisibilityChange); removeListeners = () => { window.removeEventListener('pointermove', handlePointerMove); window.removeEventListener('pointerout', handlePointerOut); window.removeEventListener('mouseout', handlePointerOut); document.removeEventListener( 'visibilitychange', handleVisibilityChange, ); }; } else { if (!containerRef.current) return; const parent = containerRef.current.parentElement; if (!parent) return; if (getComputedStyle(parent).position === 'static') { parent.style.position = 'relative'; } const handlePointerMove = (e: PointerEvent) => { const rect = parent.getBoundingClientRect(); setCursorPos({ x: e.clientX - rect.left, y: e.clientY - rect.top }); setActive(true); }; const handlePointerOut = (e: PointerEvent | MouseEvent) => { if ( e.relatedTarget === null || !(parent as Node).contains(e.relatedTarget as Node) ) { setActive(false); } }; parent.addEventListener('pointermove', handlePointerMove, { passive: true, }); parent.addEventListener('pointerout', handlePointerOut, { passive: true, }); parent.addEventListener('mouseout', handlePointerOut, { passive: true }); removeListeners = () => { parent.removeEventListener('pointermove', handlePointerMove); parent.removeEventListener('pointerout', handlePointerOut); parent.removeEventListener('mouseout', handlePointerOut); }; } return removeListeners; }, [global]); return ( {children} ); } type CursorContainerProps = WithAsChild>; function CursorContainer({ ref, asChild = false, ...props }: CursorContainerProps) { const { containerRef, global, active } = useCursor(); React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement); const Component = asChild ? Slot : motion.div; return ( ); } type CursorProps = WithAsChild< HTMLMotionProps<'div'> & { children: React.ReactNode; } >; function Cursor({ ref, asChild = false, style, ...props }: CursorProps) { const { cursorPos, active, containerRef, cursorRef, global } = useCursor(); React.useImperativeHandle(ref, () => cursorRef.current as HTMLDivElement); const x = useMotionValue(0); const y = useMotionValue(0); React.useEffect(() => { const target = global ? document.documentElement : containerRef.current?.parentElement; if (!target) return; if (active) { target.classList.add('animate-ui-cursor-none'); } else { target.classList.remove('animate-ui-cursor-none'); } return () => { target.classList.remove('animate-ui-cursor-none'); }; }, [active, global, containerRef]); React.useEffect(() => { x.set(cursorPos.x); y.set(cursorPos.y); }, [cursorPos, x, y]); const Component = asChild ? Slot : motion.div; return ( {active && ( )} ); } type CursorFollowSide = 'top' | 'right' | 'bottom' | 'left'; type CursorFollowAlign = 'start' | 'center' | 'end'; type CursorFollowProps = WithAsChild< Omit, 'transition'> & { side?: CursorFollowSide; sideOffset?: number; align?: CursorFollowAlign; alignOffset?: number; transition?: SpringOptions; children: React.ReactNode; } >; function CursorFollow({ ref, asChild = false, side = 'bottom', sideOffset = 0, align = 'end', alignOffset = 0, style, transition = { stiffness: 500, damping: 50, bounce: 0 }, ...props }: CursorFollowProps) { const { cursorPos, active, cursorRef, global } = useCursor(); const cursorFollowRef = React.useRef(null); React.useImperativeHandle( ref, () => cursorFollowRef.current as HTMLDivElement, ); const x = useMotionValue(0); const y = useMotionValue(0); const springX = useSpring(x, transition); const springY = useSpring(y, transition); const calculateOffset = React.useCallback(() => { const rect = cursorFollowRef.current?.getBoundingClientRect(); const width = rect?.width ?? 0; const height = rect?.height ?? 0; let offsetX = 0; let offsetY = 0; switch (side) { case 'top': offsetY = height + sideOffset; switch (align) { case 'start': offsetX = width + alignOffset; break; case 'center': offsetX = width / 2; break; case 'end': offsetX = -alignOffset; break; } break; case 'bottom': offsetY = -sideOffset; switch (align) { case 'start': offsetX = width + alignOffset; break; case 'center': offsetX = width / 2; break; case 'end': offsetX = -alignOffset; break; } break; case 'left': offsetX = width + sideOffset; switch (align) { case 'start': offsetY = height + alignOffset; break; case 'center': offsetY = height / 2; break; case 'end': offsetY = -alignOffset; break; } break; case 'right': offsetX = -sideOffset; switch (align) { case 'start': offsetY = height + alignOffset; break; case 'center': offsetY = height / 2; break; case 'end': offsetY = -alignOffset; break; } break; } return { x: offsetX, y: offsetY }; }, [side, align, sideOffset, alignOffset]); React.useEffect(() => { const offset = calculateOffset(); const cursorRect = cursorRef.current?.getBoundingClientRect(); const cursorWidth = cursorRect?.width ?? 20; const cursorHeight = cursorRect?.height ?? 20; x.set(cursorPos.x - offset.x + cursorWidth / 2); y.set(cursorPos.y - offset.y + cursorHeight / 2); }, [calculateOffset, cursorPos, cursorRef, x, y]); const Component = asChild ? Slot : motion.div; return ( {active && ( )} ); } export { CursorProvider, Cursor, CursorContainer, CursorFollow, useCursor, type CursorProviderProps, type CursorProps, type CursorContainerProps, type CursorFollowProps, type CursorFollowAlign, type CursorFollowSide, type CursorContextType, }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["@animate-ui/primitives-animate-slot","@animate-ui/lib-get-strict-context"]}]]}],["$","$L51",null,{"sourceUrl":"https://animate-ui.com/r/primitives-animate-cursor.json","proxyUrl":"https://shadcnregistry.com/r/animate-ui/primitives-animate-cursor","itemId":"@animate-ui/primitives-animate-cursor"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/primitives/animate/cursor/index.tsx","content":"$53","type":"registry:ui","target":"components/animate-ui/primitives/animate/cursor.tsx"}]}]]}],"$L54"]}]

Cursor

Installation

Files

components

Styles