Voxel Flyover Shader for React

Voxel Flyover Shader flies you low over a world of blocks. Rolling hills rise in hard-edged steps: green tops with olive patches, sandstone cliffs with a fringe of grass along their upper edge, sand at the shore, snow on the highest peaks, and flat turquoise water filling the valleys. The sun casts hard shadows, corners darken where blocks meet, and the land hazes into a pale sky with distance. The camera glides forward with a gentle bank, and timeOfDay moves the sun from dawn through noon to a pink sunset. A WGSL fragment shader on WebGPU walks every pixel's ray through the grid of block columns, one column at a time, so the edges stay perfectly sharp. It's the heavy kind of shader, so it renders at half resolution by default.

Use it behind a game, a sandbox or a creative tool's hero, an outdoor education page, or a playful landing page. For a 2D relief map in plain CSS, use the Terrain background; for smooth dunes instead of blocks, Desert Sand Shader; for an ink-wash landscape in the same calm, Valley Mist Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a gradient of the same sky and grass in browsers without WebGPU.

Installation

Usage

import {
  VoxelFlyoverShader,
} from "@/components/ui/voxel-flyover-shader";

<VoxelFlyoverShader className="flex min-h-[32rem] items-start justify-center pt-20">
  <h1 className="text-5xl font-semibold text-slate-950">Build your world</h1>
</VoxelFlyoverShader>

Voxel Flyover Shader is a container: your content sits on top of the world, 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 sky fills the top third and is pale in both color schemes, so put dark text there, such as text-slate-950; white text doesn't read on the default sky.

Demos

Sunset

timeOfDay={0.85} brings the sun down low to the right: the sky and the haze turn pink and lilac, the cliffs glow warm on their sunlit side, and long shadows fall across the hills. It's a calm backdrop for a call to action.

In a card

blockSize={1.6} makes the blocks chunkier while the hills keep their shape, so a small card still reads as blocks rather than noise.

Performance

Voxel Flyover Shader renders at quality={0.5} by default: half the screen's resolution, a quarter of the pixels. On an M2 Max laptop at 1280×720, a frame takes about 3.1 ms of GPU time at that default, and about 5.1 ms at quality={1}. Slower GPUs take several times longer, so keep the default on large screens. Your own quality prop overrides it; at quality={1} the block edges are crisper. 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 gradient from the sky down through a pale horizon to the grass, built from the same color props, 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 world is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame of the hills and stops. Nothing flashes: the camera glides at a steady pace and banks over tens of seconds, and it always flies above the blocks, so it never cuts through a hill. In the top third of the default scene, slate-950 text stays above 10:1 on 95% of the pixels and above 5.5:1 everywhere; at timeOfDay={0.85} it stays above 8:1 on 95% of them. Lower down, the hills and their shadows pass under the text, so keep body text in the sky or on a panel.

FAQ

API Reference