Live Cursor Name Tags — Free HTML CSS JS Snippet

Figma, Google Docs, and Notion all share a visual signature: colored cursors with floating name tags drifting around the canvas as collaborators work. This snippet recreates that visual pattern — not a real multiplayer backend, but the exact look and motion — using plain CSS and requestAnimationFrame, so you can see and reuse the animation technique without standing up WebSockets or a presence server. Pair it with multiplayer cursors for a closer look at cursor rendering, or collaborator presence bar for who's-online UI.

Pre-scripted paths, not random motion

Each cursor follows a small array of waypoint percentages (points) that loop back to the start, rather than random jitter. Random motion reads as noisy and unrealistic; a handful of deliberate waypoints reads as a person actually scrolling and clicking through a document, which is closer to what real presence cursors look like in practice.

One time-based interpolation function

pointAt() takes the array of waypoints and a progress value t between 0 and 1, finds which segment t falls into, and linearly interpolates between that segment's two points. Because position is a pure function of time rather than accumulated per-frame movement, the animation can never drift, stutter, or accumulate floating-point error — reloading or resizing the page just re-samples the same path at the current time.

Driven by requestAnimationFrame, not setInterval

A single tick() loop reads the current timestamp, computes each cursor's position along its path, and sets a CSS transform: translate() — the one property that animates without triggering layout or paint of surrounding content. requestAnimationFrame syncs the loop to the browser's repaint cycle, so motion stays smooth and automatically pauses when the tab isn't visible, unlike a fixed-interval timer.

Staggered offsets keep it readable

Each cursor's offset shifts where it starts along its loop and each has a different speed, so the three cursors never move in lockstep or cross paths predictably — mirroring how real collaborators work at different paces in different parts of a document, which keeps the scene visually interesting rather than looking like one animation copy-pasted three times.

Reusing this for real presence

To make this real, replace the pre-scripted paths with actual cursor coordinates broadcast over a WebSocket or a service like Liveblocks/Pusher — the rendering half (the .lcn-cursor markup, the transform-based positioning, and the name tag styling) stays exactly the same; only the source of x/y changes from a scripted path to a network message.