Browse components
Light Rays
Soft god rays streaming from an edge or corner, swaying gently and leaning toward the cursor. WebGL.
Light Rays
Installation
npx shadcn@latest add @glint-ui/light-raysFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/light-rays.json
Usage
import { LightRays } from "@/components/ui/light-rays";
<div className="relative h-96">
<LightRays origin="top-center" color="#d9f0ff" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| origin | "top-center" | "top-left" | "top-right" | "left" | "right" | "bottom-center" | "center" | "top-center" | Where the rays come from. |
| color | string | "#d9f0ff" | Ray color. |
| speed | number | 1 | Animation speed multiplier. |
| spread | number | 0.6 | Cone half-width in radians. |
| length | number | 1.2 | Reach, in container heights. |
| intensity | number | 1 | Brightness. |
| followMouse | number | 0.4 | How much the beam leans toward the cursor. |
| className | string | — | Extra classes for the root element. |