Collaborative Cursors Feature
A free collaborative cursors React feature section with bounded presence paths and an accessible activity summary.
Make progress visible while the whole room moves.
This simulated workspace pairs purposeful presence paths with a plain-language activity record, so motion adds atmosphere without becoming the only source of meaning.
See the shared canvasCustomise
Code
<CollaborativeCursorsFeature users={collaborators} />Collaborative Cursors Feature is a free collaborative cursors React feature section for Next.js, built with Motion and styled with Tailwind. It presents a substantial shared-workspace preview where simulated collaborators follow deterministic, bounded routes and pause at purposeful interface targets.
The animation is explicitly illustrative rather than a real-time service: no pointer is tracked and no live provider is connected. A visible semantic activity list repeats every name and example action, while no-JS and reduced-motion visitors receive the same complete composition with static cursors and no trails.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/feat-collaborative-cursorsUsage
import { CollaborativeCursorsFeature } from "@/components/feat-collaborative-cursors";
const collaborators = [
{ id: "maya", name: "Maya Chen", action: "Editing the flow" },
{ id: "theo", name: "Theo Martin", action: "Reviewing charts" },
{ id: "amina", name: "Amina Bello", action: "Tuning a metric" },
];
export default function Page() {
return (
<CollaborativeCursorsFeature
users={collaborators}
cursorCount={3}
pathDuration={5.2}
cadence={1.4}
trailLength={3}
previewDepth={12}
radius={24}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| users | ReadonlyArray<{ id: string; name: string; action: string }> | required | Two to six simulated collaborators. Each id must be non-empty and unique. Every action is listed in full in the activity summary; the compact cursor flag truncates one that is longer than the canvas can carry. |
| cursorCount | number | 3 | Maximum animated cursors, clamped to 1 to 6 and available users. |
| pathDuration | number | 5.2 | Seconds per deterministic cursor route, clamped to 2.5 to 12. |
| cadence | number | 1.4 | Delay between purposeful cursor starts in seconds, clamped to 0.6 to 4. |
| trailLength | number | 3 | Fading trail points per cursor, clamped to an integer from 0 to 6. |
| previewDepth | number | 12 | Product-layer separation in CSS pixels, clamped to 0 to 28. |
| radius | number | 24 | Product-frame radius in CSS pixels, clamped to 0 to 48. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Collaborative Cursors Feature exposes four Tier 3 tokens. The first three set the repeating presence accents and --collaborative-cursor-panel sets the product-preview surface, so a consumer can retheme the scene without editing its motion or semantic structure:
.te-feat-collaborative-cursors {
--collaborative-cursor-a: var(--ring);
--collaborative-cursor-b: var(--primary);
--collaborative-cursor-c: var(--foreground);
--collaborative-cursor-panel: var(--card);
}Frequently asked questions
- Is Collaborative Cursors Feature free for commercial use?
- Yes. Collaborative Cursors Feature is MIT licensed, so you can use it in personal and commercial projects without attribution.
- How does Collaborative Cursors Feature handle performance and accessibility?
- Cursor and badge movement changes transform and opacity only, uses fixed DOM nodes and never writes React state per frame. Loops pause while the section is fully offscreen or the document is hidden. Reduced motion cancels the loops, hides every trail and leaves the visible semantic activity list available.
- Can I customise the cursor paths and collaboration data?
- You can provide two to six collaborator names and example actions, and tune cursor count, duration, cadence, trail length, preview depth and radius. Routes remain deterministic and built in by design, while the three cursor accent tokens and panel token control the visual theme.