particle-overlay 1.0.0

package/host.js

@@ -0,0 +1,50 @@
+/**
+ * Particle Overlay - Host Manager
+ * Manages OffscreenCanvas creation and offloads rendering to the Web Worker.
+ */
+
+export class ParticleOverlayHost {
+  constructor(canvas, presetId, params = {}) {
+    this.canvas = canvas;
+    this.presetId = presetId;
+    this.params = params;
+    this.worker = null;
+    this.init();
+  }
+
+  init() {
+    if (!this.canvas.transferControlToOffscreen) {
+      console.warn("OffscreenCanvas is not supported in this browser. Falling back to main-thread rendering placeholder.");
+      return;
+    }
+
+    // Spawn the worker
+    this.worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });
+
+    // Transfer the canvas to the worker
+    const offscreen = this.canvas.transferControlToOffscreen();
+    this.worker.postMessage({
+      action: 'start',
+      canvas: offscreen,
+      presetId: this.presetId,
+      params: this.params
+    }, [offscreen]);
+  }
+
+  updateParams(params) {
+    if (this.worker) {
+      this.worker.postMessage({
+        action: 'update',
+        params
+      });
+    }
+  }
+
+  destroy() {
+    if (this.worker) {
+      this.worker.postMessage({ action: 'stop' });
+      this.worker.terminate();
+      this.worker = null;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "particle-overlay",
+  "version": "1.0.0",
+  "description": "High-performance, off-thread particle overlay engine using WebAssembly and Web Workers",
+  "main": "host.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 0"
+  },
+  "files": [
+    "host.js",
+    "worker.js",
+    "presets.json",
+    "dist/particle_overlay.wasm"
+  ],
+  "keywords": [
+    "particles",
+    "wasm",
+    "offscreen-canvas",
+    "web-worker",
+    "overlay"
+  ],
+  "author": "Alien AI Team",
+  "license": "MIT"
+}

package/presets.json

