WebGL Background
An interactive WebGL2 background that fills its parent container with pixelated shapes and click-triggered ripple animations.
WebGLBackground renders a Three.js WebGL2 canvas that sizes itself to its nearest relative ancestor via absolute inset-0. A fullscreen quad is shaded by a custom GLSL fragment shader supporting four pixel shapes (square, circle, triangle, diamond), a configurable ink colour, interactive click-ripple effects, and mouse-tracking. When interactive is false the canvas ignores pointer events entirely.
SSR note: This component is
"use client"and requires a WebGL2 context. Import it withnext/dynamicand{ ssr: false }when used in server or static contexts. It silently bails out when WebGL2 is unavailable.
Installation
npx shadcn@latest add @adv/webgl-backgroundUsage
import dynamic from 'next/dynamic';
const WebGLBackground = dynamic(
() => import('@/components/WebGLBackground').then((m) => m.WebGLBackground),
{ ssr: false },
);
// Wrap in a relative container — the canvas fills it completely
<div className="relative h-screen w-full bg-black">
<WebGLBackground shape="circle" ink="#ffffff" pixelSize={4} interactive />
<div className="relative z-10">Your page content</div>
</div>Example
Click to create ripples
Props
| Prop | Type | Default | Description |
|---|---|---|---|
shape | "square" | "circle" | "triangle" | "diamond" | "square" | Shape drawn at each pixel grid cell. |
pixelSize | number | 4 | Size of each pixel cell in logical pixels. Larger values = coarser grain. |
ink | string | "#FFFFFF" | CSS colour string for the shape fill. |
interactive | boolean | true | When true, click events create ripple animations; the canvas receives pointer events. |
shapeScale | number | 1.0 | Uniform scale factor applied to the rendered shape within each cell. |
className | string | undefined | Additional CSS classes merged with absolute inset-0 on the host div. |
Paper Shader
A full-viewport Three.js WebGL overlay that renders an animated paper texture with warm window-light and subtle fibers using a custom GLSL fragment shader.
Texture Pattern
A zero-prop SVG component that renders a subtle repeating vertical-line texture as an absolutely-positioned background layer.