Weather Sky
A sky that cycles through five kinds of weather: a mono aurora, rain that gathers into a rippling puddle, snow that piles into a drift, a clear sky with drifting clouds, and sunlight with golden rays, a moonbeam in dark mode. Point at it to hold the weather; click it for the next.
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 |
|---|---|---|---|
| scenes | WeatherScene[] | ["aurora", "rain", "snow", "clouds", "sun"] | The scenes to cycle through, in order. |
| scene | WeatherScene | — | Shows this scene and stops the cycle. Leave it unset to let the sky cycle. |
| defaultScene | WeatherScene | — | The scene it starts on when uncontrolled. |
| onSceneChange | (scene: WeatherScene) => void | — | Called whenever the scene changes, from the cycle or a click. |
| sceneDuration | number | 10000 | How long each scene holds, in milliseconds. |
| fadeDuration | number | 2500 | How long one scene takes to fade into the next. |
| interactive | boolean | true | Pointing at the sky holds the scene; a click or tap on it, anywhere but a link, button or field, moves on to the next. |
| className | string | — | Classes for the root element. |