Grain Gradient
An animated, grain-textured gradient with seven configurable abstract shapes.
Customize
Installation
pnpm dlx shadcn@latest add @vivid-layer/grain-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 { GrainGradient } from "@/components/effects/grain-gradient"
export function GrainGradientExample() {
return (
<div className="h-96 overflow-hidden rounded-xl">
<GrainGradient
colors={["#ff6b35", "#ffb627", "#fff4d6", "#7f2ccb"]}
colorBack="#180b2b"
shape="blob"
noise={0.22}
speed={0.18}
/>
</div>
)
}API reference
The wrapper adds playback and accessible runtime defaults while preserving
the complete Paper GrainGradient API. This includes frame, scale,
rotation, offsets, fit controls, pixel-ratio controls, styles, and every
shader-specific prop. See the
Paper Grain 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[] | ["#ff6b35", "#f7c948", "#ff8fab", "#7c3aed"] | Supplies up to seven gradient colors. The wrapper provides a warm curated palette when omitted. |
colorBack | string | "#1e0c0a" | Sets the background color behind the animated bands. |
shape | "wave" | "dots" | "truchet" | "corners" | "ripple" | "blob" | "sphere" | "blob" | Selects the generated abstract form. |
softness | number | 0.7 | Controls the sharpness of transitions between color bands from 0 to 1. |
intensity | number | 0.35 | Controls distortion between color bands from 0 to 1. |
noise | number | 0.45 | Controls the grain overlay from 0 to 1. |
speed | number | 0.18 | Sets the base animation rate. Playback can resolve the effective speed to zero without changing this value. |
scale | number | 1.15 | Sets the default zoom level while remaining fully overridable through the Paper API. |
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.