Real-Time Cursors

Component

About

A multiplayer canvas showing named, color-coded teammate cursors moving simultaneously across a shared workspace, used to simulate real-time collaboration in product demos and marketing pages.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Real-Time Cursors to your project and fits it to your theme.

Code

How Real-Time Cursors is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { RealTimeCursors } from "@/components/ui/real-time-cursors";

export default function CollaborativeReview() {
  return (
    <RealTimeCursors
      cursors={[
        {
          name: "Ava",
          color: "#2563eb",
          note: "checking props",
          path: [
            { x: 16, y: 26 },
            { x: 72, y: 21 },
            { x: 64, y: 58 },
            { x: 20, y: 68 },
          ],
        },
        {
          name: "Noah",
          color: "#7c3aed",
          note: "left a comment",
          path: [
            { x: 78, y: 74 },
            { x: 36, y: 54 },
            { x: 52, y: 30 },
            { x: 84, y: 42 },
          ],
        },
      ]}
      className="min-h-[520px]"
    />
  );
}