@mccustomapps/helaui 0.1.7 → 0.1.10

package/README.md

@@ -207,22 +207,50 @@ 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. Built-in artwork is inlined in the JS bundle (no extra files to copy into `public/`).
 
 ```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)** — use a Client Component. `RainBackground` already mounts itself on `document.body`; do not insert `rain.element` a second time.
+
+```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 artwork | 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 |
+
+```js
+new RainBackground({
+  images: ['/rain/fritter.png', '/rain/leaf.png'],
+});
+```
 
 **Helpers**
 

package/dist/index.cjs

@@ -404,6 +404,9 @@ function randomBetween(min, max) {
 function pick(items) {
   return items[Math.floor(Math.random() * items.length)];
 }
+function toImageUrl(source) {
+  return typeof source === "string" ? source : source.src;
+}
 var RainBackground = class {
   element;
   constructor(options = {}) {
@@ -430,15 +433,12 @@ var RainBackground = class {
     target.prepend(this.element);
   }
   createDrop(images, minSize, maxSize, minDuration, maxDuration) {
-    const drop = document.createElement("img");
+    const drop = document.createElement("div");
     const duration = randomBetween(minDuration, maxDuration);
     const size = randomBetween(minSize, maxSize);
+    const src = toImageUrl(pick(images));
     drop.className = "helaui-rain-background__drop";
-    drop.src = pick(images);
-    drop.alt = "";
-    drop.decoding = "async";
-    drop.loading = "lazy";
-    drop.draggable = false;
+    drop.style.backgroundImage = `url(${JSON.stringify(src)})`;
     drop.style.setProperty("--helaui-rain-x", `${randomBetween(0, 100)}%`);
     drop.style.setProperty("--helaui-rain-size", `${size}px`);
     drop.style.setProperty("--helaui-rain-duration", `${duration.toFixed(2)}s`);

package/dist/index.d.cts

@@ -138,7 +138,7 @@ declare class TextField {
     destroy(): void;
 }
 
-/** Built-in rain sprite URLs shipped with HelaUI. */
+/** Built-in rain sprite URLs (inlined as data URLs in the published package). */
 declare const BUILTIN_RAIN_IMAGES: readonly [string, string, string, string];
 
 interface RainBackgroundOptions {

package/dist/index.d.ts

@@ -138,7 +138,7 @@ declare class TextField {
     destroy(): void;
 }
 
-/** Built-in rain sprite URLs shipped with HelaUI. */
+/** Built-in rain sprite URLs (inlined as data URLs in the published package). */
 declare const BUILTIN_RAIN_IMAGES: readonly [string, string, string, string];
 
 interface RainBackgroundOptions {

package/dist/index.js

@@ -351,6 +351,9 @@ function randomBetween(min, max) {
 function pick(items) {
   return items[Math.floor(Math.random() * items.length)];
 }
+function toImageUrl(source) {
+  return typeof source === "string" ? source : source.src;
+}
 var RainBackground = class {
   element;
   constructor(options = {}) {
@@ -377,15 +380,12 @@ var RainBackground = class {
     target.prepend(this.element);
   }
   createDrop(images, minSize, maxSize, minDuration, maxDuration) {
-    const drop = document.createElement("img");
+    const drop = document.createElement("div");
     const duration = randomBetween(minDuration, maxDuration);
     const size = randomBetween(minSize, maxSize);
+    const src = toImageUrl(pick(images));
     drop.className = "helaui-rain-background__drop";
-    drop.src = pick(images);
-    drop.alt = "";
-    drop.decoding = "async";
-    drop.loading = "lazy";
-    drop.draggable = false;
+    drop.style.backgroundImage = `url(${JSON.stringify(src)})`;
     drop.style.setProperty("--helaui-rain-x", `${randomBetween(0, 100)}%`);
     drop.style.setProperty("--helaui-rain-size", `${size}px`);
     drop.style.setProperty("--helaui-rain-duration", `${duration.toFixed(2)}s`);

package/dist/rain-background.css

@@ -11,12 +11,15 @@
   top: -20%;
   left: var(--helaui-rain-x, 50%);
   width: var(--helaui-rain-size, 48px);
-  height: auto;
+  height: var(--helaui-rain-size, 48px);
   opacity: var(--helaui-rain-opacity, 0.85);
   will-change: transform;
   animation: helaui-rain-fall var(--helaui-rain-duration, 10s) linear infinite;
   animation-delay: var(--helaui-rain-delay, 0s);
   transform: rotate(var(--helaui-rain-rotation, 0deg));
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 @keyframes helaui-rain-fall {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mccustomapps/helaui",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "description": "HelaUI components with Sinhala font support",
   "author": "mccustomapps",
   "license": "MIT",

package/src/assets/rain/builtinImages.ts

@@ -3,5 +3,5 @@ import kokis from './kokis.png';
 import leaf from './leaf.png';
 import swirl from './swirl.png';
 
-/** Built-in rain sprite URLs shipped with HelaUI. */
+/** Built-in rain sprite URLs (inlined as data URLs in the published package). */
 export const BUILTIN_RAIN_IMAGES = [fritter, swirl, kokis, leaf] as const;

package/dist/assets/rain/builtinImages.ts

@@ -1,7 +0,0 @@
-import fritter from './fritter.png';
-import kokis from './kokis.png';
-import leaf from './leaf.png';
-import swirl from './swirl.png';
-
-/** Built-in rain sprite URLs shipped with HelaUI. */
-export const BUILTIN_RAIN_IMAGES = [fritter, swirl, kokis, leaf] as const;