own-the-canvas 1.0.0 → 1.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 +5 -11
- package/dist/logo.png +0 -0
- package/package.json +10 -2
package/README.md
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/jabid-19/own-the-canvas/main/.github/assets/logo.png" alt="own-the-canvas logo" width="120" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
1
5
|
# own-the-canvas
|
|
2
6
|
|
|
3
7
|
> Beautiful, responsive, fully customizable HTML canvas–based React visual components. Zero dependencies. TypeScript. 60fps.
|
|
4
8
|
|
|
5
|
-
|
|
6
10
|
|
|
7
11
|
## Install
|
|
8
12
|
|
|
@@ -40,7 +44,6 @@ All components default to `width: "100%"` and `height: "100%"` so they fill thei
|
|
|
40
44
|
|
|
41
45
|
Classic falling character rain effect.
|
|
42
46
|
|
|
43
|
-
|
|
44
47
|
|
|
45
48
|
```tsx
|
|
46
49
|
import { MatrixRain } from 'own-the-canvas';
|
|
@@ -71,7 +74,6 @@ import { MatrixRain } from 'own-the-canvas';
|
|
|
71
74
|
|
|
72
75
|
Floating particles with optional connections and mouse repulsion.
|
|
73
76
|
|
|
74
|
-
|
|
75
77
|
|
|
76
78
|
```tsx
|
|
77
79
|
import { ParticleField } from 'own-the-canvas';
|
|
@@ -102,7 +104,6 @@ import { ParticleField } from 'own-the-canvas';
|
|
|
102
104
|
|
|
103
105
|
2D twinkle or 3D warp tunnel starfield.
|
|
104
106
|
|
|
105
|
-
|
|
106
107
|
|
|
107
108
|
```tsx
|
|
108
109
|
import { Starfield } from 'own-the-canvas';
|
|
@@ -132,7 +133,6 @@ import { Starfield } from 'own-the-canvas';
|
|
|
132
133
|
|
|
133
134
|
Pixel-level fire simulation with multiple palettes.
|
|
134
135
|
|
|
135
|
-
|
|
136
136
|
|
|
137
137
|
```tsx
|
|
138
138
|
import { FireEffect } from 'own-the-canvas';
|
|
@@ -155,7 +155,6 @@ import { FireEffect } from 'own-the-canvas';
|
|
|
155
155
|
|
|
156
156
|
Web Audio API visualizer with 4 modes.
|
|
157
157
|
|
|
158
|
-
|
|
159
158
|
|
|
160
159
|
```tsx
|
|
161
160
|
import { AudioVisualizer } from 'own-the-canvas';
|
|
@@ -188,7 +187,6 @@ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
|
188
187
|
|
|
189
188
|
Burst or continuous confetti cannon.
|
|
190
189
|
|
|
191
|
-
|
|
192
190
|
|
|
193
191
|
```tsx
|
|
194
192
|
import { Confetti } from 'own-the-canvas';
|
|
@@ -218,7 +216,6 @@ const [fire, setFire] = useState(false);
|
|
|
218
216
|
|
|
219
217
|
Expanding ring ripples on click or auto.
|
|
220
218
|
|
|
221
|
-
|
|
222
219
|
|
|
223
220
|
```tsx
|
|
224
221
|
import { RippleEffect } from 'own-the-canvas';
|
|
@@ -243,7 +240,6 @@ import { RippleEffect } from 'own-the-canvas';
|
|
|
243
240
|
|
|
244
241
|
Animated Perlin noise–driven color gradient.
|
|
245
242
|
|
|
246
|
-
|
|
247
243
|
|
|
248
244
|
```tsx
|
|
249
245
|
import { NoiseGradient } from 'own-the-canvas';
|
|
@@ -271,7 +267,6 @@ import { NoiseGradient } from 'own-the-canvas';
|
|
|
271
267
|
|
|
272
268
|
Pixelated dissolve transition overlay for any React content.
|
|
273
269
|
|
|
274
|
-
|
|
275
270
|
|
|
276
271
|
```tsx
|
|
277
272
|
import { PixelDissolve } from 'own-the-canvas';
|
|
@@ -297,7 +292,6 @@ import { PixelDissolve } from 'own-the-canvas';
|
|
|
297
292
|
|
|
298
293
|
Draggable star constellation with animated connections.
|
|
299
294
|
|
|
300
|
-
|
|
301
295
|
|
|
302
296
|
```tsx
|
|
303
297
|
import { ConstellationMap } from 'own-the-canvas';
|
package/dist/logo.png
ADDED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "own-the-canvas",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Beautiful, responsive, fully customizable HTML canvas-based React visual components",
|
|
5
|
-
"author": "",
|
|
5
|
+
"author": "Jabid Hasan",
|
|
6
|
+
"homepage": "https://own-the-canvas.vercel.app/",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/jabid-19/own-the-canvas"
|
|
10
|
+
},
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/jabid-19/own-the-canvas/issues"
|
|
13
|
+
},
|
|
6
14
|
"license": "MIT",
|
|
7
15
|
"keywords": [
|
|
8
16
|
"canvas",
|