Cloud Sea Shader for React

Cloud Sea Shader puts you just above a sea of clouds at golden hour. A rolling floor of cloud tops fills the lower half of the frame, lit gold where they face the low sun and lilac in the hollows, and drifts slowly toward you, churning as it comes. Above it the sky fades from peach at the horizon to deep blue, with the sun low on the left. The clouds are real volumes: a WGSL fragment shader on WebGPU marches each ray through a layer of 3D noise, and at every step marches a short way toward the sun to see how much light gets through. It's the heavy kind of shader, so it renders at half resolution by default.

Use it behind a travel, aviation or "above the noise" hero, or a calm brand page that wants open air. For flat banks of mist in plain CSS, with no GPU, use the Fog background; for sunbeams through broken cloud, seen from the ground, Cloud Rays Shader; for a seascape, Sea 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 clouds in browsers without WebGPU.

Installation

Usage

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

<CloudSeaShader className="flex min-h-[32rem] items-start justify-center pt-16">
  <h1 className="text-6xl font-semibold text-white drop-shadow">Above the noise</h1>
</CloudSeaShader>

Cloud Sea Shader is a container: your content sits on top of the sky, 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 scene is the same in both color schemes. Dark text such as text-slate-950 reads anywhere on the cloud floor: 4.5:1 on more than 99% of it. White text belongs high in the sky, and only large: in the top fifth it passes 3:1, the large-text minimum, on 96% of the area, but 4.5:1 on 62%, so put smaller white text on a panel.

Demos

Moonlight

sunColor="#cfd9ff" turns the sun into a cool moon, and zenithColor="#050a1a" with horizonColor="#24304f" darken the sky to night. The clouds take the moon's color, silver on top and slate in the hollows, and white text passes 4.5:1 across the whole sky, except over the moon itself.

In a card

altitude={0.8} flies higher, so a small box shows more cloud tops and fewer close-ups, and sunAngle={20} lifts the sun, so the light is softer and the hollows shallower.

Performance

Cloud 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 2.2 ms of GPU time at that default, and about 4.5 ms at quality={1}. Slower GPUs take several times longer, so keep the default on large screens; your own quality prop overrides it. The march stops as soon as a ray is lost in cloud and skips air the clouds can't reach, so a lower coverage is a little cheaper: about 1.7 ms at coverage={0.2}. 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, deep blue fading to a peach horizon over warm cloud, 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 clouds are decoration: they're hidden from assistive tech and let every click through to your content. With reduced motion the shader draws one still frame, eight seconds in, and stops. Nothing flashes: the clouds drift and churn over many seconds, and the sun stays put. For text contrast, see Usage: dark text on the cloud floor, large white text high in the sky.

FAQ

API Reference