Atmosphere & Background · The air of the page
Shader background着色器背景
- computed
- never settles
- one formula, many faces
The backdrop is neither an image nor a CSS gradient but a small formula running on the GPU: each pixel’s colour is computed from its coordinates and the clock, so it never stops moving and never repeats a frame. Aurora, liquid metal, plasma, silk, light rays — all the same thing with a different formula.
When to use it
Use it for hero and section backdrops that need texture without stealing focus — keep it under 0.6 opacity with the content on top. Two costs must be handled: it holds the GPU continuously (cap the framerate or resolution on low-end devices), and it never stops (freeze it to a single frame under prefers-reduced-motion).
Parameters
fullscreen fragment shader · 2 triangles · u_time drives noise field · dpr capped 2 · 30fps cap · no easing
Recipe
Shader background → fullscreen fragment shader · 2 triangles · u_time drives noise field · dpr capped 2 · 30fps cap · no easing
One sentence for your AI
Build a shader background: a WebGL canvas filling the container, a fullscreen quad from two triangles, and a fragment shader that computes a noise field from coordinates plus u_time and maps it to colour. Cap the device pixel ratio at 2 (higher just burns GPU) and the framerate at 30fps. Release the GL context on unmount, or a few scroll passes will exhaust the browser’s context budget. Drop resolution on low-end devices and freeze to a single frame under reduced-motion.