particle-overlay 1.0.0 → 1.0.1
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 +80 -0
- package/package.json +2 -1
package/README.md
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# particle-overlay 🌌
|
|
2
|
+
|
|
3
|
+
A high-performance, off-thread particle overlay rendering engine for the web. Powered by a WebAssembly physics core compiled from Rust, it runs entirely inside a Web Worker using `OffscreenCanvas`, ensuring your main UI thread never drops a frame.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 🚀 Features
|
|
8
|
+
|
|
9
|
+
* **Zero Main-Thread Blocking**: All physics ticks and Canvas 2D paint commands are executed off-thread inside a Web Worker.
|
|
10
|
+
* **Rust/WASM Physics**: Particle movements, swings, and speeds are computed in compiled WebAssembly.
|
|
11
|
+
* **Zero-Copy Memory Sharing**: JavaScript reads coordinate floats directly from the WASM linear memory heap.
|
|
12
|
+
* **Pre-built Presets**: Includes 12 overlays out-of-the-box (Rain, Falling Hearts, Snow, Matrix Rain, Bubbles, etc.).
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## 📦 Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install particle-overlay
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## 🛠️ Quick Start
|
|
25
|
+
|
|
26
|
+
Place a `<canvas>` element in your HTML:
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<canvas id="effects-canvas" style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;"></canvas>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Mount your desired particle overlay:
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
import { ParticleOverlayHost } from 'particle-overlay';
|
|
36
|
+
|
|
37
|
+
const canvas = document.getElementById('effects-canvas');
|
|
38
|
+
|
|
39
|
+
// Start the rain effect
|
|
40
|
+
const overlay = new ParticleOverlayHost(canvas, 'rain-shower', {
|
|
41
|
+
density: 80,
|
|
42
|
+
speed: 14,
|
|
43
|
+
size: 2.25,
|
|
44
|
+
color: '#aedbf0'
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
// Update parameters dynamically
|
|
48
|
+
overlay.updateParams({
|
|
49
|
+
density: 120,
|
|
50
|
+
speed: 18
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
// Terminate the effect and clean up the worker
|
|
54
|
+
// overlay.destroy();
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## 🎨 Included Presets
|
|
60
|
+
|
|
61
|
+
You can pass any of these IDs to `ParticleOverlayHost`:
|
|
62
|
+
|
|
63
|
+
* `rain-shower` - Continuous rain with bottom splashes.
|
|
64
|
+
* `falling-hearts` - Floating hearts with swaying rotations.
|
|
65
|
+
* `snow-fall` - Wobbling snowflakes.
|
|
66
|
+
* `floating-bubbles` - Rising bubbles.
|
|
67
|
+
* `thunderstorm` - Heavy storm with lightning flashes.
|
|
68
|
+
* `fireworks` - Explosive color bursts.
|
|
69
|
+
* `starry-night` - Twinkling stars and shooting stars.
|
|
70
|
+
* `drifting-clouds` - Soft moving clouds.
|
|
71
|
+
* `matrix-rain` - Cascading digital code columns.
|
|
72
|
+
* `sakura-petals` - Fluttering cherry blossoms.
|
|
73
|
+
* `moonlight` - Crescent moon, glowing light beams, and dust.
|
|
74
|
+
* `autumn-leaves` - Wind-swept swaying leaves.
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## 📄 License
|
|
79
|
+
|
|
80
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "particle-overlay",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "High-performance, off-thread particle overlay engine using WebAssembly and Web Workers",
|
|
5
5
|
"main": "host.js",
|
|
6
6
|
"type": "module",
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
"host.js",
|
|
12
12
|
"worker.js",
|
|
13
13
|
"presets.json",
|
|
14
|
+
"README.md",
|
|
14
15
|
"dist/particle_overlay.wasm"
|
|
15
16
|
],
|
|
16
17
|
"keywords": [
|