jl-particle-interactive 0.2.0 → 0.2.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.
Files changed (2) hide show
  1. package/README.md +52 -8
  2. package/package.json +31 -5
package/README.md CHANGED
@@ -1,6 +1,38 @@
1
- # jl-particle-interactive
1
+ # jl-particle-interactive — React Canvas Particle Animations
2
2
 
3
- Particle animations for React — text that comes alive and backgrounds that react to your cursor.
3
+ [![npm version](https://img.shields.io/npm/v/jl-particle-interactive)](https://www.npmjs.com/package/jl-particle-interactive)
4
+ [![npm downloads](https://img.shields.io/npm/dm/jl-particle-interactive)](https://www.npmjs.com/package/jl-particle-interactive)
5
+ [![bundle size](https://img.shields.io/bundlephobia/minzip/jl-particle-interactive)](https://bundlephobia.com/package/jl-particle-interactive)
6
+ [![license](https://img.shields.io/npm/l/jl-particle-interactive)](https://github.com/cjorgeluis122333/jl-particles-interactive/blob/main/LICENSE)
7
+ [![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue)](https://www.typescriptlang.org/)
8
+
9
+ A canvas-based React library for rendering text and backgrounds as thousands of animated particles. Letters form from particle swarms, respond to magnetic hover, attract or repel on click, and backgrounds come alive with NET graphs, JELLYFISH glows, or pointer-following swarms. Built with zero runtime dependencies, full TypeScript support, and DPR-aware rendering for sharp output on retina displays.
10
+
11
+ > Requires React 18+. No global CSS. Zero runtime dependencies.
12
+
13
+ ---
14
+
15
+ ## Why jl-particle-interactive?
16
+
17
+ | Feature | jl-particle-interactive | tsparticles | particles.js |
18
+ |---|---|---|---|
19
+ | **Text that forms from particles** | ✓ (native, spatial coherence) | Plugin only (complex setup) | ✗ |
20
+ | **Spring physics + float noise** | ✓ | ✗ | ✗ |
21
+ | **Magnetic hover / click interact** | ✓ (attract & repel) | ✗ | ✗ |
22
+ | **Ready-made background presets** | ✓ NET, JELLYFISH, FOLLOW_POINTER | General engine (DIY) | General engine (DIY) |
23
+ | **Runtime dependencies** | **Zero** | 14+ packages | 0 (vanilla JS only) |
24
+ | **React integration** | Native React hooks | Wrapper package needed | Manual integration |
25
+ | **TypeScript** | Strict mode | Partial | ✗ |
26
+ | **DPR-aware (retina)** | ✓ | ✗ | ✗ |
27
+
28
+ ---
29
+
30
+ ## Use cases
31
+
32
+ - **Hero section animated titles** — Text materializes from particle chaos on page load
33
+ - **Loading screens** — Words form and dissolve while content loads
34
+ - **Interactive word carousels** — Cycle through words; particles re-form smoothly
35
+ - **Animated backgrounds** — NET graph, JELLYFISH glow, or pointer-following swarm behind any content
4
36
 
5
37
  ---
6
38
 
@@ -10,7 +42,18 @@ Particle animations for React — text that comes alive and backgrounds that rea
10
42
  npm install jl-particle-interactive
11
43
  ```
12
44
 
13
- > Requires React 18+. No global CSS. No extra dependencies.
45
+ ---
46
+
47
+ ## Framework compatibility
48
+
49
+ | Framework | Supported |
50
+ |---|---|
51
+ | Vite + React | ✓ |
52
+ | Next.js (App Router & Pages) | ✓ (client components only — add `'use client'`) |
53
+ | Create React App | ✓ |
54
+ | Remix | ✓ (client-side only) |
55
+ | Astro | ✓ (inside `client:only` components) |
56
+ | TypeScript | ✓ (strict mode, declarations included) |
14
57
 
15
58
  ---
16
59
 
@@ -18,11 +61,12 @@ npm install jl-particle-interactive
18
61
 
19
62
  | Feature | Description |
20
63
  |---|---|
21
- | **Text particles** | Thousands of particles that form any text string |
22
- | **Magnetic hover** | Particles are attracted to the cursor on hover |
23
- | **Click interactions** | Attract or repel particles on click/tap |
24
- | **Animated backgrounds** | NET, JELLYFISH, and FOLLOW_POINTER modes |
25
- | **Customizable** | Colors, shapes, density, speed, and more |
64
+ | **Text particles** | Thousands of canvas particles that form any text string using pixel-sampling with spatial coherence — letters look sharp at any size |
65
+ | **Magnetic hover** | Particles are attracted to the cursor on hover (~173px radius spring force) |
66
+ | **Click interactions** | Attract or repel particles on click/tap — particles flee or swarm toward the pointer |
67
+ | **Animated backgrounds** | NET (connected node graph), JELLYFISH (organic glow rings), and FOLLOW_POINTER (swarm) modes |
68
+ | **Spring physics** | Each particle uses spring + friction + float-noise physics — movement feels natural, never robotic |
69
+ | **Customizable** | Colors (hex or RGB palettes), shapes (circle, square, bean), density, speed, ease, and more |
26
70
 
27
71
  ---
28
72
 
package/package.json CHANGED
@@ -1,10 +1,21 @@
1
1
  {
2
2
  "name": "jl-particle-interactive",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "private": false,
5
- "description": "Interactive particle text animation components for React",
6
- "author": "JL",
5
+ "description": "Canvas-based React library for particle text animations and interactive backgrounds — spring physics, magnetic hover, click attract/repel, NET/JELLYFISH modes. TypeScript. Zero dependencies.",
6
+ "author": {
7
+ "name": "cjorgeluis122333",
8
+ "url": "https://github.com/cjorgeluis122333"
9
+ },
7
10
  "license": "MIT",
11
+ "homepage": "https://cjorgeluis122333.github.io/jl-particles-interactive",
12
+ "repository": {
13
+ "type": "git",
14
+ "url": "https://github.com/cjorgeluis122333/jl-particles-interactive"
15
+ },
16
+ "bugs": {
17
+ "url": "https://github.com/cjorgeluis122333/jl-particles-interactive/issues"
18
+ },
8
19
  "type": "module",
9
20
  "main": "./dist/jl-particle-interactive.umd.cjs",
10
21
  "module": "./dist/jl-particle-interactive.js",
@@ -17,7 +28,8 @@
17
28
  }
18
29
  },
19
30
  "files": [
20
- "dist"
31
+ "dist",
32
+ "README.md"
21
33
  ],
22
34
  "scripts": {
23
35
  "build": "vite build",
@@ -29,7 +41,21 @@
29
41
  "animation",
30
42
  "canvas",
31
43
  "interactive",
32
- "text"
44
+ "text",
45
+ "particle-text",
46
+ "text-animation",
47
+ "particle-background",
48
+ "canvas-animation",
49
+ "react-particles",
50
+ "magnetic",
51
+ "hover-effect",
52
+ "cursor-effect",
53
+ "spring-physics",
54
+ "hero",
55
+ "hero-section",
56
+ "typescript",
57
+ "zero-dependencies",
58
+ "particle-network"
33
59
  ],
34
60
  "peerDependencies": {
35
61
  "react": ">=18.0.0",