Monster Tunnel Shader for React

Monster Tunnel Shader flies a camera down a tunnel of jagged blades on the GPU. A WGSL fragment shader on WebGPU builds the blades from one box: it repeats the space around the tunnel's axis six times, folds it over itself twice, thins the blades to points toward the center and twists the whole tunnel with depth, so they spiral into a dark core like claws. A lamp ahead of the camera shades their faces in teal, their edges glow neon green, and sheets of green light drift through them toward you while the tunnel slowly rolls and the blades writhe.

Use it behind a gaming or Halloween launch, a sci-fi hero or a full-screen intro that wants energy and a little menace. For a cleaner neon tunnel, use Digital Tunnel Shader; for a bright, friendly flight through tiles, Advanced Tunnel Shader; for a whirlpool of fine streaks in plain CSS, with no GPU, the Vortex background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS gradient of the same colors in browsers without WebGPU.

Installation

Usage

import {
  MonsterTunnelShader,
} from "@/components/ui/monster-tunnel-shader";

<MonsterTunnelShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-white">Into the maw</h1>
</MonsterTunnelShader>

Monster Tunnel Shader is a container: your content sits on top of the vortex, 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 is dark in both color schemes, so put white text over it: large headings read well, and smaller text wants a light panel behind it.

Demos

Ember

segments={3} gives the vortex three wide arms instead of six, color="#a855f7" turns the blades violet and glowColor="#f97316" makes their edges and the sweeping light orange.

In a card

The vortex scales with its box. spin={0.3} slows the roll and the writhing to a crawl, which suits a small surface next to text, while the camera keeps flying at full speed.

Performance

About 2.4 ms of GPU time a frame at 1280×720 on an M2 Max laptop, so it renders at full resolution, where the blade edges stay crisp; slower GPUs take several times longer. Each pixel marches up to 80 steps through the folded blades, and shades the one it lands on. segments and the colors don't change the cost. On a slow GPU or a large screen, quality={0.75} renders about half the pixels, and the edges stay sharp enough. 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 teal and green rings, cut by dark spokes around a black core, 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 vortex 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 blades spiraling around the dark core, and stops. Nothing flashes: a new ring of blades reaches the camera every 1.75 seconds, a sheet of light every 6.7, and the overall brightness swells and fades over about 16 seconds. White text reaches 4.5:1 on 92% of the frame and 9.8:1 on a typical pixel, but drops to about 1.8:1 on the brightest green edges; on a bg-black/40 panel it stays above 4.7:1 everywhere.

FAQ

Credits

Inspired by a monster tunnel shader (opens in a new tab) by butadiene on Shadertoy. This is a new shader written from a description of the look, not a port: the blade geometry, the folds, the lighting, the sheets of light and the code are ours. The box distance follows Inigo Quilez's articles (MIT), with its credit line in the WGSL.

API Reference