GodRays
Volumetric radial light rays surface with configurable origin, spread, and intensity
Ambient light system
A clear source, a dark surface, and enough content to catch the beams.
The demo shows what GodRays is for: soft editorial lighting that frames a panel instead of vanishing into an empty wrapper.
Source
Top-centered orb
Spread
14 rays, high intensity
Use case
Hero panels and feature callouts
Accessibility
- Treat the effect as decorative and keep underlying content understandable without color, blur, or motion alone.
- Respect reduced-motion and contrast requirements when animation or filtering is enabled.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
Import options
Root package
ts
import { GodRays } from '@dryui/ui'Per-component subpath
ts
import { GodRays } from '@dryui/ui/god-rays'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
| color | string | Semantic color or tone applied to the component. | — | — | — |
| rayCount | number | — | — | — | — |
| intensity | number | — | — | — | — |
| center | { x: number; y: number } | — | — | — | — |
| speed | number | — | — | — | — |
| blendMode | BlendMode | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | — | — |