Live Cursors — Lab — Carter Ogunsola

Everyone else on the page, in real time. You broadcast your pointer as a 0-to-1 position, a Cloudflare Durable Object fans it out, and each peer eases toward its latest spot — the same server that counts who's online in the header.

Dependencies

PartyKit PartyServer — Durable Object rooms + presence partysocket — reconnecting WebSocket client GSAP Core — one ticker for the interpolation loop

Someone else is here

Most of the web is single-player. You move your cursor, nothing moves back. Open this page in a second tab, or send it to a friend, and their pointer slides across your screen in real time, tinted and named, easing wherever they go.

One object in the middle

Every visitor holds one WebSocket to a room called live-cursors, served by a single Cloudflare Durable Object (the same one that counts who’s online up in the header). You send your pointer; the object fans it out to everyone else. Nobody talks to anyone directly, which is what makes it trustworthy: the server stamps each message with the sender’s real connection id and clamps the coordinates before forwarding, so a peer can’t claim to be someone else or fling a cursor off the stage. Names and colors are derived from that id on the client and written with textContent, so a hostile payload has nowhere to land.

Positions travel as a pair of 0-to-1 fractions of the stage, not pixels. A peer at 0.5, 0.5 sits dead centre of your stage whatever your window size. There’s no shared artwork to line up against, so relative is the honest mapping: your top-right is their top-right.

The feel is in the easing

Raw network positions land in bursts, and drawn straight they make a cursor teleport. So each peer carries two positions, a target (the last thing that arrived) and a rendered one, and every frame the rendered position moves a fraction of the way toward the target. That fraction is time-based (1 − e^(−λ·dt)), so the glide feels the same at 30fps and 120fps instead of turning twitchy on a fast display.

The numbers that earn their keep: you broadcast at most once every 50ms (~20 a second, under the server’s rate cap), and even holding still your position re-sends every 4s so you never flicker out on anyone else’s screen. Smoothing sits at λ18. Go 12s with no word from a peer and their cursor is pulled, which is the thing that catches a shut laptop lid that never sends a clean goodbye.

The moving parts

The room — one Durable Object per room name. live-cursors is this stage, global is the header count. Same server, different rooms.
Normalized coordinates — pointer stored as x/width, y/height, so it maps across any window size.
Server-stamped id — the relay attaches the real sender id; the client trusts nothing else on the message.
Stale sweep — drop a peer after 12s of silence, for the disconnect that was never clean. Clean departures arrive instantly as a leave from the server.
Keepalive — your position re-sends every 4s even at rest, so idle-but-present peers keep their cursor instead of blinking out.

The cursor art is Central Icons’ collaboration pointer, flipped left or right by the peer’s travel direction. Reduced-motion callers get the same cursors with the easing off: they snap to each position instead of gliding.

Built on PartyKit, by Sunil Pai, now part of Cloudflare.

Setup

<!-- GSAP (from CDN) -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>

<!-- Site tokens the styles use — swap freely -->
<style>
  :root {
    --font-mono: "Geist Mono", ui-monospace, monospace;
    --ink: #1e1e1e;
    --ink-muted: rgba(30, 30, 30, 0.6);
    --r-sm: 4px;
    --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
  }
</style>

<!-- Sized stage — the script fills it -->
<div class="stage" style="position: relative; height: 100vh;"></div>

Style

.lc {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.lc__hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm,0.8rem);
  letter-spacing: 0.02em;
  transition: opacity .4s var(--ease-out-quad);
  pointer-events: none;
}

.lc__peer {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  pointer-events: none;
  transform-origin: top left;
}

.lc__ptr {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}

.lc__ptr svg {
  display: block;
  width: 22px;
  height: 22px;
}

.lc__name {
  position: absolute;
  top: 18px;
  left: 16px;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: var(--r-sm,4px);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: #fff;
  transform: translateZ(0);
}

Script

