Isometric Build

$ pnpm dlx shadcn@latest add @remocn/isometric-build

Usage

IsometricBuild lays out a grid × grid floor in true isometric projection and raises a block on every tile. Block heights follow a mound that peaks in the middle, with seeded variation, snapped to whole floors so the blocks stack into one stepped sculpture. One interior tile, chosen by seed, becomes the accent tower, 35% taller than maxHeight.

The build runs diagonal by diagonal from the front corner to the back. Each block fades in and springs up from the floor, overshoots its height by about 12%, and settles. The side faces are the block color shaded toward the background, and optional floor lines mark each storey.

import { IsometricBuild } from "@/components/remocn/isometric-build";
 
export const Platform = () => <IsometricBuild />;

The component fills its parent and paints its own background. The diamond and the tallest tower are fitted into 64% of the width and 80% of the height, centered, so the object keeps its framing at any aspect ratio. The spring is driven by the Remotion frame and the layout by the seed, so renders are deterministic.

Timing

At 30 fps, speed={1} and the defaults (grid={5}, stagger={2}):

Each block's spring settles about 20 frames after it starts. The build ends at roughly (2 × (grid − 1) + 1) × stagger + 20 frames, so a larger grid or stagger lengthens it: grid={7} at the default stagger finishes near frame 46. Divide by speed for faster builds. The component does not loop; after the build it holds the finished sculpture for as long as the Sequence runs.

Variations

gap opens the seams between blocks; gap={0} merges them into one solid mass. floors={false} drops the storey lines for a cleaner block. Raise maxHeight for a taller skyline, and change seed to move the accent tower and reshuffle the heights.

<IsometricBuild
  grid={7}
  maxHeight={3}
  gap={0.1}
  floors={false}
  background="#f1eee7"
  color="#1c1a17"
  accent="#e4572e"
  seed={12}
/>