Breathing Dots Shader for React

Breathing Dots Shader lays a grid of dots on a sheet tilted back from you, so the dots shrink and crowd toward the top. The sheet swells and settles: drifting 3D simplex noise and a slow breath that travels out from a wandering point set each dot's size and brightness, so dots on a crest grow and glow while dots in a trough shrink to pinpoints. The color runs from violet on the left through cyan to mint on the right, and the pointer presses a soft dimple into the sheet that sends out a ring every three seconds. A WGSL fragment shader on WebGPU draws every dot each frame, with anti-aliased edges and no texture.

Use it behind an AI product, a SaaS hero or an empty state that should feel alive without being busy. For a flat dot grid in plain CSS that lights up under the pointer, use the Dot Pattern background; for soft orbs under a hairline grid, Orb Grid Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS dot grid in browsers without WebGPU.

Installation

Usage

import {
  BreathingDotsShader,
} from "@/components/ui/breathing-dots-shader";

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

Breathing Dots Shader is a container: your content sits on top of the sheet, 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 sheet is dark in both color schemes, so put white or light text on it. The pointer's dimple fades in while the pointer is over the box and fades out when it leaves, so at rest the whole sheet breathes.

Demos

Flat

tilt={0} faces the sheet straight on, so every dot sits on an even grid, as on a sign-up panel. spacing={14} packs the dots tighter, and intensity={0.7} keeps the swell gentle.

In a card

spacing={22} and dotSize={1.4} make fewer, bigger dots that read at card size, and interactive={false} turns the pointer's dimple off, so the card only breathes.

Performance

About 0.24 ms of GPU time a frame at 1280×720 on an M2 Max laptop, so it keeps full quality: the dots are small and sharp, and half resolution would blur them. Slower GPUs take several times longer. 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 of cyan dots over a faint violet-to-mint wash, 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 sheet is decoration: it's hidden from assistive tech and lets every click through to your content. The dimple follows a mouse or pen, never touch. With reduced motion it draws one still frame and stops. Nothing flashes: a breath takes about six seconds, and the ring fades as it spreads. White text reads well: across the renders it keeps above 7.4:1 contrast on 90% of the box, and the brightest crest dots drop to about 2:1, so keep small body text on a panel.

FAQ

API Reference