Cloud Rays Shader for React

Cloud Rays Shader puts the sun behind a broken bank of cloud high in the frame. Warm shafts fan down through the gaps across a hazy sky and slide as the clouds drift; the edges that face the sun glow gold, the cloud bodies are slate, and the sky deepens to blue-gray at the bottom. The clouds are five octaves of fractal noise, cut by coverage and thinned round the sun so some light always gets through. The shafts are a screen-space light-shaft integral: for each pixel, 28 taps along the line to the sun, through a cheaper copy of the clouds near it, add up how much of the light is blocked, so the haze is lit where the sun shines through a gap. A WGSL fragment shader on WebGPU draws every pixel each frame.

Use it behind a nonprofit, faith, travel or wellness hero, or any page that wants hopeful, moving light. For a dusk desert instead, use Mirage Shader; for film light leaking in from the edges, Light Leak Shader; for a sun with rays and nothing in the way, in plain CSS, the Corona background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS sun with faint rays in browsers without WebGPU.

Installation

Usage

import { CloudRaysShader } from "@/components/ui/cloud-rays-shader";

<CloudRaysShader className="flex min-h-[32rem] items-center justify-center">
  <div className="rounded-xl bg-black/50 px-8 py-6">
    <h1 className="text-5xl font-semibold text-white">Ship faster</h1>
  </div>
</CloudRaysShader>

Cloud Rays 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". White text reads on the dusky sky, about 5:1 in the middle of the frame at the median, but a shaft or the sun can light up behind it, so give copy a panel: bg-black/50 keeps white text above 5.5:1 in the middle of the frame and above 4.4:1 anywhere. The palette is the same in both color schemes.

Demos

Dawn

hazeColor="#ffc2c2" turns the shafts and the light round the sun pink, and skyColor="#3a4a7a" makes the sky a deeper blue: early morning instead of late afternoon.

In a card

sunPosition={[0.5, 0.12]} centers the sun over a narrow card, so the shafts fan down both sides. quality={0.5} renders at half resolution: the clouds and shafts are soft, so it looks the same for a quarter of the pixels.

Performance

About 2 ms of GPU time a frame at 1280×720 on an M2 Max laptop at its default quality of 0.75, and 3 to 4 ms at quality={1}; slower GPUs take several times longer. Most of it is the 28 taps per pixel that trace the shafts. The scene is soft, so it renders at three-quarter resolution unless you set quality, and you can't tell. 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 sun with a warm haze and faint rays over the same sky, which follows your 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 sky is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, shafts falling from a sun half hidden by cloud, and stops. Nothing flashes: the clouds drift across the sun over many seconds, so the shafts brighten and fade slowly. White text on a bg-black/50 panel stays above 4.4:1 everywhere in the frame.

FAQ

API Reference