Digital Tunnel Shader for React

Digital Tunnel Shader draws a neon tunnel on the GPU. A WGSL fragment shader on WebGPU ray marches a wavy cylinder from inside it, every pixel, every frame, and colors the wall by depth through three neon colors, so tight rings cycle cyan, magenta and electric blue as they flow out of the center. The base drifts from teal to indigo, a soft blue haze spreads from the core, faint sparkles twinkle along the walls, and fine scanlines and a vignette finish the screen.

Use it behind a tech, gaming or AI launch, a sign-in screen or a full-screen intro. For glowing rings in plain CSS, with no GPU, use the Portal background; for a bright, colorful flight through star-cut planes, Starry Planes Shader; for a lit tunnel of glossy tiles, Advanced Tunnel Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS ring gradient of the same colors in browsers without WebGPU.

Installation

Usage

import {
  DigitalTunnelShader,
} from "@/components/ui/digital-tunnel-shader";

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

Digital 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 screen is dark in both color schemes, so put white or light text over it, and keep small text off the bright rings at the center.

Demos

Custom colors

The rings cycle through fromColor, viaColor and toColor, then back to fromColor. Here they run orange, pink and violet, with a violet hazeColor at the core and peach particleColor sparkles. Every color prop takes any CSS color, var(--primary) included.

In a card

The tunnel scales with its box. particles={0} hides the sparkles and scanlines={false} turns off the lines, for a cleaner surface under a form or a stat.

Performance

About 0.3 ms of GPU time a frame at 1280×720 on an M2 Max laptop, so it renders at full resolution; slower GPUs take several times longer. quality={0.5} renders a quarter of the pixels, and the scanlines keep their size, but the rings at the center go soft. 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 rings and scanlines, 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 teal screen with the rings at the center, and stops. Nothing flashes: the colors flow over seconds and each sparkle fades in and out over about two seconds. White text has at least 6:1 contrast over 95% of the frame and 15:1 on a typical pixel, but the rings at the center drop to about 3.7:1, so keep small body text off them.

FAQ

API Reference