Shader Background

Installation

pnpm dlx shadcn@latest add @paneui/shader-background

import { ShaderBackground } from "@/components/ui/shader-background"

<ShaderBackground className="h-64 rounded-3xl p-6">
  <h2>Your week, handled</h2>
</ShaderBackground>

Use to match a brand palette instead of the theme.

Use to tune a shader beyond the built-in props.

The animation stops under reduced motion and whenever the element is off screen. waves is a static pattern and ignores speed.

A WebGL shader layer behind its children, coloured from your theme tokens by default. Also accepts every prop of div.

variant= "mesh-gradient": "mesh-gradient" | "grain-gradient" | "warp" | "waves" | "dot-orbit"; Which shader to render.
colors: string[]; Any CSS colours, including var(--token) and color-mix(...), re-read when the theme changes. Defaults to tints of --primary and --background; waves uses only the first colour.
colorBack= "var(--background)": string; Base colour behind the pattern (grain, waves, dot orbit).
speed= 0.6: number; Animation speed. 0 freezes the current frame.
paused= false: boolean; Freeze the animation.
shaderProps: Partial<MeshGradientProps | GrainGradientProps | WarpProps | WavesProps | DotOrbitProps>; Extra props for the chosen shader, matched to variant. speed is always controlled by the component.
shaderClassName: string; Class for the shader layer (e.g. opacity or blend mode).

Prop	Type	Default	Description
variant	"mesh-gradient" \| "grain-gradient" \| "warp" \| "waves" \| "dot-orbit"	"mesh-gradient"	Which shader to render.
colors	string[]	—	Any CSS colours, including `var(--token)` and `color-mix(...)`, re-read when the theme changes. Defaults to tints of `--primary` and `--background`; `waves` uses only the first colour.
colorBack	string	"var(--background)"	Base colour behind the pattern (grain, waves, dot orbit).
speed	number	0.6	Animation speed. `0` freezes the current frame.
paused	boolean	false	Freeze the animation.
shaderProps	Partial<MeshGradientProps \| GrainGradientProps \| WarpProps \| WavesProps \| DotOrbitProps>	—	Extra props for the chosen shader, matched to `variant`. `speed` is always controlled by the component.
shaderClassName	string	—	Class for the shader layer (e.g. opacity or blend mode).

data-variant: The active variant.
data-paused: Present while the animation is frozen (paused, off screen or reduced motion).

Data attribute	Description
data-variant	The active variant.
data-paused	Present while the animation is frozen (paused, off screen or reduced motion).