import PartySocket from "partysocket";
import { SITE } from "@/config/site";
import leftSvg from "@/icons/collaboration-pointer-left.svg?raw";
import rightSvg from "@/icons/collaboration-pointer-right.svg?raw";
const clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
const SEND_MS = 50;
const KEEPALIVE_MS = 4e3;
const HEARTBEAT_MS = 2e4;
const STALE_MS = 12e3;
const DEFAULTS = {
  smoothing: 18,

  size: 1

};
const COLORS = ["#3f76b5", "#838348", "#c2661f", "#9c6b77", "#a67f1e", "#8670a2"];
const ADJ = ["quiet", "swift", "warm", "spare", "lucid", "keen", "soft", "bright"];
const ANIMAL = ["otter", "heron", "lynx", "moth", "fox", "wren", "koi", "hare"];
function hash(s) {
  let h = 0;
  for (let i = 0; i < s.length; i++) h = h * 31 + s.charCodeAt(i) | 0;
  return Math.abs(h);
}
const colorFor = (id) => COLORS[hash(id) % COLORS.length];
const nameFor = (id) => {
  const h = hash(id);
  return `${ADJ[h % ADJ.length]} ${ANIMAL[(h >> 3) % ANIMAL.length]}`;
};
const STYLE_ID = "exp-cursors-style";
const CSS = `
.lc {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.lc__hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm,0.8rem);
  letter-spacing: 0.02em;
  transition: opacity .4s var(--ease-out-quad);
  pointer-events: none;
}

.lc__peer {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  pointer-events: none;
  transform-origin: top left;
}

.lc__ptr {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}

.lc__ptr svg {
  display: block;
  width: 22px;
  height: 22px;
}

.lc__name {
  position: absolute;
  top: 18px;
  left: 16px;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: var(--r-sm,4px);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: #fff;
  transform: translateZ(0);
}
`;
function injectStyle() {
  if (document.getElementById(STYLE_ID)) return;
  const el = document.createElement("style");
  el.id = STYLE_ID;
  el.textContent = CSS;
  document.head.appendChild(el);
}
const experiment = {
  mount(root) {
    injectStyle();
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const finePointer = window.matchMedia("(pointer: fine)").matches;
    const P = { ...DEFAULTS };
    const wrap = document.createElement("div");
    wrap.className = "lc";
    const hint = document.createElement("p");
    hint.className = "lc__hint";
    hint.textContent = finePointer ? "Open this page in another tab or on another device — you'll see each other move." : "Others' cursors show up here. Touch has no pointer, so you're here in spirit.";
    wrap.appendChild(hint);
    root.appendChild(wrap);
    const peers =  new Map();
    const host = import.meta.env.DEV ? "localhost:8787" : SITE.presence.host;
    const socket = new PartySocket({ host, room: "live-cursors", party: "presence" });
    const ac = new AbortController();
    const { signal } = ac;
    const send = (s) => {
      try {
        socket.send(s);
      } catch {
      }
    };
    const hb = window.setInterval(() => send('{"type":"ping"}'), HEARTBEAT_MS);
    let selfX = 0;
    let selfY = 0;
    let hasSelf = false;
    let lastSend = 0;
    let sentX = -1;
    let sentY = -1;
    const maybeSend = (force = false) => {
      if (!hasSelf || socket.readyState !== 1) return;
      const now = performance.now();
      if (!force && now - lastSend < SEND_MS) return;
      if (!force && selfX === sentX && selfY === sentY) return;
      send(JSON.stringify({ type: "cursor", x: clamp01(selfX), y: clamp01(selfY) }));
      sentX = selfX;
      sentY = selfY;
      lastSend = now;
    };
    if (finePointer) {
      wrap.addEventListener(
        "pointermove",
        (e) => {
          const r = wrap.getBoundingClientRect();
          if (r.width === 0 || r.height === 0) return;
          selfX = (e.clientX - r.left) / r.width;
          selfY = (e.clientY - r.top) / r.height;
          hasSelf = true;
          maybeSend();
        },
        { signal }
      );
    }
    const keepalive = window.setInterval(() => {
      if (!document.hidden) maybeSend(true);
    }, KEEPALIVE_MS);
    socket.addEventListener("message", (e) => {
      let m;
      try {
        m = JSON.parse(e.data);
      } catch {
        return;
      }
      if (m.type === "cursor" && typeof m.id === "string" && typeof m.x === "number" && typeof m.y === "number") {
        upsert(m.id, clamp01(m.x), clamp01(m.y));
      } else if (m.type === "leave" && typeof m.id === "string") {
        remove(m.id);
      }
    });
    function upsert(id, x, y) {
      let p = peers.get(id);
      if (!p) p = create(id, x, y);
      if (x > p.tx + 4e-3) p.dir = 1;
      else if (x < p.tx - 4e-3) p.dir = -1;
      p.tx = x;
      p.ty = y;
      p.last = performance.now();
      if (reduced) {
        p.x = x;
        p.y = y;
      }
      hint.style.opacity = "0";
    }
    function create(id, x, y) {
      const color = colorFor(id);
      const el = document.createElement("div");
      el.className = "lc__peer";
      const ptr = document.createElement("span");
      ptr.className = "lc__ptr";
      ptr.style.color = color;
      const name = document.createElement("span");
      name.className = "lc__name";
      name.style.background = color;
      name.textContent = nameFor(id);
      ptr.innerHTML = rightSvg;
      el.appendChild(ptr);
      el.appendChild(name);
      el.style.transform = `translate3d(${x * W}px, ${y * H}px, 0) scale(${P.size})`;
      wrap.appendChild(el);
      const p = { id, tx: x, ty: y, x, y, dir: 1, shownDir: 1, last: performance.now(), el, ptr };
      return peers.set(id, p), p;
    }
    function remove(id) {
      const p = peers.get(id);
      if (!p) return;
      p.el.remove();
      peers.delete(id);
      if (peers.size === 0) hint.style.opacity = "1";
    }
    let W = wrap.clientWidth;
    let H = wrap.clientHeight;
    const ro = new ResizeObserver(() => {
      W = wrap.clientWidth;
      H = wrap.clientHeight;
    });
    ro.observe(wrap);
    const tick = (_time, dtMs) => {
      const now = performance.now();
      const dt = Math.min(dtMs, 50) / 1e3;
      const alpha = reduced ? 1 : 1 - Math.exp(-P.smoothing * dt);
      for (const p of peers.values()) {
        if (now - p.last > STALE_MS) {
          remove(p.id);
          continue;
        }
        p.x += (p.tx - p.x) * alpha;
        p.y += (p.ty - p.y) * alpha;
        p.el.style.transform = `translate3d(${p.x * W}px, ${p.y * H}px, 0) scale(${P.size})`;
        if (p.dir !== p.shownDir) {
          p.ptr.innerHTML = p.dir === 1 ? rightSvg : leftSvg;
          p.shownDir = p.dir;
        }
      }
    };
    gsap.ticker.add(tick);
    const set = (key, value) => {
      if (key in P) P[key] = Number(value);
    };
    const destroy = () => {
      ac.abort();
      window.clearInterval(hb);
      window.clearInterval(keepalive);
      gsap.ticker.remove(tick);
      ro.disconnect();
      try {
        socket.close();
      } catch {
      }
      peers.forEach((p) => p.el.remove());
      peers.clear();
      wrap.remove();
    };
    return { destroy, set };
  }
};
experiment.mount(document.querySelector(".stage"));

Live Cursors

Interaction New

Experiment coming soon Loading experiment

Live Cursors — Lab experiment