Valley Mist Shader for React

Valley Mist Shader paints mountains the way an ink-wash scroll does. Six ridges recede in layers, each a little paler than the one in front, from a dark green-grey at the bottom to a blue-grey haze on the horizon. Every ridgeline is darkest at its crest and fades down into mist that pools in the valley beneath it, and the mist drifts slowly sideways, thickening and thinning as it goes. The ridges glide past at their own parallax speeds, and a pale sun sits low behind the farthest ones. A WGSL fragment shader on WebGPU computes every pixel each frame: each ridgeline is a sum of 1D noise, and the mist is two layers of 2D noise moving at different speeds.

Use it behind a calm hero, an outdoor, travel or meditation page, or a journaling app's welcome screen: the sky fills the top half, clear for a headline. For mist with no land, use the Fog background; for a top-down relief map, Terrain; for the same calm from above the clouds, Cloud 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 ridges in browsers without WebGPU.

Installation

Usage

import { ValleyMistShader } from "@/components/ui/valley-mist-shader";

<ValleyMistShader className="flex min-h-[32rem] items-start justify-center pt-24">
  <h1 className="text-5xl font-semibold text-slate-950">Slow down</h1>
</ValleyMistShader>

Valley Mist Shader is a container: your content sits on top of the landscape, 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 sky is a pale paper white in both color schemes, so put dark text in the top half, such as text-slate-950; keep it above the ridges, as the nearest ones are as dark as the text.

Demos

Night

The five color props repaint the whole scene. skyColor="#0e1626" and nearColor="#0a0f18" darken it to night, farColor="#2a3a55" turns the distant ridges to moonlit blue, mistColor="#5d6f8f" dims the mist so it glows rather than glares, and sunColor="#e8eeff" makes the low sun a full moon. Put white text in the sky.

In a card

In a small box, six ridges crowd together. layers={4} keeps the four boldest, and height={0.55} raises the farthest ridgeline so the land fills more of the card.

Performance

About 0.6 ms of GPU time a frame at 1280×720 on an M2 Max laptop, so it runs at full quality; slower GPUs take several times longer. The mist is soft, so quality={0.5} looks almost the same at a quarter of the work, though the ridgelines lose a little of their crispness. 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 from the sky down through the ridge colors, which follows the color props, 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 landscape 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 ridges and the mist and stops. Nothing flashes: the mist drifts over tens of seconds. In the top half of the default scene, slate-950 text stays above 17:1; across the middle band, where the far ridges rise, it stays above 6:1 on 95% of the pixels but falls to about 3.5:1 on the darkest crests, so keep body text in the sky. White text doesn't read on the default sky; use it only with dark colors, as in the night demo.

FAQ

API Reference