# Illustration Cursor
> Animated multiplayer cursors for React and shadcn/ui with name tags and colors, to illustrate real-time collaboration.
Source: https://www.cult-ui.com/docs/components/illustration-cursor
## Example
```tsx title="illustration-cursor-demo.tsx"
"use client"
import { CursorDemo } from "@/components/ui/illustration-cursor"
function IllustrationCursorDemo() {
return (
)
}
export default IllustrationCursorDemo
```
Illustration Cursor is a React SVG component for shadcn/ui animated with requestAnimationFrame. Use it to illustrate real-time collaboration in landing page sections for editors, whiteboards, or design tools.
## Installation
### CLI
```bash
npx shadcn@latest add @cult-ui/illustration-cursor
```
### Manual
**Copy and paste the following code into your project.**
```tsx title="illustration-cursor.tsx"
"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 (