@mccustomapps/helaui 0.1.6 → 0.1.8

package/README.md

@@ -207,22 +207,54 @@ const mandala = new SunMandala({ src: '/my-mandala.png' });
 
 ### RainBackground
 
-An animated **tropical rain** background with randomly falling rain streaks over a looping food-photography image.
+An animated **tropical rain** background with falling food/leaf sprites.
+
+The sprites live in **`rain-background.css`**. Import that CSS in the same app that mounts `RainBackground` so the bundler (Vite, webpack, Next.js) can emit the PNG files.
 
 ```js
 import { RainBackground } from '@mccustomapps/helaui';
 import '@mccustomapps/helaui/rain-background.css';
 
 const rain = new RainBackground();
-document.body.insertBefore(rain.element, document.body.firstChild);
+```
+
+**Next.js (App Router)** — run this in a Client Component. The CSS import is required; without it the drops animate but stay empty:
+
+```tsx
+'use client';
+
+import { useEffect } from 'react';
+import { RainBackground } from '@mccustomapps/helaui';
+import '@mccustomapps/helaui/rain-background.css';
+
+export function HelaRain() {
+  useEffect(() => {
+    const rain = new RainBackground();
+    return () => rain.destroy();
+  }, []);
+
+  return null;
+}
 ```
 
 **Options — `RainBackgroundOptions`**
 
 | Option | Type | Default | Description |
 |---|---|---|---|
-| `images` | `string[]` | built-in set | Background image URLs |
-| `interval` | `number` | `5000` | Image crossfade interval (ms) |
+| `images` | `string[]` | built-in set (`fritter`, `swirl`, `kokis`, `leaf`) | Sprite ids or image URLs |
+| `density` | `number` | `28` | Number of particles |
+| `minSize` / `maxSize` | `number` | `28` | Particle width in pixels |
+| `minDuration` / `maxDuration` | `number` | `8` / `18` | Fall duration in seconds |
+| `target` | `HTMLElement` | `document.body` | Mount container |
+| `zIndex` | `number` | `0` | Stacking order |
+
+To use your own files, put them in the Next.js `public/` folder and pass URLs:
+
+```js
+new RainBackground({
+  images: ['/rain/fritter.png', '/rain/leaf.png'],
+});
+```
 
 **Helpers**