Pointer Tracker

This demo uses singlePointer() from cereb to track pointer movements and draw dots following the cursor.

Sign here.

Tip. Touch and drag to sign.

Reset

Signal Snapshot

X -

Y -

OFFSET X -

OFFSET Y -

PHASE -

POINTER TYPE -

Code

import { pipe, singlePointer } from "cereb";
import { offset, singlePointerSession } from "cereb/operators";

// Subscribe to a single-pointer signal from `window`.
singlePointer(window)
  .pipe(
    // Treat start → end as one session (signals outside the session are ignored).
    singlePointerSession(),

    // `singlePointer(window)` yields window-relative x/y.
    // Compute canvas-relative coordinates and add `offsetX`/`offsetY`.
    offset({ target: canvas }),
  ).on((signal) => {
    // Read values from the signal and draw.
    const { phase, offsetX, offsetY, pointerType } = signal.value;

    drawTrackingPointer({
      x: offsetX,
      y: offsetY,
      phase,
      pointerType,
    });
  });