Bioluminescence Shader for React

Bioluminescence Shader draws a beach at night, seen from low down. Slow waves roll in under a starless navy sky, and wherever a crest breaks, plankton in the water light up electric cyan along its lip, then fade to black behind it within a couple of seconds. Near the shore the glow runs a little way up the sand, and the wet sand mirrors it. A WGSL fragment shader on WebGPU maps each pixel below the horizon to a point on the beach, then lights it from three sets of wave crests that cross at slight angles, each bent by noise and breaking in sections.

Use it behind an ocean nonprofit, a marine-biotech or a resort hero, or any dark page that wants a calm scene with a spark of life. For a daylit sea, use Sea Shader; for the same night in plain CSS, with no GPU, the Deep Sea background has glowing jellyfish instead of surf. The sky stays dark and empty for your headline. It runs only while it's on screen, holds a still frame with reduced motion, and shows a gradient of the same night and surf in browsers without WebGPU.

Installation

Usage

import {
  BioluminescenceShader,
} from "@/components/ui/bioluminescence-shader";

<BioluminescenceShader className="flex min-h-[32rem] flex-col items-center pt-24">
  <h1 className="text-5xl font-semibold text-white">Into the blue</h1>
  <p className="mt-3 text-slate-400">Protecting the reefs since 1998.</p>
</BioluminescenceShader>

Bioluminescence Shader is a container: your content sits on top of the beach, 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 night is the same in both color schemes, so use light text: put the headline in the sky, the top 42% by default, where white text stays above 18:1 and text-slate-400 above 7:1. Over the sea, white still reads on 93% of the area, but not over a bright crest.

Demos

Green plankton

glowColor="#a6ff4d" turns the surf the green of some plankton blooms, and the brightest crests still run to white. afterglow={0.8} lets each crest leave a longer trail, about three seconds, so more of the sea glows at once.

In a card

horizon={0.3} raises the horizon so the beach fills more of a small box, and waves={2} keeps two sets of crests, a calmer sea that doesn't crowd the card.

Performance

About 0.7 ms of GPU time a frame at 1280×720, measured on an M2 Max laptop at full quality. Slower GPUs take several times longer. Each set of waves adds about 0.15 ms, so waves={2} is a little cheaper; on a slow GPU, quality={0.5} renders a quarter of the pixels, and the soft glow hides it well. 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 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 gradient of the same scene, a navy sky over dark water with two soft cyan glows near the shore, 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 beach is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, two crests breaking near the shore, and stops. Nothing flashes: a crest brightens over seconds as it nears the shore, and any one point of the sea lights up about once every three seconds at the default speed, once a second at speed={3}. For text, the sky is the place: white text there stays above 18:1 on every frame we measured.

FAQ

API Reference