An activity card with a route outline, four stats and an elevation and pace profile. Hovering or scrubbing the profile moves a dot along the route in sync.
npx shadcn@latest add https://hyperblur.dev/r/map-route-stats.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/map-route-stats.tsx.
import { MapRouteStats } from "@/components/hyperblur/map-route-stats"
<MapRouteStats title="Hill repeats" distanceKm={7.8} movingTimeSec={2460} elevationGain={312} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Riverside loop" | Activity name. |
| date | string | "Sat, Nov 1 · 07:12" | Date and time text in the header. |
| distanceKm | number | 10.42 | Total distance in kilometres. |
| movingTimeSec | number | 3138 | Moving time in seconds. The average pace is derived from it. |
| elevationGain | number | 186 | Elevation gain in metres. Also scales the profile. |
| seed | number | 5 | Seed for the route shape and the profile. |
| accent | string | "#ff4d4d" | Route, elevation and marker color. |
| paceColor | string | "#7fb3ff" | Color of the dashed pace line and pace readout. |
| onScrub | (fraction: number, km: number) => void | Called while the profile is hovered, dragged or moved with the arrow keys. |