Cellular Tiled Tunnel Shader for React

Cellular Tiled Tunnel Shader flies a camera fast down a winding tunnel on the GPU. A WGSL fragment shader on WebGPU ray marches a tube whose wall is broken into cellular plates, a Voronoi pattern wrapped around it: each plate rises in flat facets from its seams to a flat top, so the wall looks hammered from angular sheets of metal. The plates carry a blocky mosaic of greys, a third of them are tinted bronze, each block of the mosaic is a facet tilted at random so the metal glints pale blue as you pass, and the far end fades into a dark hole.

Use it behind an industrial, engineering or gaming hero, or a feature card that wants texture and motion. For a lit tunnel of colorful glossy tiles, use Advanced Tunnel Shader; for a metal tube seen from a slow, swinging camera, Oldschool Tube Shader; for a grid tunnel in plain CSS, with no GPU, the Warp background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS gradient of the same greys and bronze in browsers without WebGPU.

Installation

Usage

import {
  CellularTiledTunnelShader,
} from "@/components/ui/cellular-tiled-tunnel-shader";

<CellularTiledTunnelShader className="flex min-h-[32rem] items-end">
  <div className="m-8 rounded-xl bg-black/60 px-8 py-6 backdrop-blur-sm">
    <h1 className="text-5xl font-semibold text-white">Go deeper</h1>
  </div>
</CellularTiledTunnelShader>

Cellular Tiled Tunnel Shader is a container: your content sits on top of the tunnel, 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 plates are light and busy in both color schemes, so set text on a dark panel, as above.

Demos

Brass

width={1.4} widens the tunnel, cellSize={1.6} makes fewer, larger plates, and tintColor="#c7a26b" turns the warm plates a paler brass.

In a card

The tunnel scales with its box, and speed={0.5} halves the flight, which is calmer next to text.

Performance

About 3.5 ms of GPU time a frame at 1280×720 on an M2 Max laptop at its default quality of 0.75, which renders three quarters of the resolution, about half the pixels; at quality={1} it takes about 4.5 ms. Slower GPUs take several times longer. It's a medium-weight shader: the march takes up to 90 steps, and each step near the wall works out the plate pattern, though it skips the pattern while it's far from the wall. At quality={0.5} the mosaic blurs, so keep that for very slow GPUs. The props don't change the cost. 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, a dark hole ringed with bronze fading out to greys, 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 tunnel is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, the dark hole framed by plates, and stops. Nothing flashes: the plates stream past steadily and the glints are small. Text needs a dark panel: bare white text reaches 6.6:1 on a typical pixel but drops to about 2:1 on the lightest 5% of the frame. On a bg-black/60 panel, as in Usage, it stays above 5.9:1 everywhere, and on bg-black/70 above 8.7:1.

FAQ

Credits

Inspired by a cellular tiled tunnel (opens in a new tab) by Shane on Shadertoy. This is a new shader written from a description of the look, not a port: the wrapped plate pattern and its facets, the mosaic and its glints, the path, the lighting and the code are ours. The Voronoi edge distance follows Inigo Quilez's article (MIT), and the hash is lowbias32 by Chris Wellons, in the public domain; both keep their credit lines in the WGSL.

API Reference