Realtime Cursor is a multiplayer style cursor with a name flag and a typing indicator badge that pulses while "typing". Its position is driven entirely by a transform prop, so you can feed it from pointer events, a websocket, or any other source to mimic live collaboration. Built with React and Tailwind CSS. The building block for presence UI in editors, whiteboards, and chat canvases.
Installation
Copy and paste the following code into your project.
Unlock the full library
Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.
Update the import paths to match your project setup.
Usage
import RealtimeCursor from "@/components/pro/blocks/realtime-cursor";<RealtimeCursor transform={`translate(${x}px, ${y}px) translate(-50%, -50%)`} />