Getting Started
Templates
Components
Special Effects
Animations
Text Animations
Backgrounds
Drop this component into any container and it will fill the space with softly animated light rays shining from above.
import { LightRays } from "@/components/ui/light-rays"<div className="relative h-[400px] w-full overflow-hidden rounded-xl border">
<LightRays />
</div>| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 7 | Total number of animated rays. |
color | string | "rgba(160, 210, 255, 0.2)" | Base colour used for the gradients. |
blur | number | 36 | Pixel radius applied to the blur filter. |
opacity | number | 0.65 | Maximum opacity that rays reach (0 – 1). |
speed | number | 14 | Average seconds each ray takes to complete a cycle. |
length | string | number | "70vh" | CSS length for the ray height. |
className | string | undefined | Additional class names applied to the wrapper. |
style | React.CSSProperties | undefined | Inline styles merged into the wrapper. |