Oldschool Tube Shader for React

Oldschool Tube Shader puts the camera inside a metal tube, the way demoscene effects did it: no ray marching, just one exact hit on a cylinder per pixel, computed by a WGSL fragment shader on WebGPU. The wall is unrolled into Voronoi cells: each cell is a gunmetal plate with a bevelled rim and a faceted crown, set in a raised silver lattice etched with a knurled diamond pattern. A third of the plates are glass lit from inside, where a second layer of cells deeper in the wall slides past as you move, glowing red through orange to yellow. The camera flies down the tube while it rolls and swings, every 25 seconds, from looking down the dark far end to grazing the wall.

Use it behind a retro or demoscene-styled page, a music player, a gaming hero or a full-screen intro. For a fast flight through a tunnel of faceted plates, use Cellular Tiled Tunnel Shader; for a colorful tunnel of glossy tiles, Advanced Tunnel 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 tube's rings and glow in browsers without WebGPU.

Installation

Usage

import {
  OldschoolTubeShader,
} from "@/components/ui/oldschool-tube-shader";

<OldschoolTubeShader className="flex min-h-[32rem] items-center">
  <div className="ml-8 rounded-xl bg-black/60 p-8 backdrop-blur-sm">
    <h1 className="text-5xl font-semibold text-white">Press play</h1>
  </div>
</OldschoolTubeShader>

Oldschool Tube Shader is a container: your content sits on top of the tube, 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 metal is mid-grey with hot highlights in both color schemes, so set text on a dark panel, as above.

Demos

Egyptian

palette="egyptian" turns the lattice gold, the plates turquoise and the inner light an electric blue to aqua, and spin={0.4} slows the swing to about once a minute, so the view stays down the tube longer.

In a card

palette="gold" gives a gold lattice with bronze plates and an amber glow, a warm backdrop for a "now playing" card, and relief={1.5} deepens the bevels and facets.

Performance

About 1.1 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. There's no march: each pixel hits the tube once, works out its cell, and only the glowing plates look up the second layer behind them. 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 of silver rings closing in on a dark end, with a few warm glows, 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 tube 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 wall in an oblique view with the tube's end below, and stops. Nothing flashes: about two plates pass a spot each second, the glowing plates brighten and dim over eight seconds, and the camera turns over tens of seconds. Text needs a panel: bare white text reaches 7.3:1 on a typical pixel but drops to about 2.2:1 on the brightest 5% of the frame, the lattice and the hot glass. On a bg-black/60 panel it stays above 5.7:1 everywhere.

FAQ

Credits

Inspired by an oldschool tube shader (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 cell layout, the bevels and crowns, the knurled lattice, the glass and its inner layer, the camera, the palettes 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