Orb Grid Shader for React

Orb Grid Shader draws three soft orbs, indigo, pink and amber, drifting slowly under a fine square grid. Each orb is also a gravity well: the grid pinches toward it like a spacetime diagram, and its lines and crossings take the orb's colour where it passes beneath, fading to a faint hairline everywhere else. A WGSL fragment shader on WebGPU computes every pixel each frame, so the lines stay one CSS pixel wide and sharp at any size, for about a tenth of a millisecond of GPU time a frame.

Use it behind a product launch, an AI or startup hero, a pricing section or a changelog header. For a flat grid in plain CSS, use the Grid Pattern background; for colour without structure, Mesh Gradient or Gradient Mesh Shader; for a sheet of dots instead of lines, Breathing Dots Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS grid over the same glows in browsers without WebGPU.

Installation

Usage

import { OrbGridShader } from "@/components/ui/orb-grid-shader";

<OrbGridShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-white">Launch week</h1>
</OrbGridShader>

Orb Grid Shader is a container: your content sits on top of the grid, 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 page is near-black in both color schemes, so put white or light text over it.

The colors take any CSS color and follow a theme switch, so orbAColor="var(--primary)" ties the first orb to your brand. lineColor sets the hairlines and their highlights, and backgroundColor the page behind them.

Demos

Flat grid

warp={0} turns the wells off, so the grid stays square and only the colour moves: calmer behind a pricing table or dense copy. cellSize={48} opens the grid up, and intensity={0.7} dims the orbs.

Interactive, in a card

With interactive, the pointer is one more small well: the grid dimples toward it and its lines brighten as it moves over the card. The well eases after the pointer, and fades out when the pointer leaves, so the grid relaxes. Touch doesn't move it. Here the orbs are cyan, indigo and violet.

Performance

About 0.13 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. It's one of the lightest shaders, so it keeps quality={1}: the hairlines would 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 a CSS grid over three soft glows of the same colors, 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 grid is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame and stops. Nothing flashes: the orbs drift over tens of seconds. At the default colors, white text stays above 8:1 on 95% of the box and above 12:1 on three quarters of it; only the brightest crossings at the heart of each orb come close to white, so keep small body text off the orbs' centres, especially at intensity above 1.

FAQ

API Reference