All illustrations

Latency heatmap

Cells warm where requests are slow, and the hottest route is flagged with its p99.

FreeHUD · spot

Copy

Download

Open in

ClaudeChatGPTPerplexityGrokCursorv0Lovable
Latency heatmap: cells warm where requests are slow, and the hottest route is flagged with its p99.

Not quite it? Ask for a variation

Install

Writes one React component into components/illos. Nothing else to install.

npx shadcn@latest add https://illos.dev/r/scifi/latency-heatmap.json

Or hand it to your agent

Claude Code, Cursor, Codex and any other coding agent can add it from the prompt.

CursorClaudeChatGPTv0Lovable

How it moves

  1. requests fill a grid of cells by route and time.
  2. cells warm where requests are slow.
  3. the hottest route is flagged with its p99.

For developers

File size
2.9 KB gzipped
Motion
Plays once, 3.0 s, then holds
Reduced motion
Shows a still
File
latency-heatmap.svg

Next in this theme.

Cost meter: spend climbs toward the budget, and a forecast mark shows where the month will end.HUD · spotFree
Incident timeline: an alert fires on the timeline, and the incident runs to resolved fifteen minutes later.HUD · spotFree