A dot-density heat map over a coastal city silhouette with a slow shimmer. Hovering or moving with the arrow keys reads the value and district of a dot.
npx shadcn@latest add https://hyperblur.dev/r/map-heat-dots.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/map-heat-dots.tsx.
import { MapHeatDots } from "@/components/hyperblur/map-heat-dots"
<MapHeatDots metric="temperature" accent="#ff8a3d" />| Prop | Type | Default | Description |
|---|---|---|---|
| metric | "footfall" | "temperature" | "noise" | "signal" | "footfall" | Which reading the dots represent. Sets the title, unit, range and legend. |
| accent | string | "#ff4d4d" | Hot end of the color ramp. |
| coldColor | string | "#2c4270" | Cold end of the color ramp. |
| seed | number | 3 | Seed for the coastline and the hotspots. |
| density | number | 58 | Approximate number of dot columns across the width. |
| title | string | Heading. Defaults to the metric name. | |
| subtitle | string | Small caption under the heading. Defaults to a period for the metric. |