# Block City
URL: https://remocn.dev/docs/numbers/block-city

A 3D grid of blocks rises like a city skyline while +340% renders counts up

- Install: `npx shadcn@latest add @remocn/block-city`
- Vibe: tech
- Natural length: 218f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/block-city
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BlockCity } from "@/components/remocn/block-city";

const BlockCityScene = () => (
  <BlockCity value={340} prefix="+" suffix="%" caption="renders" />
);

export const RemotionRoot = () => (
  <Composition
    id="BlockCity"
    component={BlockCityScene}
    durationInFrames={250}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A camera flies low over a grid of blocks that rise like a city, then cranes up into a front view where the tallest tower is lit and the stat counts up beside it. Pass `value`, `prefix`, `suffix` and `caption` for the number, and `data` (one number per column) to shape the skyline. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `340` | Hero number, counted up on the accent block. |
| `prefix` | `string` | `"+"` | Text before the number, such as a plus sign. |
| `suffix` | `string` | `"%"` | Text after the number, such as a percent sign. |
| `caption` | `string` | `"renders"` | Muted word after the number. |
| `data` | `number[]` | — | Optional dataset: one value per column, left to right (any scale). |
| `accent` | `string` | `"#3B5BFD"` | Color of the hero tower and number. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |

## Use when
- A growth beat where one big percentage should land after a cinematic flyover of a skyline.
- A launch recap that wants a 3D data moment, with the tallest tower standing for the headline stat.
- An announcement where a custom dataset should shape the skyline before the number counts up.

## Don't use when
- You need a flat bar chart with readable category labels — use `spring-bars`.
- The story is a trend over time, not a skyline — use `growth-line`.
- You only have time for a short stat beat — use `compact-stat`.