Lattice Light Shader for React

Lattice Light Shader draws the light of a late sun falling through a carved window screen, a mashrabiya of eight-point stars, onto a plain wall. Sunlight is parallel, so the screen's shadow is a sheared, stretched copy of it: its verticals stay upright and its rows slant down across the wall. The edges are crisp on the side nearest the window and soften with the distance the light has crossed, warming to orange where they blur; a faint haze hangs in the beam, the plaster has a soft grain, and the whole patch drifts as the sun moves. A WGSL fragment shader on WebGPU draws every pixel each frame.

Use it behind an architecture, interior, hotel or wellness hero, a seasonal page or a testimonial that wants warmth and calm rather than motion. For stage lights sweeping a section, use the Spotlight background; for shafts of light through cloud, Cloud Rays Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a soft CSS pool of slanted light in browsers without WebGPU.

Installation

Usage

import {
  LatticeLightShader,
} from "@/components/ui/lattice-light-shader";

<LatticeLightShader className="flex min-h-[32rem] items-end p-12">
  <h1 className="text-5xl font-semibold text-white">Stay a while</h1>
</LatticeLightShader>

Lattice Light Shader is a container: your content sits on top of the wall, 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 light falls right of center and the lower left stays in shade, so white text reads there, like the heading above: the bare wall gives it 9:1 to 13:1. Over the light itself, put copy on a panel: bg-black/50 keeps white text above 5.3:1 anywhere in the frame.

Demos

Window grid

pattern="grid" swaps the stars for square panes, like an old window, and softness={1.6} blurs the far edges further. Here lightColor, wallColor and shadowColor set pale morning light on a warm taupe wall, behind a quote or a testimonial.

In a card

pattern="hex" casts a honeycomb screen, scale={0.8} makes its openings bigger so they read at card size, and intensity={1.2} brightens the light a little. The patch keeps its place in any box: in a narrow one the view widens so the light still fits.

Performance

About 0.2 ms of GPU time a frame at 1280×720 on an M2 Max laptop: a few box distances per pixel and a little noise for the plaster. Slower GPUs take several times longer. It keeps full quality: the near edges are sharp and would soften at half resolution, though the far side is soft anyway. 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 soft CSS pool of slanted light on the same wall, 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 light is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame and stops. Nothing flashes: the sun's slow sway takes about two minutes to come back round. With interactive, the pointer moves the sun, eased, so the light glides rather than jumps. White text reads on the shaded wall, above 9:1; over the light, use a panel.

FAQ

API Reference