Block City

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

Installation

$ pnpm dlx 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.

Props8

Prop	Type	Default
value	number340 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	number1 Playback multiplier.
theme	"dark" \| "light""dark" Dark or light palette.

valuenumber
Hero number, counted up on the accent block.
Default340
prefixstring
Text before the number, such as a plus sign.
Default"+"
suffixstring
Text after the number, such as a percent sign.
Default"%"
captionstring
Muted word after the number.
Default"renders"
datanumber[]
Optional dataset: one value per column, left to right (any scale).
accentstring
Color of the hero tower and number.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Dark or light palette.
Default"dark"