particle-network-bg 0.0.1 → 0.0.2
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 +38 -35
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Interactive particle network animation for backgrounds. Typed, zero dependencies (core), works with vanilla JS, React, or any framework.
|
|
4
4
|
|
|
5
|
-
> **Note:** The demos are in the [
|
|
5
|
+
> **Note:** The demos are in the `[demo/](./demo)` directory.
|
|
6
6
|
|
|
7
7
|
## Demo
|
|
8
8
|
|
|
9
|
-
Live demos
|
|
9
|
+
Live demos:
|
|
10
10
|
|
|
11
11
|
- **[Vanilla JS](https://aliotadi.github.io/particle-network-bg/vanilla/)**
|
|
12
12
|
- **[React](https://aliotadi.github.io/particle-network-bg/react/)**
|
|
@@ -92,38 +92,38 @@ function App() {
|
|
|
92
92
|
|
|
93
93
|
## Configuration
|
|
94
94
|
|
|
95
|
-
| Option | Type
|
|
96
|
-
| ------------------------ |
|
|
97
|
-
| `particleCount` | number
|
|
98
|
-
| `minRadius` | number
|
|
99
|
-
| `maxRadius` | number
|
|
100
|
-
| `particleColor` | string
|
|
101
|
-
| `lineColor` | string
|
|
102
|
-
| `lineWidth` | number
|
|
103
|
-
| `lineOpacity` | number
|
|
104
|
-
| `maxDistance` | number
|
|
105
|
-
| `moveSpeed` | number
|
|
106
|
-
| `backgroundColor` | string
|
|
107
|
-
| `backgroundOpacity` | number
|
|
108
|
-
| `particleOpacity` | number
|
|
109
|
-
| `mouseRadius` | number
|
|
110
|
-
| `mouseInteraction` | boolean
|
|
111
|
-
| `pulseEnabled` | boolean
|
|
112
|
-
| `pulseSpeed` | number
|
|
113
|
-
| `depthEffectEnabled` | boolean
|
|
114
|
-
| `depthSpeed` | number
|
|
115
|
-
| `gradientEnabled` | boolean
|
|
116
|
-
| `gradientType` | `"linear"
|
|
117
|
-
| `gradientColors` | string[]
|
|
118
|
-
| `gradientStops` | number[]
|
|
119
|
-
| `gradientSpeed` | number
|
|
120
|
-
| `gradientMouseReaction` | boolean
|
|
121
|
-
| `gradientMouseInfluence` | number
|
|
122
|
-
| `gradientAngle` | number
|
|
123
|
-
| `gradientRadius` | number
|
|
124
|
-
| `gradientSpin` | boolean
|
|
125
|
-
| `gradientFlowAngle` | number
|
|
126
|
-
| `gradientOrbitRadius` | number
|
|
95
|
+
| Option | Type | Default | Description |
|
|
96
|
+
| ------------------------ | --------- | ------------------------ | -------------------------------------------------------- |
|
|
97
|
+
| `particleCount` | number | 100 | Number of particles |
|
|
98
|
+
| `minRadius` | number | 2 | Min particle size (px) |
|
|
99
|
+
| `maxRadius` | number | 6 | Max particle size (px) |
|
|
100
|
+
| `particleColor` | string | `#000000` | Particle color (hex) |
|
|
101
|
+
| `lineColor` | string | `#000000` | Connection line color (hex) |
|
|
102
|
+
| `lineWidth` | number | 1 | Line width |
|
|
103
|
+
| `lineOpacity` | number | 0.2 | Line opacity (0–1) |
|
|
104
|
+
| `maxDistance` | number | 150 | Max connection distance (px) |
|
|
105
|
+
| `moveSpeed` | number | 1 | Particle movement speed |
|
|
106
|
+
| `backgroundColor` | string | `#ffffff` | Background color (hex) |
|
|
107
|
+
| `backgroundOpacity` | number | 1 | Background opacity (0–1) |
|
|
108
|
+
| `particleOpacity` | number | 1 | Particle opacity (0–1) |
|
|
109
|
+
| `mouseRadius` | number | 200 | Mouse interaction radius |
|
|
110
|
+
| `mouseInteraction` | boolean | true | Enable mouse repel effect |
|
|
111
|
+
| `pulseEnabled` | boolean | true | Enable pulse animation |
|
|
112
|
+
| `pulseSpeed` | number | 0 | Pulse speed |
|
|
113
|
+
| `depthEffectEnabled` | boolean | true | 3D depth effect |
|
|
114
|
+
| `depthSpeed` | number | 0.02 | Depth animation speed |
|
|
115
|
+
| `gradientEnabled` | boolean | false | Use gradient background |
|
|
116
|
+
| `gradientType` | `"linear" | "radial"` | `"linear"` |
|
|
117
|
+
| `gradientColors` | string[] | `["#667eea", "#764ba2"]` | Gradient colors (hex) |
|
|
118
|
+
| `gradientStops` | number[] | auto | Color stops (0–1), optional |
|
|
119
|
+
| `gradientSpeed` | number | 0.02 | Gradient animation speed |
|
|
120
|
+
| `gradientMouseReaction` | boolean | true | **Radial only:** Gradient center follows mouse |
|
|
121
|
+
| `gradientMouseInfluence` | number | 0.5 | **Radial only:** Mouse influence strength (0–1) |
|
|
122
|
+
| `gradientAngle` | number | 0 | **Linear spin mode:** Initial rotation angle (degrees) |
|
|
123
|
+
| `gradientRadius` | number | 1 | **Radial:** Gradient radius multiplier |
|
|
124
|
+
| `gradientSpin` | boolean | false | **Linear:** `true` = rotate, `false` = flow continuously |
|
|
125
|
+
| `gradientFlowAngle` | number | 45 | **Linear flow mode:** Direction of color flow (degrees) |
|
|
126
|
+
| `gradientOrbitRadius` | number | 0.3 | **Radial:** Orbit radius for center movement (0–1) |
|
|
127
127
|
|
|
128
128
|
## Gradient Examples
|
|
129
129
|
|
|
@@ -192,7 +192,10 @@ import type {
|
|
|
192
192
|
} from "particle-network-bg";
|
|
193
193
|
```
|
|
194
194
|
|
|
195
|
+
## Credits
|
|
196
|
+
|
|
197
|
+
Based on [particle-network-background](https://github.com/cloudwerxlabs/particle-network-background) by CloudWerx Labs.
|
|
198
|
+
|
|
195
199
|
## License
|
|
196
200
|
|
|
197
201
|
MIT
|
|
198
|
-
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "particle-network-bg",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "Interactive particle network animation for backgrounds",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -47,7 +47,8 @@
|
|
|
47
47
|
],
|
|
48
48
|
"scripts": {
|
|
49
49
|
"build": "tsup",
|
|
50
|
-
"dev": "tsup --watch"
|
|
50
|
+
"dev": "tsup --watch",
|
|
51
|
+
"prepublishOnly": "npm run build"
|
|
51
52
|
},
|
|
52
53
|
"devDependencies": {
|
|
53
54
|
"@types/react": "^19.2.14",
|