Collab Cursors stages the feel of multiplayer editing: two named cursors wander a shared canvas on independent GSAP timelines, each pausing to select and drag different shapes. The wander paths never sync, so the scene keeps looking organic. Built with React and Tailwind CSS. A quick way to signal realtime collaboration in product demos without wiring up an actual backend.
Installation
Install dependencies.
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.
Related blocks
- Mockup: Analog Clock
A live-ticking analog clock face with metallic bezel, glass sheen, and smooth-sweep hands driven by system time.
- Mockup: Clerk Bento
A Clerk.com-inspired authentication bento grid — 11 hover-gated mockup cards arranged in a 3×4 bento layout with a wide API keys + CLI bottom row.
- Mockup: Code Diff
A terminal-style code diff viewer with syntax-highlighted add/del lines, staggered reveal animation, and a copy button.
- Mockup: Command Palette
A simulated cursor opening a command palette, typing a query, and picking a result on a GSAP loop.
