A procedural isometric city on canvas where a run replays as a glowing runner with a fading trail and kilometre markers. A time-of-day slider moves the sun, its shadows and the sky tint.
npx shadcn@latest add https://hyperblur.dev/r/map-route-replay.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/map-route-replay.tsx.
import { MapRouteReplay } from "@/components/hyperblur/map-route-replay"
<MapRouteReplay distanceKm={10} durationSec={20} defaultHour={7} />| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#ff4d4d" | Runner, trail, marker and control color. |
| routeSeed | number | 7 | Seed for the city layout and the route. Same seed, same city. |
| distanceKm | number | 8 | Distance the route represents. One marker is placed at every whole kilometre. |
| durationSec | number | 18 | Seconds the replay takes from start to finish. |
| autoplay | boolean | true | Start playing on mount. Ignored when the user prefers reduced motion. |
| loop | boolean | true | Restart the replay after a short pause at the finish. |
| paceSecPerKm | number | 312 | Pace used for the elapsed time readout, in seconds per kilometre. |
| hour | number | Controlled time of day from 5 to 21. Pair with onHourChange. | |
| defaultHour | number | 17.5 | Initial time of day when uncontrolled. |
| onHourChange | (hour: number) => void | Called when the time-of-day slider moves. | |
| onProgress | (progress: number, km: number) => void | Called while the replay plays or is scrubbed, with progress from 0 to 1 and the distance covered. | |
| label | string | "Route replay" | Small label above the distance readout. |