Mesh Gradient
A flowing multi-color mesh gradient for polished product backgrounds.
Customize
Installation
pnpm dlx shadcn@latest add @vivid-layer/mesh-gradientUsage
Give the parent element an explicit size. The shader fills the available width and height without taking ownership of positioning or page layout.
import { MeshGradient } from "@/components/effects/mesh-gradient"
export function MeshGradientExample() {
return (
<div className="h-96 overflow-hidden rounded-xl">
<MeshGradient
colors={["#d9fff5", "#75e6da", "#5b8def", "#183153"]}
distortion={0.65}
swirl={0.18}
grainOverlay={0.08}
speed={0.2}
/>
</div>
)
}API reference
The wrapper adds playback and accessible runtime defaults while preserving
the complete Paper MeshGradient API. This includes frame, scale,
rotation, offsets, fit controls, pixel-ratio controls, styles, and every
shader-specific prop. See the
Paper Mesh Gradient reference
for the full upstream prop table and accepted ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
playback | "auto" | "always" | "paused" | "auto" | Controls motion policy. Auto pauses for reduced motion and while the shader is outside the viewport; paused fixes the effective speed at zero. |
colors | string[] | ["#dff8ff", "#58d5c9", "#2f8cff", "#c4f1e6"] | Supplies up to ten mesh color spots. The wrapper provides a clear blue-green curated palette when omitted. |
distortion | number | 0.75 | Controls organic noise distortion from 0 to 1. |
swirl | number | 0.35 | Controls vortex distortion from 0 to 1. |
grainMixer | number | 0.08 | Adds grain distortion to the boundaries between mesh colors from 0 to 1. |
grainOverlay | number | 0.04 | Adds a monochrome post-processing grain overlay from 0 to 1. |
speed | number | 0.12 | Sets the base animation rate. Playback can resolve the effective speed to zero without changing this value. |
width / height | number | string | "100%" | Sets the canvas CSS dimensions. Size the parent element to establish the visible area. |
maxPixelCount | number | 2073600 | Caps the rendered pixel budget. Override only after measuring the target devices. |
Accessibility
The shader is decorative by default: it is hidden from assistive technology and does not receive pointer events. Do not use its color or motion as the only way to communicate information. When placing copy over the shader, add a local scrim when necessary and verify text contrast against every animation frame.
playback="auto" honors the user's reduced-motion preference by rendering a
stable frame. Use playback="always" only when continuous motion is essential
to the intended experience.
Performance
The default maxPixelCount limits rendering to approximately 1080p, and the
automatic playback policy pauses work once the component is more than 200px
outside the viewport. Prefer one prominent live shader per viewport and use
static posters for dense cards or component grids.
Browser fallback
The component renders a palette-matched CSS background during server rendering and while capability detection runs. It mounts Paper only when WebGL2 is available; unsupported browsers keep the static fallback instead of showing an empty or broken canvas.
Credits
The rendering engine is Paper Shaders, distributed under the Apache License 2.0. vivid-layer supplies the React adapter, defaults, playback policy, fallback, documentation, and Registry packaging; it does not vendor or modify Paper's shader source.