127 Components
Isometric City
BackgroundsProcedural 3D-projected isometric night cityscape rendered on HTML5 Canvas 2D with depth-sorted skyscrapers, flickering office windows, rooftop aviation beacons, and avenue light-streak traffic.
3D Avenue Grid & Traffic
Isometric City
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/isometric-city.json"
Props
TypeScript props supported by <IsometricCity />.
| Prop | Type | Default | Description |
|---|---|---|---|
| gridSize | number | 7 | Number of city blocks generated along each isometric axis (4 to 10). |
| buildingDensity | number | 0.78 | Probability (0.3 to 1.0) that a grid parcel spawns a tower. |
| trafficSpeed | number | 1.0 | Velocity multiplier for avenue headlight and taillight streaks. |
| colorPalette | "cyberpunk" | "midnight" | "amber" | "midnight" | Color theme controlling sky gradient, facade shading, and window hues. |
| windowFlicker | boolean | true | Enables stochastic real-time toggling of individual office windows. |
| children | React.ReactNode | — | Optional foreground UI rendered above the cityscape. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- True painter's-algorithm depth sorting across procedurally generated 3D isometric city blocks.
- Hundreds of individual perspective-aligned office windows that subtly toggle on and off alongside rooftop aviation beacons.
- Bi-directional headlight and taillight light-streaks gliding smoothly along the isometric avenue grid.
Keyboard & Accessibility
- Canvas city projection is marked aria-hidden='true' to prevent screen reader noise.
- Interactive palette, window-flicker, and city regeneration buttons support keyboard focus and clear state labels.