Sea Shader for React

Sea Shader draws a 3D ocean on the GPU. Six sine swells and a layer of fractal chop make the surface, and a WGSL fragment shader on WebGPU ray marches it for every pixel, every frame. The water reflects a pale sky, darkens in patches where the chop turns away from the light, and fades into a bright band at the horizon. The camera glides forward and slowly sways, so the waves roll toward you. It's a raymarcher, the heavy kind of shader, so it renders at half resolution by default.

Use it behind a hero, a travel or wellness page, or a full-screen intro that should feel open and calm. For the same scene in plain CSS, with no GPU, use the Ocean background; for a flat water surface instead of a 3D view, Water Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a gradient of the same sky and water in browsers without WebGPU.

Installation

Usage

import { SeaShader } from "@/components/ui/sea-shader";

<SeaShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-slate-950">Set sail</h1>
</SeaShader>

Sea Shader is a container: your content sits on top of the water, 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 default sea is pale in both color schemes, so put dark text over it, such as text-slate-950. For a dark sea, set the colors as in the FAQ below.

Demos

Dusk

skyColor="#ffcc99" warms the sky, and the water reflects it, so the whole sea turns to a pastel sunset. waterColor="#1a2340" deepens the troughs and the patches to navy. The shader brightens every color, so pick them a little darker than the tone you want to see.

In a card

In a small box, the default's long swells show only a crest or two. waveFrequency={1.6} fits more, shorter waves into it, and waveHeight={0.7} keeps them low, so the card reads as open sea.

Performance

Sea Shader renders at quality={0.5} by default: half the screen's resolution, a quarter of the pixels. On an M2 Max laptop at 1280×720, a frame takes about 0.6 ms of GPU time at that default, and about 1.3 ms at quality={1}. Slower GPUs take several times longer, so keep the default on large screens. Your own quality prop overrides it. 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 gradient of the same sky and water, 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 sea is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame of the swells and stops. Nothing flashes: the waves roll over seconds, and the camera rides over the crests rather than through them, so even tall waveHeight values never cut the frame to sky. At the default colors, slate-950 text stays above 6:1 even against the darkest patches, and above 13:1 on three quarters of the sea. White text doesn't read on the default sea; use it only with dark colors.

FAQ

API Reference