Plasma Tunnel Background
A full-bleed WebGL2 background that ports a compact GLSL raymarch into a copy-ready React component. A single oversized triangle drives ninety-nine accumulation steps through a sine-folded tunnel, with resolution, time, speed, intensity, and pixel-ratio controls exposed as uniforms. Pure WebGL2, no dependencies.
npx shadcn@latest add @compronents/plasma-tunnel-backgroundInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | "h-full w-full" | Classes applied to the canvas element. |
| speed | number | 1 | Animation speed multiplier for the shader time uniform. |
| intensity | number | 1 | Brightness multiplier for the accumulated color. |
| pixelRatio | number | 1.5 | Upper bound for devicePixelRatio when sizing the drawing buffer. |
speedsliderMultiplier applied to u_time before the tunnel scrolls forward.
intensitysliderBrightness multiplier before the final tanh compression.
pixelRatiosliderMaximum device pixel ratio used for the WebGL drawing buffer.
None.