Isometric Blocks Shader for React

Isometric Blocks Shader draws an isometric landscape of solid cubes stacked into columns, like a city model or a 3D bar chart. Column heights follow drifting simplex noise and a slow travelling wave, so whole districts rise and settle, and each column climbs one block at a time with a short ease. Every block has three slate tones, a light top, a mid left face and a dark right face, with hairline edges between blocks; the tallest tops catch a violet accent. The middle left of the box stays a flat floor for your copy. A WGSL fragment shader on WebGPU walks the columns along each pixel's line of sight, front to back, and colors the first face it meets.

Use it behind a data, cloud, infrastructure or developer-tool hero, or anywhere a calm, structured motion suits the product. For flat isometric outlines in plain CSS that light up under the pointer, use the Boxes background; for a bump-mapped relief of pyramids, Pyramid Pattern Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS cube pattern in browsers without WebGPU.

Installation

Usage

import {
  IsometricBlocksShader,
} from "@/components/ui/isometric-blocks-shader";

<IsometricBlocksShader className="flex min-h-[32rem] items-center px-12">
  <h1 className="max-w-md text-5xl font-semibold text-slate-950">
    Ship faster
  </h1>
</IsometricBlocksShader>

Isometric Blocks Shader is a container: your content sits on top of the blocks, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The floor is light in both color schemes, and it stays flat in an oval around a point left of center, about a third of the way across: put dark text there, aligned left or centered on that point.

Demos

In a card

maxHeight={2} keeps every column to two blocks, a quiet texture for a small surface, and cellSize={20} shrinks the blocks so more fit.

Interactive

With interactive, the columns under the pointer rise up to three blocks and catch the accent, here accentColor="#ff7a45". cellSize={36} and maxHeight={4} make bigger, lower blocks that are easy to push around. When the pointer leaves, the risen columns settle back down, one block at a time.

Performance

About 1 ms of GPU time a frame at 1280×720 on an M2 Max laptop at the default maxHeight; slower GPUs take several times longer. Taller columns cost a little more, because each pixel checks up to two columns per block of height. It keeps full quality: the hairline edges blur at half resolution. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu (about 50 KB gzipped) loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows a CSS pattern of slate cubes with a clear patch of floor in the middle left, so the layout never jumps. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The blocks are decoration: they're hidden from assistive tech and let every click through to your content. With interactive, the rise follows a mouse or pen, never touch. With reduced motion it draws one still frame and stops. Nothing flashes: each column climbs or drops one block at a time with a short ease, and a wave takes about 12 seconds to roll past. Dark text reads on the calm floor: across the renders, black text keeps above 7.9:1 contrast on 90% of the middle left, and 16:1 on the bare floor; the dark faces of nearby blocks drop to about 2:1, so keep long text inside the calm area or on a panel.

FAQ

API Reference