Biomine Shader for React

Biomine Shader flies a camera along a winding path through a living cavern. Glossy crimson tubes branch and loop across the view, wet with silver-blue highlights and webbed with dark veins under the skin, and they glow red wherever they're thin enough for the light to shine through. Behind them, crusty grey-pink mineral walls close the cavern, and the depths fade into a pale salmon haze. The tubes swell in slow waves that run along them. A WGSL fragment shader on WebGPU ray marches the scene for every pixel: the tubes are one side of a warped gyroid, a surface made of a single line of trigonometry, with a corridor carved out round the camera's path.

Use it behind a biotech, medical or science page, a game or a sci-fi launch, anywhere that wants something organic and strange rather than abstract. For a flight through glowing spheres instead, use Sphere Field Shader; for a lit tunnel of cells, Cellular Tiled Tunnel Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a gradient of the same chamber in browsers without WebGPU.

Installation

Usage

import { BiomineShader } from "@/components/ui/biomine-shader";

<BiomineShader className="flex min-h-[32rem] items-center justify-center">
  <div className="rounded-xl bg-black/60 px-8 py-6">
    <h1 className="text-5xl font-semibold text-white">Grown, not built</h1>
  </div>
</BiomineShader>

Biomine Shader is a container: your content sits on top of the cavern, 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 scene mixes dark tubes with a pale glowing chamber in the middle, and looks the same in both color schemes, so no bare text color reads everywhere: put copy on a panel, like the bg-black/60 one above.

Demos

Cold cave

glowColor="#22d3ee" makes the light through the tubes cyan, fogColor="#cfe8ef" turns the haze and the mineral walls an icy blue-grey, and tubeColor="#16404f" gives the tubes a deep teal skin. The three together turn the warm, fleshy cavern into a frozen one.

In a card

speed={0.4} slows the flight and pulse={0.5} halves the swelling, so the card stays calm next to its content. quality={0.5} renders a quarter of the pixels: in a box this small the soft, wet surfaces hide it, and the GPU does a fraction of the work.

Performance

Biomine Shader renders at quality={0.75} by default: three quarters of the screen's resolution, a little over half the pixels. On an M2 Max laptop at 1280×720, a frame takes about 2 ms of GPU time at that default, 3.4 ms at quality={1} and 1.4 ms at quality={0.5}. Slower GPUs take several times longer, so keep the default, or go to 0.5 on phones. Your own quality prop overrides it. 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 of the same chamber, a pale center ringed with crimson, in your fogColor, glowColor and tubeColor, 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 cavern is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, a ring of tubes framing the glowing chamber, and stops. Nothing flashes: the camera glides at a walking pace, the tubes swell over two seconds, and the corridor is carved round the camera's path, so it never passes through a tube. Bare white text drops below 3:1 on the pale chamber, so use a panel: bg-black/60 keeps white text above 5.8:1 everywhere on the default colors, and bg-black/70 above 8.6:1.

FAQ

Credits

Inspired by Biomine (opens in a new tab) by Shane on Shadertoy, through shadcn.io's version. The idea, a flight through a gyroid of glossy tubes with faked translucency over mineral walls, is the same; the code, the scene, the shading and the palette are ours, written from scratch. The smooth maximum follows Inigo Quilez's article (MIT), and the hash is lowbias32 by Chris Wellons (public domain).

API Reference