Light Rays
Soft beams of light fanning from a corner, with motes of dust drifting in them. The fan leans towards the pointer, and can soften towards the bottom so it melts into the page: warm sunlight on a light page, a moonbeam on a dark one.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| origin | "top-right" | "top-left" | "top" | "top-right" | Where the light comes from. |
| colors | [string, string] | ["#ffd27a", "#ffe9c2"] | Two hex colours, blended across the fan. |
| intensity | number | 1.6 | How bright the beams are. |
| spread | number | 0.75 | How wide the fan opens, in radians. |
| density | number | 12 | How many beams fit across the fan. |
| speed | number | 2 | How fast the beams drift. 0 holds them still. |
| reach | number | 0.9 | How far the light reaches before it falls off, as a share of the height. |
| dust | number | 0.5 | Motes of dust floating in the light, 0 to 1. |
| fadeToBottom | boolean | false | Softens the light from the middle down, to nothing at the bottom edge. |
| followPointer | boolean | true | Leans the fan towards the pointer. |
| opacity | number | 1 | 0 to 1. Fade it with this rather than CSS opacity. |
| paused | boolean | false | Holds the last frame. |
| dpr | number | 1 | Pixel density as a share of the device's. |
| className | string | — | Classes for the root element. |