Real-Time Cursors

Collaborative workspace preview with animated teammate cursors, code review cards, and simulated live presence trails.

Motion Effectsspringhovercursorcollaborationcodepresenceframer-motionworkspace

Real-Time Cursors

Multiplayer workspace

Live collaboration canvas

A
N
M
K
4 online
Ava
Noah
Mira
Kai
code-block
canvas.tsx
import { RealTimeCursors } from "@nexus/ui";
 
export default function Canvas() {
  return (
    <RealTimeCursors
      cursors={[
        { name: "Ava",  color: "#2563eb",
          path: [{ x: 10, y: 15 }, ...] },
        { name: "Noah", color: "#7c3aed",
          path: [{ x: 82, y: 68 }, ...] },
      ]}
    />
  );
}
chat-messages

Nexus AI

Always here to help

card-stack-rotator
Real-time collaboration changes how teams build products together.
JL

Jordan Lee

Head of Product · Nexus

Design systems need consistency and flexibility in equal measure.
AC

Alex Chen

Lead Designer · Studio

encrypted-text
typewriter-effect

What will you build?

A stunning landing page. A real-time dashboard. A collaborative workspace. The next big thing.

Nexus UI ships production-ready components so you can focus on what matters.

Cursor paths are simulated locally

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

Animation effects

springhover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.