{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "illustration-cursor", "type": "registry:ui", "description": "Cursor illustration and demo for collaboration UI", "files": [ { "path": "registry/default/ui/illustration-cursor.tsx", "content": "\"use client\"\n\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nexport type CursorSide = \"left\" | \"right\"\n\nfunction createSeededRandom(seed: string) {\n let hash = 2_166_136_261\n for (let i = 0; i < seed.length; i += 1) {\n hash ^= seed.charCodeAt(i)\n hash = Math.imul(hash, 16_777_619)\n }\n let state = hash >>> 0\n return () => {\n state = (Math.imul(state, 1_664_525) + 1_013_904_223) >>> 0\n return state / 4_294_967_296\n }\n}\n\nexport function CursorSvg({ flip = false }: { flip?: boolean }) {\n return (\n \n \n \n )\n}\n\nfunction useFloatingCursor(enabled: boolean) {\n const ref = useRef(null)\n const raf = useRef(null)\n const time = useRef(0)\n const params = useRef<{\n phaseX: number\n phaseY: number\n speedX: number\n speedY: number\n ampX: number\n ampY: number\n } | null>(null)\n\n useEffect(() => {\n if (!enabled) return\n\n if (!params.current) {\n params.current = {\n phaseX: Math.random() * Math.PI * 2,\n phaseY: Math.random() * Math.PI * 2,\n speedX: 0.55 + Math.random() * 0.35,\n speedY: 0.7 + Math.random() * 0.35,\n ampX: 3 + Math.random() * 5,\n ampY: 2 + Math.random() * 4,\n }\n }\n\n const p = params.current\n if (!p) return\n\n const tick = () => {\n time.current += 0.016\n const t = time.current\n const x =\n Math.sin(t * p.speedX + p.phaseX) * p.ampX +\n Math.sin(t * p.speedX * 1.7 + p.phaseX * 0.5) * (p.ampX * 0.3)\n const y =\n Math.sin(t * p.speedY + p.phaseY) * p.ampY +\n Math.cos(t * p.speedY * 1.3 + p.phaseY * 0.7) * (p.ampY * 0.25)\n\n if (ref.current) {\n ref.current.style.transform = `translate(${x}px, ${y}px)`\n }\n raf.current = requestAnimationFrame(tick)\n }\n\n raf.current = requestAnimationFrame(tick)\n return () => {\n if (raf.current) cancelAnimationFrame(raf.current)\n }\n }, [enabled])\n\n return ref\n}\n\nexport function Cursor({\n name,\n color,\n side,\n style: posStyle,\n delay = false,\n}: {\n name: string\n color: string\n side: CursorSide\n style?: React.CSSProperties\n delay?: boolean\n}) {\n const [visible, setVisible] = useState(!delay)\n const floatRef = useFloatingCursor(visible)\n\n useEffect(() => {\n if (!delay) return\n const timer = setTimeout(() => setVisible(true), 800)\n return () => clearTimeout(timer)\n }, [delay])\n\n return (\n \n \n \n \n {name}\n \n \n \n )\n}\n\nexport function CursorDemo() {\n const cursors = useMemo(() => {\n const names = [\"John\", \"Jane\", \"Jim\", \"Jill\", \"Jack\", \"Mina\"] as const\n const colors = [\n \"#7c3aed\",\n \"#2563eb\",\n \"#db2777\",\n \"#ea580c\",\n \"#059669\",\n \"#0f766e\",\n ] as const\n const random = createSeededRandom(\"cursor-demo\")\n const colorPool = [...colors]\n for (let i = colorPool.length - 1; i > 0; i -= 1) {\n const j = Math.floor(random() * (i + 1))\n ;[colorPool[i], colorPool[j]] = [colorPool[j], colorPool[i]]\n }\n const placed: Array<{ x: number; y: number }> = []\n return names.map((name, index) => {\n const minDistance = 44\n let x = 0\n let y = 0\n\n for (let attempt = 0; attempt < 30; attempt += 1) {\n const angle = random() * Math.PI * 2\n const spreadX = 54 + random() * 42\n const spreadY = 26 + random() * 28\n const candidateX = Math.round(Math.cos(angle) * spreadX)\n const candidateY = Math.round(Math.sin(angle) * spreadY)\n const isFarEnough = placed.every((point) => {\n const dx = point.x - candidateX\n const dy = point.y - candidateY\n return Math.hypot(dx, dy) >= minDistance\n })\n\n x = candidateX\n y = candidateY\n if (isFarEnough) break\n }\n\n placed.push({ x, y })\n const side: CursorSide = random() > 0.5 ? \"left\" : \"right\"\n const color =\n colorPool.pop() ?? colors[Math.floor(random() * colors.length)]\n return {\n name,\n color,\n side,\n delay: index > 1,\n style: {\n left: `calc(50% + ${x}px)`,\n bottom: `calc(48% + ${y}px)`,\n } satisfies React.CSSProperties,\n }\n })\n }, [])\n\n return (\n
\n
\n

\n Live collaborators\n

\n \n 6 online\n \n
\n
\n
\n
\n {cursors.map((cursor, index) => (\n \n ))}\n
\n
\n )\n}\n", "type": "registry:ui" } ] }