demo · v144
Density Heatmap
interactionCount alone is just a counter. Cross-reference it with the timeline and you get interaction density: how packed the user’s tap/keypress storm is in a given second. The heatmap below records every interaction you fire and bins it into a 60-second window so you can see hot bursts vs idle.
InteractionCount: checking…
click / tap / type on the targets below to fill the heatmap
density (last 60s, 2s buckets)
live stats
- interactionCount
- 0
- peak density
- 0/s
- avg interval
- —
- most recent
- —
the API
// interactionCount is a monotonic counter
const before = performance.interactionCount;
button.click();
const after = performance.interactionCount;
console.log(after - before); // 1 if this counted
// Combine with the Event Timing PerformanceObserver to know *when*:
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.interactionId) record(entry);
}
}).observe({ type: "event", buffered: true, durationThreshold: 0 });