Aurora
A soft aurora that hangs from the top of its container and drifts slowly, its hem waving and its curtain leaning towards the pointer. One WebGL shader with three colour stops; it pauses off screen and stays still without a graphics card.
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 |
|---|---|---|---|
| colorStops | [string, string, string] | ["#2b2b2b", "#4a4e58", "#2b2b2b"] | Three hex colours, left to right. On a light page pick greys darker than the page: light cannot brighten white. |
| height | number | 0.45 | How far down the curtain hangs, 0 to 1 of the height. |
| amplitude | number | 1 | How much its hem waves. |
| speed | number | 1 | Animation speed. 0 holds it still. |
| brightness | number | 0.8 | How bright the light is. |
| opacity | number | 0.65 | 0 to 1. Fade it with this rather than CSS opacity, which breaks a WebGL canvas' blending. |
| followPointer | boolean | true | Draws the curtain towards the pointer. |
| paused | boolean | false | Holds the last frame. |
| stillWithoutGpu | boolean | true | Stays still where WebGL draws in software, without a graphics card. |
| dpr | number | 0.5 | Pixel density as a share of the device's. A soft glow needs little. |
| className | string | — | Classes for the root element. |