webdevpuneet.com

Related Snippets

143 in Animations category
1–6 of 60

Bubble Wrap Popper (Stress Relief)

Dice Roller

GSAP quickTo Cursor

Canvas Fractal Tree Generator

Matter.js Ball Pit Hero Section

Matter.js Rope Bridge You Can Cut

Multiplayer Cursors — Live Collaboration HTML CSS JS

Multiplayer Cursors · Animations · Plain HTML, CSS & JS · Live preview

CategoryAnimations
TagsSVGMedia PlayerGamesMicro-Interactions

Copy & paste

Source Code

<div class="mc-stage" id="mcStage">
  <div class="mc-hint">Move your mouse — simulated teammates follow along</div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Exponential easing toward a random target
Bots ease toward a wander point using (target − current) × speed each frame — smooth, natural motion with no fixed-duration animation to manage.
Auto-retargeting on arrival
Once a bot gets within 4px of its target, it immediately picks a new random point, so the wandering never visibly stops or repeats.
Real cursor with a name tag
Moving your mouse spawns a 1:1, unsmoothed "You" cursor — your own pointer should feel instant, not eased like the bots.
Single transform write per cursor per frame
Each cursor is one element moved via translate(), keeping the arrow and label locked together with minimal per-frame cost.
Resize-safe targets
A resize listener reassigns every bot's wander target so none get stranded chasing an off-screen point.
Color-coded per-teammate cursors
Each simulated user has its own arrow and tag color via currentColor, making multiple presences easy to tell apart at a glance.
Lazy self-cursor creation
The "You" cursor and hint-text fade only activate after the first real mousemove, avoiding a cursor appearing at a stale default position.
GPU-cheap by construction
Every position update uses transform instead of left/top, avoiding layout recalculation even with several cursors animating every frame.

About this UI Snippet

Multiplayer Cursors — Simulated Presence, Custom Pointers & Smooth Cursor Easing

Screenshot of the Multiplayer Cursors snippet rendered live

Seeing a colleague's cursor move across your screen in real time is the single visual cue that makes tools like Figma, Google Docs, and Linear feel "multiplayer" — and it's a deceptively fun thing to build. This snippet simulates that presence layer entirely client-side: a few "teammate" cursors drift around the page on their own, and your real mouse becomes a styled, named cursor of its own, so the effect can be dropped into a portfolio or product demo with zero backend.

Bots that wander, not teleport

Each simulated teammate has a current position and a random target position; every animation frame, bot.x/bot.y ease toward bot.tx/bot.ty by a fraction of the remaining distance ((target - current) * speed) — classic exponential easing, the same technique behind smooth camera-follow and cursor-trailing effects. Once a bot gets within 4px of its target, pickNewTarget() assigns a new random point inside the viewport, so the motion never repeats identically and never snaps.

A real custom cursor for "you"

The page's actual cursor stays the native arrow until you move the mouse for the first time — then a styled "You" cursor (sky blue, with its own name tag) appears and tracks clientX/clientY exactly, no easing, since your own cursor should feel instant and 1:1 with your hand. This lazy creation also means the hint text ("Move your mouse…") only fades out once you've actually engaged with the demo.

One cursor element, two parts

Each cursor is a single absolutely positioned <div> containing an SVG arrow (colored via currentColor so each bot just sets one CSS color) and a small name-tag <span> positioned relative to the arrow's tip. Moving the whole div with one transform: translate() keeps the arrow and its label locked together with a single style write per frame — far cheaper than animating two separate elements' left/top.

Why transform, not left/top

Every cursor's position updates via style.transform = 'translate(x, y)' rather than left/top. Transform changes are compositor-only (no layout recalculation), which matters here because this snippet updates four-plus elements every single animation frame — at 60fps, the difference between a transform write and a layout-triggering left/top write is the difference between buttery and janky.

Resilient to viewport changes

A resize listener immediately reassigns every bot's wander target to a point inside the new viewport bounds, so a teammate cursor never gets stranded chasing a target that's now off-screen after the window is resized.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA dark dotted-grid stage appears with hint text and three simulated teammate cursors drifting around.
  2. 2
    Move your mouseYour own cursor appears as a labeled "You" pointer that tracks your real mouse position exactly, and the hint fades out.
  3. 3
    Watch the bots wanderEach simulated cursor eases toward a random point, then picks a new one once it arrives — never moving in a straight repeating loop.
  4. 4
    Resize the windowBot targets immediately reassign inside the new viewport bounds so no cursor gets stuck chasing an off-screen point.
  5. 5
    Customize the teammatesEdit the NAMES array's name and color values, or change the array length to show more or fewer simulated collaborators.
  6. 6
    Wire in real collaboratorsReplace the bot wander logic with positions received over a WebSocket, keeping the same makeCursor() and transform-update pattern per remote user.

Real-world uses

Common Use Cases

Collaborative app marketing pages
Show "what live collaboration feels like" on a Figma-/Notion-style product's landing page without a real backend.
Product demos and onboarding
Simulate teammates already active in a workspace during a guided first-run tour.
Real-time collaboration features
Use as the rendering layer for actual multiplayer cursors once positions arrive over a WebSocket or WebRTC data channel.
Portfolio and creative-coding pieces
A satisfying, self-contained animation piece that demonstrates easing and canvas-free DOM animation technique.
Empty-state liveliness
Add ambient motion to an otherwise-static dashboard or whiteboard demo page.
Learning transform-based animation
A clear example of exponential easing and transform-only updates — compare with a custom cursor snippet for a single-pointer-only variant.
Related: Zdog Pseudo-3D Orbit Scene
See the Zdog Pseudo-3D Orbit Scene for a related animations pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

On each incoming position message, find or create that user's cursor with makeCursor(), then set its bot.tx/bot.ty (or directly its transform, skipping the easing) to the received x/y — keep the same per-frame transform write so rendering logic doesn't change.

Adjust each bot's speed value (0.02–0.04 by default) — it's the fraction of the remaining distance covered each frame, so a larger value reaches its target faster and a smaller value drifts more slowly.

Add a small absolutely positioned circle or highlight box inside each cursor's div, toggled visible on a simulated or real click event, and position it the same way the name tag is positioned relative to the arrow tip.

Attach the mousemove listener to that element instead of the stage/document, and clamp each bot's wander target to that element's getBoundingClientRect() bounds instead of window.innerWidth/innerHeight.

In React, keep bot positions in a ref (not state, to avoid a re-render every frame) and run the rAF loop in useEffect, writing transform directly to each cursor's DOM node; in Vue, use a ref array with onMounted; in Angular, run the loop via ngZone.runOutsideAngular for the same reason — direct DOM writes outperform framework re-renders for 60fps animation.