Shader Background
experimentalA full-bleed WebGL scene behind content — fourteen procedural presets (dunes, hills, storm sea, meadow, petals, glass wave, liquid metal, silk, mesh gradient, topography, particle ocean, nebula, warp, helix) on one engine, behind a section or pinned behind a whole page, paused off-screen.
- Effects & motion
- 3 files
- 1 npm package
- Accessibility notes
- Renders with WebGL
- 14 looks in Backgrounds
pnpm dlx @dowel-ui/cli add shader-backgroundnpm packages installed: class-variance-authority.
import { ShaderBackground } from "@/components/ui/shader-background";Default
Dunes
Nebula
Custom Colours
Page Background
<ShaderBackground>
| Prop | Type | Default |
|---|---|---|
attach | "box" | "viewport" | "box" |
colorsThe palette, tokens ( | readonly string[] | — |
fade | "none" | "edges" | "bottom" | "top" | "none" |
grainFilm grain, 0–1. Default 0.25. | number | 0.25 |
presetWhich scene to draw. Default | ShaderBackgroundPreset | "mesh-gradient" |
ref | Ref<HTMLDivElement> | — |
resolutionFraction of the display's pixel density to render at, 0.25–1. Default 1. | number | 1 |
scaleZoom into the scene. Default 1; above 1 is closer. | number | 1 |
speedAnimation speed multiplier. Default 1; 0 holds the scene on its still frame. | number | 1 |
vignetteDarkening toward the corners, 0–1. Default 0.3. | number | 0.3 |
Plus every attribute of <div> except ref.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes