Tunnel

Sixty-four thousand points are wound in rings around a closed 3D path, twisting as they go, and the camera rides the path looking just ahead. A rainbow cycles along the tube and linear fog swallows the far end. A dependency-free WebGL1 port of a three.js scene.

Adapted from Louis Hoebregts (CodePen) · MIT

3D pointsfly-throughfog

Live

Installation

Add it to your project

$

pnpm dlx shadcn@latest add https://funshader.com/r/tunnel.json

Installs 3 files into components/shaders. The tunnel brings its own renderer, so it needs nothing else.

Usage

Mount it behind your content

app/hero.tsx

import { TunnelShader } from "@/components/shaders/tunnel/tunnel-shader";

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden">
      <TunnelShader className="-z-10" />
      {/* your content */}
    </section>
  );
}

The shader fills its nearest positioned ancestor. Give the parent relative isolate and the shader -z-10 to put it behind everything else.

API reference

Props

Prop	Type	Default	Description
speed	number	1	Flight speed. 1 is the original pace, about 33 s per lap.
radius	number	4	Tube radius in world units.
pointSize	number	0.2	Point size in world units; points shrink with distance.
twist	number	5	Half-turns the spiral makes around the tube per lap.
hueCycles	number	4	Times the rainbow repeats along the tube.
hueOffset	number	0	Hue offset in degrees.
saturation	number	1	HSL saturation, 0–1.
lightness	number	0.5	HSL lightness, 0–1.
fogNear	number	30	Distance where fog starts.
fogFar	number	150	Distance where fog is total. Also the camera's far plane.
background	string	"#000000"	Clear and fog colour.
height	number	100	Maximum random height of each path control point.
seed	number	7	Seed for the path heights.
rings	number	1600	Rings along the tube. Rebuilds the geometry.
pointsPerRing	number	40	Points per ring. Rebuilds the geometry.
paused	boolean	false	Freezes the current frame.
maxDpr	number	2	Cap on devicePixelRatio.
respectReducedMotion	boolean	true	Draws a still frame for prefers-reduced-motion.
className	string	—	Classes for the absolutely-positioned wrapper.

Keep exploring

More shaders

09

Floating Grove

A low-poly island where trees spring up, sway and reseed.

3D low-polyelastic growthsoft shadows

05

Mesh Drift

Violet blobs drifting backwards through a warped field.

gaussian blobsfbm warpswirl cursor