v144 · user input · demo

Gesture Recorder

Pointer Lock delivers raw movementX/movementY deltas — the same data game engines and 3D apps rely on. This tool captures those deltas into a time-stamped gesture trail, replays them at original speed, and surfaces motion stats for debugging input lag, speed calibration, and motion analysis. Available on Android with Chrome 144.

Pointer Lock API: checking…  

Click “Start Recording” to begin
or click directly on the canvas
recording trail (blue)
replay trail (green)
No recording yet — record a gesture first
Metric Value
Record a gesture to see stats
idle — click “Start Recording” or click the canvas

the API

canvas.addEventListener("click", () => canvas.requestPointerLock());

document.addEventListener("pointerlockchange", () => {
  locked = !!document.pointerLockElement;
  recording = locked;
});

document.addEventListener("mousemove", (e) => {
  if (!recording) return;
  samples.push({ dx: e.movementX, dy: e.movementY, t: Date.now() });
});

// Replay at original speed using timestamps
function replay() {
  const replayStart = Date.now();
  const gestureStart = samples[0].t;
  let i = 0;
  function step() {
    const elapsed = Date.now() - replayStart;
    while (i < samples.length && (samples[i].t - gestureStart) <= elapsed) {
      drawPoint(pos.x += samples[i].dx, pos.y += samples[i].dy);
      i++;
    }
    if (i < samples.length) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

see also