demo · v147

Button timeline

Every gamepadbuttondown, gamepadbuttonup and gamepadaxismove drops a mark on a 5-second rolling timeline. Sub-frame events show up as separate ticks — something a 60Hz rAF poll could never capture.

Origin trial: the new Gamepad events ride chrome://flags/#enable-experimental-web-platform-features in Chrome 147. Without the flag this page falls back to a high-frequency poll that synthesises the same event log.
Waiting for a gamepad — press any button to connect.
events seen (last 5s)
0
avg gap between events
—
button down
button up
axis move
downupaxis

Event log

The shape

  1. window.addEventListener('gamepadconnected', ...) to spin up the pipeline.
  2. Per-gamepad listeners on gamepadbuttondown, gamepadbuttonup, gamepadaxismove.
  3. Each event has event.button (index) or event.axis, plus high-res timeStamp.
  4. Push to a ring buffer keyed by timeStamp; render the last 5s as marks.
window.addEventListener('gamepadconnected', (e) => {
  const pad = e.gamepad;
  pad.addEventListener('gamepadbuttondown', (ev) => {
    marks.push({ kind: 'down', i: ev.button, t: ev.timeStamp });
  });
  pad.addEventListener('gamepadaxismove', (ev) => {
    marks.push({ kind: 'axis', i: ev.axis, v: ev.value, t: ev.timeStamp });
  });
});

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