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:T1dec,"use client" import { useEffect, useMemo, useRef, useState } from "react" export type CursorSide = "left" | "right" function createSeededRandom(seed: string) { let hash = 2_166_136_261 for (let i = 0; i < seed.length; i += 1) { hash ^= seed.charCodeAt(i) hash = Math.imul(hash, 16_777_619) } let state = hash >>> 0 return () => { state = (Math.imul(state, 1_664_525) + 1_013_904_223) >>> 0 return state / 4_294_967_296 } } export function CursorSvg({ flip = false }: { flip?: boolean }) { return ( ) } function useFloatingCursor(enabled: boolean) { const ref = useRef(null) const raf = useRef(null) const time = useRef(0) const params = useRef<{ phaseX: number phaseY: number speedX: number speedY: number ampX: number ampY: number } | null>(null) useEffect(() => { if (!enabled) return if (!params.current) { params.current = { phaseX: Math.random() * Math.PI * 2, phaseY: Math.random() * Math.PI * 2, speedX: 0.55 + Math.random() * 0.35, speedY: 0.7 + Math.random() * 0.35, ampX: 3 + Math.random() * 5, ampY: 2 + Math.random() * 4, } } const p = params.current if (!p) return const tick = () => { time.current += 0.016 const t = time.current const x = Math.sin(t * p.speedX + p.phaseX) * p.ampX + Math.sin(t * p.speedX * 1.7 + p.phaseX * 0.5) * (p.ampX * 0.3) const y = Math.sin(t * p.speedY + p.phaseY) * p.ampY + Math.cos(t * p.speedY * 1.3 + p.phaseY * 0.7) * (p.ampY * 0.25) if (ref.current) { ref.current.style.transform = `translate(${x}px, ${y}px)` } raf.current = requestAnimationFrame(tick) } raf.current = requestAnimationFrame(tick) return () => { if (raf.current) cancelAnimationFrame(raf.current) } }, [enabled]) return ref } export function Cursor({ name, color, side, style: posStyle, delay = false, }: { name: string color: string side: CursorSide style?: React.CSSProperties delay?: boolean }) { const [visible, setVisible] = useState(!delay) const floatRef = useFloatingCursor(visible) useEffect(() => { if (!delay) return const timer = setTimeout(() => setVisible(true), 800) return () => clearTimeout(timer) }, [delay]) return (

{name}

) } export function CursorDemo() { const cursors = useMemo(() => { const names = ["John", "Jane", "Jim", "Jill", "Jack", "Mina"] as const const colors = [ "#7c3aed", "#2563eb", "#db2777", "#ea580c", "#059669", "#0f766e", ] as const const random = createSeededRandom("cursor-demo") const colorPool = [...colors] for (let i = colorPool.length - 1; i > 0; i -= 1) { const j = Math.floor(random() * (i + 1)) ;[colorPool[i], colorPool[j]] = [colorPool[j], colorPool[i]] } const placed: Array<{ x: number; y: number }> = [] return names.map((name, index) => { const minDistance = 44 let x = 0 let y = 0 for (let attempt = 0; attempt < 30; attempt += 1) { const angle = random() * Math.PI * 2 const spreadX = 54 + random() * 42 const spreadY = 26 + random() * 28 const candidateX = Math.round(Math.cos(angle) * spreadX) const candidateY = Math.round(Math.sin(angle) * spreadY) const isFarEnough = placed.every((point) => { const dx = point.x - candidateX const dy = point.y - candidateY return Math.hypot(dx, dy) >= minDistance }) x = candidateX y = candidateY if (isFarEnough) break } placed.push({ x, y }) const side: CursorSide = random() > 0.5 ? "left" : "right" const color = colorPool.pop() ?? colors[Math.floor(random() * colors.length)] return { name, color, side, delay: index > 1, style: { left: `calc(50% + ${x}px)`, bottom: `calc(48% + ${y}px)`, } satisfies React.CSSProperties, } }) }, []) return (

Live collaborators

6 online

{cursors.map((cursor, index) => ( ))}

) } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/default/ui/illustration-cursor.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]