@@ -0,0 +1,147 @@
+[
+  {
+    "id": "falling-hearts",
+    "name": "Falling hearts",
+    "description": "Romantic hearts drifting down the page",
+    "icon": "iconify://mdi:heart",
+    "parameters": [
+      { "key": "density", "label": "Heart count", "type": "number", "min": 5, "max": 150, "step": 5, "default": 35 },
+      { "key": "speed", "label": "Fall speed", "type": "number", "min": 1, "max": 10, "step": 0.5, "default": 2.5 },
+      { "key": "size", "label": "Heart size", "type": "number", "min": 10, "max": 48, "step": 2, "default": 22 },
+      { "key": "color", "label": "Heart color", "type": "color", "default": "#ff6b81" }
+    ]
+  },
+  {
+    "id": "rain-shower",
+    "name": "Rain",
+    "description": "Falling rain with splashes along the bottom",
+    "icon": "iconify://mdi:weather-pouring",
+    "parameters": [
+      { "key": "density", "label": "Rain density", "type": "number", "min": 10, "max": 300, "step": 10, "default": 80 },
+      { "key": "speed", "label": "Rain speed", "type": "number", "min": 5, "max": 25, "step": 1, "default": 14 },
+      { "key": "size", "label": "Drop size", "type": "number", "min": 1, "max": 4, "step": 0.25, "default": 2.25 },
+      { "key": "splash", "label": "Splashes", "type": "boolean", "default": true },
+      { "key": "color", "label": "Rain color", "type": "color", "default": "#aedbf0" }
+    ]
+  },
+  {
+    "id": "snow-fall",
+    "name": "Snow",
+    "description": "Gentle snowflakes floating down",
+    "icon": "iconify://mdi:snowflake",
+    "parameters": [
+      { "key": "density", "label": "Flake count", "type": "number", "min": 10, "max": 200, "step": 10, "default": 60 },
+      { "key": "speed", "label": "Fall speed", "type": "number", "min": 0.5, "max": 4, "step": 0.25, "default": 1.5 },
+      { "key": "size", "label": "Flake size", "type": "number", "min": 2, "max": 12, "step": 1, "default": 5 },
+      { "key": "color", "label": "Snow color", "type": "color", "default": "#ffffff" }
+    ]
+  },
+  {
+    "id": "floating-bubbles",
+    "name": "Bubbles",
+    "description": "Translucent bubbles rising from the bottom",
+    "icon": "iconify://mdi:circle-multiple-outline",
+    "parameters": [
+      { "key": "density", "label": "Bubble count", "type": "number", "min": 5, "max": 80, "step": 5, "default": 20 },
+      { "key": "speed", "label": "Rise speed", "type": "number", "min": 0.5, "max": 6, "step": 0.5, "default": 1.8 },
+      { "key": "size", "label": "Max bubble size", "type": "number", "min": 8, "max": 50, "step": 2, "default": 24 },
+      { "key": "color", "label": "Bubble tint", "type": "color", "default": "#8ae2ff" }
+    ]
+  },
+  {
+    "id": "thunderstorm",
+    "name": "Thunderstorm",
+    "description": "Heavy rain with sudden lightning flashes",
+    "icon": "iconify://mdi:weather-lightning-rainy",
+    "parameters": [
+      { "key": "density", "label": "Rain density", "type": "number", "min": 20, "max": 300, "step": 10, "default": 120 },
+      { "key": "speed", "label": "Rain speed", "type": "number", "min": 8, "max": 30, "step": 1, "default": 18 },
+      { "key": "flashFrequency", "label": "Lightning rate", "type": "number", "min": 1, "max": 10, "step": 1, "default": 4 },
+      { "key": "color", "label": "Rain color", "type": "color", "default": "#7faec6" }
+    ]
+  },
+  {
+    "id": "fireworks",
+    "name": "Fireworks",
+    "description": "Colorful bursts that explode and fade across the page",
+    "icon": "iconify://mdi:firework",
+    "parameters": [
+      { "key": "frequency", "label": "Burst rate", "type": "number", "min": 1, "max": 8, "step": 1, "default": 3 },
+      { "key": "particles", "label": "Particles per burst", "type": "number", "min": 20, "max": 100, "step": 10, "default": 50 },
+      { "key": "size", "label": "Particle size", "type": "number", "min": 1.5, "max": 6, "step": 0.5, "default": 3 },
+      { "key": "gravity", "label": "Gravity", "type": "number", "min": 0.02, "max": 0.15, "step": 0.01, "default": 0.06 }
+    ]
+  },
+  {
+    "id": "starry-night",
+    "name": "Starry night",
+    "description": "Twinkling stars and shooting stars crossing the sky",
+    "icon": "iconify://mdi:weather-night",
+    "parameters": [
+      { "key": "density", "label": "Star count", "type": "number", "min": 10, "max": 200, "step": 10, "default": 60 },
+      { "key": "speed", "label": "Twinkle speed", "type": "number", "min": 0.1, "max": 2, "step": 0.1, "default": 0.6 },
+      { "key": "color", "label": "Star color", "type": "color", "default": "#ffffff" },
+      { "key": "shootingStars", "label": "Shooting stars", "type": "boolean", "default": true }
+    ]
+  },
+  {
+    "id": "drifting-clouds",
+    "name": "Drifting clouds",
+    "description": "Soft, fluffy clouds floating lazily across the screen",
+    "icon": "iconify://mdi:weather-cloudy",
+    "parameters": [
+      { "key": "density", "label": "Cloud count", "type": "number", "min": 2, "max": 12, "step": 1, "default": 4 },
+      { "key": "speed", "label": "Cloud speed", "type": "number", "min": 0.1, "max": 2, "step": 0.1, "default": 0.4 },
+      { "key": "color", "label": "Cloud color", "type": "color", "default": "#ffffff" },
+      { "key": "opacity", "label": "Cloud opacity", "type": "number", "min": 0.05, "max": 0.6, "step": 0.05, "default": 0.15 }
+    ]
+  },
+  {
+    "id": "matrix-rain",
+    "name": "Matrix rain",
+    "description": "Cascading columns of glowing digital code characters",
+    "icon": "iconify://mdi:matrix",
+    "parameters": [
+      { "key": "density", "label": "Rain columns", "type": "number", "min": 5, "max": 60, "step": 5, "default": 25 },
+      { "key": "speed", "label": "Drop speed", "type": "number", "min": 1, "max": 15, "step": 1, "default": 6 },
+      { "key": "fontSize", "label": "Font size", "type": "number", "min": 8, "max": 24, "step": 1, "default": 14 },
+      { "key": "color", "label": "Glow color", "type": "color", "default": "#00ff41" }
+    ]
+  },
+  {
+    "id": "sakura-petals",
+    "name": "Sakura petals",
+    "description": "Soft pink cherry blossom petals fluttering and spinning down",
+    "icon": "iconify://mdi:flower",
+    "parameters": [
+      { "key": "density", "label": "Petal count", "type": "number", "min": 5, "max": 100, "step": 5, "default": 25 },
+      { "key": "speed", "label": "Fall speed", "type": "number", "min": 0.5, "max": 5, "step": 0.5, "default": 1.8 },
+      { "key": "size", "label": "Petal size", "type": "number", "min": 6, "max": 20, "step": 1, "default": 12 },
+      { "key": "color", "label": "Petal color", "type": "color", "default": "#ffb7c5" }
+    ]
+  },
+  {
+    "id": "moonlight",
+    "name": "Moonlight",
+    "description": "A glowing moon with gentle moonbeams and floating dust",
+    "icon": "iconify://mdi:moon-waning-crescent",
+    "parameters": [
+      { "key": "density", "label": "Dust count", "type": "number", "min": 5, "max": 60, "step": 5, "default": 20 },
+      { "key": "moonColor", "label": "Moon color", "type": "color", "default": "#fffbe3" },
+      { "key": "showMoon", "label": "Show moon", "type": "boolean", "default": true },
+      { "key": "glowIntensity", "label": "Glow intensity", "type": "number", "min": 1, "max": 10, "step": 1, "default": 5 }
+    ]
+  },
+  {
+    "id": "autumn-leaves",
+    "name": "Autumn leaves",
+    "description": "Colorful leaves drifting down with a gentle sway",
+    "icon": "iconify://mdi:leaf",
+    "parameters": [
+      { "key": "density", "label": "Leaf count", "type": "number", "min": 5, "max": 100, "step": 5, "default": 30 },
+      { "key": "speed", "label": "Fall speed", "type": "number", "min": 0.5, "max": 6, "step": 0.5, "default": 2 },
+      { "key": "size", "label": "Leaf size", "type": "number", "min": 12, "max": 40, "step": 2, "default": 24 },
+      { "key": "color", "label": "Leaf tint", "type": "color", "default": "#e67e22" }
+    ]
+  }
+]

