@mccustomapps/helaui 0.1.8 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -7
- package/dist/index.cjs +20 -21
- package/dist/index.d.cts +4 -11
- package/dist/index.d.ts +4 -11
- package/dist/index.js +20 -21
- package/dist/rain-background.css +0 -17
- package/package.json +1 -1
- package/src/assets/rain/builtinImages.ts +6 -7
package/README.md
CHANGED
|
@@ -207,9 +207,7 @@ const mandala = new SunMandala({ src: '/my-mandala.png' });
|
|
|
207
207
|
|
|
208
208
|
### RainBackground
|
|
209
209
|
|
|
210
|
-
An animated **tropical rain** background with falling food/leaf sprites.
|
|
211
|
-
|
|
212
|
-
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.
|
|
210
|
+
An animated **tropical rain** background with falling food/leaf sprites. Built-in artwork is inlined in the JS bundle (no extra files to copy into `public/`).
|
|
213
211
|
|
|
214
212
|
```js
|
|
215
213
|
import { RainBackground } from '@mccustomapps/helaui';
|
|
@@ -218,7 +216,7 @@ import '@mccustomapps/helaui/rain-background.css';
|
|
|
218
216
|
const rain = new RainBackground();
|
|
219
217
|
```
|
|
220
218
|
|
|
221
|
-
**Next.js (App Router)** —
|
|
219
|
+
**Next.js (App Router)** — use a Client Component. `RainBackground` already mounts itself on `document.body`; do not insert `rain.element` a second time.
|
|
222
220
|
|
|
223
221
|
```tsx
|
|
224
222
|
'use client';
|
|
@@ -241,15 +239,13 @@ export function HelaRain() {
|
|
|
241
239
|
|
|
242
240
|
| Option | Type | Default | Description |
|
|
243
241
|
|---|---|---|---|
|
|
244
|
-
| `images` | `string[]` | built-in
|
|
242
|
+
| `images` | `string[]` | built-in artwork | Image URLs |
|
|
245
243
|
| `density` | `number` | `28` | Number of particles |
|
|
246
244
|
| `minSize` / `maxSize` | `number` | `28` | Particle width in pixels |
|
|
247
245
|
| `minDuration` / `maxDuration` | `number` | `8` / `18` | Fall duration in seconds |
|
|
248
246
|
| `target` | `HTMLElement` | `document.body` | Mount container |
|
|
249
247
|
| `zIndex` | `number` | `0` | Stacking order |
|
|
250
248
|
|
|
251
|
-
To use your own files, put them in the Next.js `public/` folder and pass URLs:
|
|
252
|
-
|
|
253
249
|
```js
|
|
254
250
|
new RainBackground({
|
|
255
251
|
images: ['/rain/fritter.png', '/rain/leaf.png'],
|