Static Radial Gradient
A layered radial gradient with focal, distortion, and grain controls.
Customize
Installation
pnpm dlx shadcn@latest add @vivid-layer/static-radial-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 { StaticRadialGradient } from "@/components/effects/static-radial-gradient"
export function StaticRadialGradientExample() {
return (
<div className="h-96 overflow-hidden rounded-xl">
<StaticRadialGradient />
</div>
)
}API reference
The wrapper adds playback and runtime safeguards while preserving the
complete Paper StaticRadialGradient API. This includes speed, frame,
focal and distortion controls, sizing controls, pixel-ratio controls, styles,
and every upstream prop. See the
Paper Static Radial Gradient reference
for the full prop table and accepted ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
playback | "auto" | "always" | "paused" | "auto" | Controls motion policy when a non-zero Paper speed is used. Auto pauses for reduced motion and while the shader is outside the viewport. |
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 colors as the only way to communicate information, and verify the contrast of any overlaid content.
When motion is enabled through Paper's speed prop, playback="auto" honors
reduced motion by rendering a stable frame.
Performance
The default maxPixelCount limits rendering to approximately 1080p. When a
non-zero speed is used, automatic playback also pauses work once the component
is more than 200px outside the viewport. Use static posters in dense 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.
Credits
The rendering engine is Paper Shaders, distributed under the Apache License 2.0. vivid-layer supplies the React adapter, playback policy, fallback, documentation, and Registry packaging; it does not vendor or modify Paper's shader source.