Collaborative Live Pointer

effects

Real-time multiplayer cursor follower with user presence tags.

#pointer#cursor#multiplayer#presence#collaborative

Live Interactive Preview

Collaborative Pointer

Move cursor in this area to simulate multiplayer badge.

Abhishek

Component Source Code

Select language in the dropdown

PointerFollower.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { MousePointer2 } from 'lucide-react';
5
6export default function PointerFollower() {
7  const [pos, setPos] = useState({ x: 120, y: 80 });
8
9  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
10    const rect = e.currentTarget.getBoundingClientRect();
11    setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
12  };
13
14  return (
15    <div
16      onMouseMove={handleMouseMove}
17      className="relative h-48 w-full max-w-sm sm:h-56 overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 flex flex-col justify-center items-center text-center select-none"
18    >
19      <h3 className="text-sm font-bold text-slate-900 dark:text-white">Collaborative Pointer</h3>
20      <p className="text-xs text-slate-400 mt-1">Move cursor in this area to simulate multiplayer badge.</p>
21
22      <div
23        style={{
24          transform: `translate3d(${pos.x}px, ${pos.y}px, 0px)`,
25          transition: 'transform 0.08s ease-out'
26        }}
27        className="pointer-events-none absolute left-0 top-0 flex items-start gap-1.5"
28      >
29        <MousePointer2 className="h-4 w-4 fill-cyan-500 text-cyan-500" />
30        <span className="rounded-full bg-cyan-500 px-2 py-0.5 text-[10px] font-bold text-slate-950 shadow-md">
31          Abhishek
32        </span>
33      </div>
34    </div>
35  );
36}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/effects/PointerFollower.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import CollaborativeLivePointer from '@/components/effects/PointerFollower';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <CollaborativeLivePointer />
7    </main>
8  );
9}