An extruded procedural city on canvas that slowly turns on its own, rotates with drag and inertia, and switches to a night view with lit windows and street lamps.
npx shadcn@latest add https://hyperblur.dev/r/map-city-blocks.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/map-city-blocks.tsx.
import { MapCityBlocks } from "@/components/hyperblur/map-city-blocks"
<MapCityBlocks seed={21} defaultNight />| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#ff4d4d" | Rooftop beacons, compass needle and focus ring color. |
| seed | number | 12 | Seed for the street grid, river, park and building heights. |
| autoRotate | boolean | true | Turn slowly when idle. Disabled under reduced motion. |
| night | boolean | Controlled night mode. Pair with onNightChange. | |
| defaultNight | boolean | false | Initial night mode when uncontrolled. |
| onNightChange | (night: boolean) => void | Called when the Day and Night toggle is pressed. | |
| label | string | "District 07" | District name in the top left panel. |
| caption | string | "Live model" | Small caption shown next to the building count. |