Search documentation

Find a vivid-layer page or product.

God Rays

Animated multi-color rays of light radiating from a central glow.

pnpm dlx shadcn@latest add @vivid-layer/god-rays

Customize

Bloom
0.4
Intensity
0.8
Density
0.3
Spotty
0.3
Mid Size
0.2
Mid Intensity
0.4
Speed
0.75
Scale
1
Rotation
0
Offset X
0
Offset Y
-0.55

API reference

The wrapper adds playback and runtime safeguards while preserving the complete Paper GodRays API. This includes its ray geometry, bloom, colors, motion, sizing, pixel-ratio, and styling props. See the Paper God Rays reference for the full prop table and accepted ranges.

PropTypeDefaultDescription
playback"auto" | "always" | "paused""auto"Controls motion policy. Auto pauses for reduced motion and while the shader is outside the viewport.
colorsstring[]["#a600ff6e", "#6200fff0", "#ffffff", "#33fff5"]Supplies up to five ray colors. The wrapper provides a violet-and-cyan curated palette when omitted.
colorBackstring"#000000"Sets the background color.
colorBloomstring"#0000ff"Sets the central bloom color.
width / heightnumber | string"100%"Sets the canvas CSS dimensions. Size the parent element to establish the visible area.
maxPixelCountnumber2073600Caps the rendered pixel budget. Override only after measuring the target devices.

Credits

The rendering engine is Paper Shaders, distributed under the Apache License 2.0. vivid-layer supplies the React adapter, playback policy, documentation, and Registry packaging; it does not vendor or modify Paper's shader source.