Live Cursor
Install this component from the Scintillar registry.
Move your cursor here
Controls
Source
"use client"
import { cn } from "@/lib/utils"
export interface LiveCursorProps {
/** Display name shown below the cursor. */
name: string
/** Color for the cursor and label (any CSS color). */
color: string
/** X position in pixels. */
x: number
/** Y position in pixels. */
y: number
/** Use absolute positioning instead of fixed. Useful inside relative containers. */
absolute?: boolean
/** Additional CSS classes on the container. */
className?: string
}
/** A colored pointer cursor with a user name label, used to show collaborator cursor positions on a canvas or page. */
export function LiveCursor({ name, color, x, y, absolute = false, className }: LiveCursorProps) {
return (
<div
className={cn(
"pointer-events-none z-50 transition-transform duration-100 ease-out",
absolute ? "absolute" : "fixed",
className
)}
style={{ transform: `translate(${x}px, ${y}px)` }}
aria-hidden="true"
>
{/* Cursor arrow */}
<svg
width="16"
height="20"
viewBox="0 0 16 20"
fill="none"
className="drop-shadow-sm"
>
<path
d="M0.928711 0.308594L15.0713 10.7735H7.35898L3.71429 19.6914L0.928711 0.308594Z"
fill={color}
/>
<path
d="M0.928711 0.308594L15.0713 10.7735H7.35898L3.71429 19.6914L0.928711 0.308594Z"
stroke="white"
strokeWidth="1"
strokeLinejoin="round"
/>
</svg>
{/* Name label */}
<span
className="absolute top-4 left-3 whitespace-nowrap rounded px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm"
style={{ backgroundColor: color }}
>
{name}
</span>
</div>
)
}