package/worker.js

@@ -0,0 +1,108 @@
+/**
+ * Particle Overlay - Web Worker
+ * Performs physics calculations and renders directly to the OffscreenCanvas.
+ */
+
+let canvas = null;
+let ctx = null;
+let wasm = null;
+let animFrameId = null;
+let presetId = null;
+let params = null;
+
+self.onmessage = async function(e) {
+  const { action, canvas: transferredCanvas, presetId: nextPresetId, params: nextParams } = e.data;
+
+  if (action === 'start') {
+    canvas = transferredCanvas;
+    ctx = canvas.getContext('2d');
+    presetId = nextPresetId;
+    params = nextParams;
+    
+    // Load and compile WASM
+    wasm = await initWasm();
+    if (wasm) {
+      startLoop();
+    }
+  } else if (action === 'update') {
+    params = nextParams;
+    if (wasm && presetId) {
+      wasm.overlay_init(presetId, JSON.stringify(params ?? {}), canvas.width, canvas.height);
+    }
+  } else if (action === 'stop') {
+    if (animFrameId) {
+      cancelAnimationFrame(animFrameId);
+    }
+    self.close();
+  }
+};
+
+async function initWasm() {
+  try {
+    // Load the WASM binary (CDNs can serve this dynamically)
+    const response = await fetch('./dist/particle_overlay.wasm');
+    const bytes = await response.arrayBuffer();
+    const { instance } = await WebAssembly.instantiate(bytes, {});
+    return instance.exports;
+  } catch (err) {
+    console.error("Failed to load particle-overlay WASM in worker:", err);
+    return null;
+  }
+}
+
+function startLoop() {
+  // Initialize the engine inside WASM
+  if (!wasm.overlay_init(presetId, JSON.stringify(params ?? {}), canvas.width, canvas.height)) {
+    console.error(`WASM overlay_init failed for preset: ${presetId}`);
+    return;
+  }
+
+  const tick = () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // 1. Advance physics inside WASM
+    const count = wasm.overlay_tick(1 / 60);
+
+    // 2. Read direct memory pointer
+    const stride = wasm.overlay_particle_stride();
+    const ptr = wasm.overlay_particles_ptr();
+    const mem = wasm.memory.buffer;
+    const floats = new Float32Array(mem, ptr, count * stride);
+
+    // 3. Draw particles directly from WASM memory view
+    // Note: Rendering paths for custom kinds (LINE, GLYPH, SAKURA, LEAF, etc.) 
+    // are implemented in host.js, or can be drawn here.
+    for (let i = 0; i < count; i++) {
+      const o = i * stride;
+      const kind = floats[o];
+      const x = floats[o + 1];
+      const y = floats[o + 2];
+      const a = floats[o + 3];
+      const b = floats[o + 4];
+      const rot = floats[o + 5];
+      const opacity = floats[o + 6];
+      const color = colorFromU32(floats[o + 7]);
+
+      ctx.globalAlpha = opacity;
+      
+      // Simple fallback drawing: draw circle
+      ctx.beginPath();
+      ctx.arc(x, y, a || 4, 0, Math.PI * 2);
+      ctx.fillStyle = color;
+      ctx.fill();
+    }
+
+    ctx.globalAlpha = 1;
+    animFrameId = requestAnimationFrame(tick);
+  };
+
+  tick();
+}
+
+function colorFromU32(n) {
+  const v = n >>> 0;
+  const r = (v >> 16) & 0xff;
+  const g = (v >> 8) & 0xff;
+  const b = v & 0xff;
+  return `rgb(${r},${g},${b})`;
+}