Ridgeline Shader for React

Ridgeline Shader stacks 48 thin lines, like the classic pulsar plot: each one runs flat at the sides and rises into a cluster of noisy peaks in the middle, and the ground under each line hides the lines behind it, so the stack reads as a landscape seen from the front. The peaks come from value noise that slides slowly with time, so they swell, drift and settle. A WGSL fragment shader on WebGPU walks the lines front to back for every pixel and stops at the first one that covers it, drawing crisp lines that keep their width on steep flanks.

Use it behind a music or label hero, a data or science page, or a footer band: it's monochrome, so it suits any brand. For a live heat map of a signal instead, use Spectrogram Shader; for independent wavy channels with no occlusion, in plain CSS, the Brainwaves background. It runs only while it's on screen, holds a still frame with reduced motion, and shows faint CSS stripes on the same ground in browsers without WebGPU.

Installation

Usage

import { RidgelineShader } from "@/components/ui/ridgeline-shader";

<RidgelineShader 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">Ship faster</h1>
  </div>
</RidgelineShader>

Ridgeline Shader is a container: your content sits on top of the lines, 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 ground is near-black in both color schemes, so use white text. It reads at 19:1 on the bare ground, and the top tenth of the box stays clear of the lines at the default intensity; over the lines, put copy on a bg-black/60 panel, like the one above, which keeps white text above 6.5:1.

Demos

Accent

accentColor fades the far lines into a second color, here a pink-red, from about a third of the way back. lines={24} halves the count, so each line is clearer and the peaks read as separate ridges, which suits an analytics or data page.

Footer band

A short, wide box makes a band for a footer or a section break. spread={1} widens the peaks across the band, intensity={0.6} keeps them low enough to fit, and lines={20} keeps the lines apart at this height.

Performance

About 1 ms of GPU time a frame at 1280×720 on an M2 Max laptop with the default 48 lines; slower GPUs take several times longer. Each pixel checks only the lines whose peaks can reach it, front to back, and stops at the first one that covers it; at the flat sides that's one or two. More lines or a higher intensity means more lines to check in the middle. Keep quality at 1: the lines are 1.5 CSS pixels wide and blur at half resolution. 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 faint horizontal stripes and a soft glow in the line color on the same ground, 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 lines are decoration: they're hidden from assistive tech and let every click through to your content. With reduced motion it draws one still frame and stops. Nothing flashes: the peaks rise and fall over seconds, and the fine jitter on each line moves slowly. White text reads at 19:1 on the bare ground, but not over the lines: put copy there on a bg-black/60 panel (white text above 6.5:1) or bg-black/70 (above 9:1).

FAQ

API Reference