Streamlines Shader for React

Streamlines Shader draws a wind tunnel on the GPU. Sixty hairlines run left to right like smoke, part smoothly around two invisible cylinders that drift slowly through the frame, and close again behind them, wavering a little in their wake. The lines are the contours of a potential-flow stream function: a steady stream plus a doublet for each cylinder, a slowly swinging circulation that tilts the flow round them, and a faint ripple of noise downstream. Where the flow runs fastest, over each cylinder's shoulders, the ink warms to an orange accent. Every pixel is computed each frame by a WGSL fragment shader on WebGPU, for about 0.3 ms of GPU time a frame.

Use it behind an infrastructure, AI or aerodynamics hero, or anywhere a page wants precise, technical line art instead of color. With interactive, the pointer becomes one more cylinder and the lines part around the cursor. For closed contour lines of noise instead of flow, use Noise Contours Shader or the CSS Topography background; for streaks blowing past, the Wind background; for a single rising thread of smoke, Incense Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows faint CSS lines on the same paper in browsers without WebGPU.

Installation

Usage

import { StreamlinesShader } from "@/components/ui/streamlines-shader";

<StreamlinesShader
  className="flex min-h-[32rem] items-center justify-center"
  interactive
>
  <h1 className="text-5xl font-semibold text-neutral-900">Built for scale</h1>
</StreamlinesShader>

Streamlines 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 paper is light in both color schemes unless you set backgroundColor, so put dark text on it. With interactive, the pointer's cylinder grows in while the pointer is over the box and shrinks away when it leaves, so at rest the flow is the same as without it.

Demos

Interactive

interactive makes the pointer a cylinder the lines part around; it grows in under the pointer and shrinks away when the pointer leaves. obstacles={1} keeps a single drifting cylinder, so the cursor's stands out, and lines={80} draws the flow finer. Touch doesn't move it.

Dark, in a card

lineColor, backgroundColor and accentColor take any CSS color: here light lines on near-black paper, warming to cyan. lines={40} spaces them out for a small surface.

Performance

About 0.3 ms of GPU time a frame at 1280×720 on an M2 Max laptop, the same with every obstacle on, since each pixel always weighs all four cylinders and the pointer; slower GPUs take several times longer. The lines are 1 CSS pixel wide, so keep quality at 1: half resolution would blur them. 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 CSS lines in your lineColor on your backgroundColor, 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, even with interactive, which only reads the pointer's position. With reduced motion it draws one still frame, the lines parting round both cylinders, and stops. Nothing flashes: the cylinders drift over tens of seconds and the wake wavers slowly. The paper alone gives dark text about 19:1, but the lines run through your text and drop it to 1.4:1 where they cross, so set body text on a panel: black text on bg-white/70 stays above 11:1.

FAQ

API Reference