jl-particle-interactive 0.2.1 → 0.3.0

package/README.md

@@ -86,114 +86,175 @@ export default function App() {
 
 ---
 
-## Examples
+## Text examples
 
-### Text with a color palette
+### 1. Free-floating particles
 
-Assign multiple colors and each particle picks one at random.
+When `text` is an empty string, particles scatter and drift freely across the canvas — great for ambient loading screens or decorative backgrounds.
 
 ```tsx
-<ParticleCanvas height="60vh">
-  <TextParticleEngine
-    text="React"
-    particleColor={['#ff6b6b', '#feca57', '#48dbfb']}
-    particleSize={1.5}
-  />
-</ParticleCanvas>
+import { ParticleCanvas, TextParticleEngine } from 'jl-particle-interactive';
+
+export default function FloatingParticles() {
+  return (
+    <ParticleCanvas height="60vh" backgroundColor="#050505">
+      <TextParticleEngine
+        text=""
+        particleColor={['#60a5fa', '#a78bfa', '#34d399']}
+        particleSize={1.2}
+        isMagnet={true}
+      />
+    </ParticleCanvas>
+  );
+}
 ```
 
 ---
 
-### Repel on click
+### 2. Hello 🖐️ — magnetic hover + color palette
 
-Particles flee from the cursor while the mouse button is held down.
+Particles form the text and spring toward the cursor on hover. Click and hold to repel them outward.
 
 ```tsx
-<ParticleCanvas height="60vh">
-  <TextParticleEngine
-    text="Boom"
-    clickMode="repel"
-    particleEase={2}
-  />
-</ParticleCanvas>
+import { ParticleCanvas, TextParticleEngine } from 'jl-particle-interactive';
+
+export default function HelloParticles() {
+  return (
+    <ParticleCanvas height="60vh" backgroundColor="#050505">
+      <TextParticleEngine
+        text="Hello 🖐️"
+        particleColor={['#f472b6', '#fb923c', '#facc15', '#34d399', '#60a5fa']}
+        particleSize={1.3}
+        particleEase={1.2}
+        isMagnet={true}
+        clickMode="repel"
+        particleShape="circle"
+      />
+    </ParticleCanvas>
+  );
+}
 ```
 
 ---
 
-### Attract on click
+### 3. Word carousel — cycles every 3 seconds
 
-The opposite — particles swarm toward the cursor on press.
+The particles re-form automatically each time the `text` prop changes. No extra animation code needed.
 
 ```tsx
-<ParticleCanvas height="60vh">
-  <TextParticleEngine
-    text="Pull"
-    clickMode="attract"
-    isMagnet={false}
-  />
-</ParticleCanvas>
+import { useEffect, useState } from 'react';
+import { ParticleCanvas, TextParticleEngine } from 'jl-particle-interactive';
+
+const words = ['Create', 'Inspire', 'React'];
+
+export default function WordCarousel() {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const id = setInterval(() => setIndex(i => (i + 1) % words.length), 3000);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <ParticleCanvas height="60vh" backgroundColor="#050505">
+      <TextParticleEngine
+        text={words[index]}
+        particleColor={['#60a5fa', '#a78bfa', '#f472b6']}
+        particleSize={1.5}
+        particleEase={1.2}
+        isMagnet={true}
+        particleShape="bean"
+      />
+    </ParticleCanvas>
+  );
+}
 ```
 
 ---
 
-### Animated NET background
+## Background examples
+
+Use `<ParticleBackground>` for standalone animated backgrounds. Set the mode with the `name` prop and pass all options through `config`.
 
-A connected particle network moves behind your content.
+### 1. FOLLOW_POINTER — swarm that follows the cursor
+
+Particles form a loose swarm that chases the cursor across the canvas.
 
 ```tsx
-<ParticleCanvas
-  height="80vh"
-  background={{
-    name: 'NET',
-    color: '#4ecdc4',
-    lineDistance: 120,
-    density: 0.8,
-  }}
->
-  <TextParticleEngine text="Network" particleColor="#ffffff" />
-</ParticleCanvas>
+import { ParticleBackground } from 'jl-particle-interactive';
+
+export default function FollowPointerDemo() {
+  return (
+    <ParticleBackground
+      name="FOLLOW_POINTER"
+      height="60vh"
+      backgroundColor="#050505"
+      config={{
+        orientation: 'diagonal',
+        density: 1,
+        shape: 'bean',
+        colors: ['#00d4ff', '#6ee7b7', '#facc15'],
+        colorMode: 'wave',
+        particleSpeed: 1,
+        pointerTrackingSpeed: 0.06,
+      }}
+    />
+  );
+}
 ```
 
 ---
 
-### Jellyfish background
+### 2. NET — connected node graph
 
-Smooth, organic blobs that drift across the canvas.
+Particles bounce around and draw lines between nearby nodes. Great for tech-style hero sections.
 
 ```tsx
-<ParticleCanvas
-  height="80vh"
-  background={{
-    name: 'JELLYFISH',
-    colors: ['#ff6b6b', '#a29bfe', '#00cec9'],
-    colorMode: 'wave',
-  }}
->
-  <TextParticleEngine text="Fluid" particleColor="#ffffff" />
-</ParticleCanvas>
+import { ParticleBackground } from 'jl-particle-interactive';
+
+export default function NetDemo() {
+  return (
+    <ParticleBackground
+      name="NET"
+      height="60vh"
+      backgroundColor="#050505"
+      config={{
+        density: 0.9,
+        shape: 'circle',
+        colors: ['#7dd3fc', '#60a5fa', '#a78bfa'],
+        colorMode: 'mixed',
+        particleSpeed: 1,
+        pointerTrackingSpeed: 0.08,
+      }}
+    />
+  );
+}
 ```
 
 ---
 
-### Dynamic text
+### 3. JELLYFISH — organic pulsing glow
 
-Change the `text` prop and the particles re-form automatically.
+Soft concentric rings expand and contract in a slow breathing cycle. Particles drift with organic float noise.
 
 ```tsx
-const words = ['Hello', 'World', 'React'];
-
-export default function Carousel() {
-  const [index, setIndex] = useState(0);
-
-  useEffect(() => {
-    const id = setInterval(() => setIndex(i => (i + 1) % words.length), 2000);
-    return () => clearInterval(id);
-  }, []);
+import { ParticleBackground } from 'jl-particle-interactive';
 
+export default function JellyfishDemo() {
   return (
-    <ParticleCanvas height="60vh">
-      <TextParticleEngine text={words[index]} />
-    </ParticleCanvas>
+    <ParticleBackground
+      name="JELLYFISH"
+      height="60vh"
+      backgroundColor="#050505"
+      config={{
+        density: 1.1,
+        shape: 'circle',
+        colors: ['#f472b6', '#a78bfa', '#22d3ee'],
+        colorMode: 'wave',
+        particleSpeed: 1,
+        pointerTrackingSpeed: 0.02,
+      }}
+    />
   );
 }
 ```
@@ -202,14 +263,48 @@ export default function Carousel() {
 
 ## API reference
 
+### `<ParticleBackground>`
+
+Standalone background component. Use this when you want an animated background without any text particles.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `name` | `'NONE' \| 'FOLLOW_POINTER' \| 'NET' \| 'JELLYFISH'` | **required** | Background engine to render |
+| `config` | `BackgroundConfig` | `undefined` | All engine options (see table below) |
+| `width` | `string \| number` | `'100%'` | Container width |
+| `height` | `string \| number` | `'60vh'` | Container height |
+| `backgroundColor` | `string` | `'#050505'` | Background fill color |
+| `className` | `string` | `''` | Additional CSS class |
+| `style` | `CSSProperties` | — | Inline style overrides |
+
+### `BackgroundConfig` (`config` prop options)
+
+All fields are optional. Pass any combination inside the `config` prop of `<ParticleBackground>`.
+
+| Option | Type | Applies to | Description |
+|---|---|---|---|
+| `density` | `number` | all modes | Particle count multiplier. Base counts: FOLLOW_POINTER=350, NET≈300, JELLYFISH=350 |
+| `color` | `string` | all modes | Single hex color for all particles |
+| `colors` | `string[]` | all modes | Palette of hex colors; overrides `color` |
+| `colorMode` | `'wave' \| 'mixed'` | all modes | How colors propagate across particles |
+| `shape` | `'circle' \| 'square' \| 'bean'` | all modes | Particle drawing shape |
+| `particleSpeed` | `number` | all modes | Animation speed multiplier |
+| `pointerTrackingSpeed` | `number` | all modes | How fast particles follow the cursor (lower = floatier) |
+| `orientation` | `'vertical' \| 'horizontal' \| 'diagonal'` | FOLLOW_POINTER only | Swarm drift direction |
+| `interactionRadius` | `number` | — | Declared in type; not applied in current version |
+| `lineDistance` | `number` | — | Declared in type; not applied in current version |
+
 ### `<ParticleCanvas>`
 
+Container that combines text particles with an optional background. Use `background` to activate a background engine alongside `<TextParticleEngine>` children.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
+| `children` | `ReactNode` | — | Content rendered above background (z-index 10) |
 | `width` | `string \| number` | `'100%'` | Container width |
 | `height` | `string \| number` | `'60vh'` | Container height |
-| `backgroundColor` | `string` | `'#050505'` | Background color |
-| `background` | `BackgroundCanvas` | `{ name: 'NONE' }` | Animated background config |
+| `backgroundColor` | `string` | `'#050505'` | Background fill color |
+| `background` | `BackgroundCanvas` | `{ name: 'NONE' }` | Background engine config (flat object with `name` + all options) |
 | `className` | `string` | `''` | Additional CSS class |
 | `style` | `CSSProperties` | — | Inline style overrides |
 

package/dist/components/background/ParticleBackground.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import { BackgroundModeName, BackgroundCanvas } from '../../types/background';
+export interface ParticleBackgroundProps {
+    name: BackgroundModeName;
+    config?: Omit<BackgroundCanvas, 'name'>;
+    width?: string | number;
+    height?: string | number;
+    backgroundColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ParticleBackground({ name, config, width, height, backgroundColor, className, style, }: ParticleBackgroundProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export { default as ParticleCanvas } from './components/ParticleCanvas';
 export type { ParticleCanvasProps } from './components/ParticleCanvas';
 export { default as TextParticleEngine } from './components/text/TextParticleEngine';
 export type { TextParticleEngineProps } from './components/text/TextParticleEngine';
+export { default as ParticleBackground } from './components/background/ParticleBackground';
+export type { ParticleBackgroundProps } from './components/background/ParticleBackground';
 export { useParticleInteraction, getMagnetTarget } from './hooks/useParticleInteraction';
 export type { ClickMode } from './hooks/useParticleInteraction';
 export { useTextParticles } from './hooks/text/useTextParticles';

package/dist/jl-particle-interactive.js

@@ -1,30 +1,30 @@
 var J = Object.defineProperty;
 var K = (t, e, n) => e in t ? J(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var g = (t, e, n) => K(t, typeof e != "symbol" ? e + "" : e, n);
+var m = (t, e, n) => K(t, typeof e != "symbol" ? e + "" : e, n);
 import { jsx as $, jsxs as _ } from "react/jsx-runtime";
 import { useRef as I, useEffect as L } from "react";
 function U(t, e, n, i) {
-  let s = e + t.baseX, m = n + t.baseY;
-  s += Math.sin(i * t.randomSpeed + t.baseY * 0.05) * 15 * t.z, m += Math.cos(i * t.randomSpeed + t.baseX * 0.05) * 15 * t.z;
-  const r = s - t.x, o = m - t.y, h = r * 0.06, y = o * 0.06;
-  return { forceX: h, forceY: y };
+  let s = e + t.baseX, y = n + t.baseY;
+  s += Math.sin(i * t.randomSpeed + t.baseY * 0.05) * 15 * t.z, y += Math.cos(i * t.randomSpeed + t.baseX * 0.05) * 15 * t.z;
+  const r = s - t.x, o = y - t.y, h = r * 0.06, g = o * 0.06;
+  return { forceX: h, forceY: g };
 }
-function Q(t, e, n, i, s, m) {
-  const r = i, o = s, h = t.x - r, y = t.y - o, d = Math.max(Math.sqrt(h * h + y * y), 1);
+function Q(t, e, n, i, s, y) {
+  const r = i, o = s, h = t.x - r, g = t.y - o, d = Math.max(Math.sqrt(h * h + g * g), 1);
   let c = 0, a = 0;
-  const u = Math.sin(d * 0.02 - m * 3) * 2.5 * t.z;
-  c += h / d * u, a += y / d * u;
-  const P = Math.cos(d * 0.01 - m * 1 + t.randomSpeed) * 0.8 * t.z, q = -y / d, b = h / d;
-  return c += q * P, a += b * P, { forceX: c, forceY: a, dxCenter: h, dyCenter: y, distToCenter: d };
+  const u = Math.sin(d * 0.02 - y * 3) * 2.5 * t.z;
+  c += h / d * u, a += g / d * u;
+  const P = Math.cos(d * 0.01 - y * 1 + t.randomSpeed) * 0.8 * t.z, q = -g / d, b = h / d;
+  return c += q * P, a += b * P, { forceX: c, forceY: a, dxCenter: h, dyCenter: g, distToCenter: d };
 }
 function V(t, e) {
   let s = Math.min(e / 400, 1) * 2.5 + t.sizeBias * 1;
   s < 0.4 && (s = 0), t.scale += (s - t.scale) * 0.15;
 }
-function Z(t, e, n, i, s, m) {
+function Z(t, e, n, i, s, y) {
   let r = 0, o = 0;
   s === "horizontal" ? (r = 1, o = 0) : s === "diagonal" ? (r = -e / i, o = -n / i) : (r = -n / i, o = e / i);
-  const h = Math.atan2(o, r), y = t.sizeBias > 0.3 ? 1 : 0, d = Math.max(0, Math.sin(m * 0.5 + t.randomSpeed * 10)), c = Math.sin(m * 3 + t.baseX * 0.1 + t.randomSpeed) * 0.5 * d * y;
+  const h = Math.atan2(o, r), g = t.sizeBias > 0.3 ? 1 : 0, d = Math.max(0, Math.sin(y * 0.5 + t.randomSpeed * 10)), c = Math.sin(y * 3 + t.baseX * 0.1 + t.randomSpeed) * 0.5 * d * g;
   r = Math.cos(h + c), o = Math.sin(h + c);
   const a = Math.max(1 - i / 400, 0.1);
   s === "horizontal" ? (t.dirX = t.dirX * (1 - 0.2) + r * 0.2, t.dirY = t.dirY * (1 - 0.2) + o * 0.2) : (t.dirX = t.dirX * (1 - a * 0.3) + r * a * 0.3, t.dirY = t.dirY * (1 - a * 0.3) + o * a * 0.3);
@@ -33,31 +33,31 @@ function Z(t, e, n, i, s, m) {
 }
 class tt {
   constructor(e, n, i) {
-    g(this, "x");
-    g(this, "y");
-    g(this, "baseX");
+    m(this, "x");
+    m(this, "y");
+    m(this, "baseX");
     // Relative X to swarm center
-    g(this, "baseY");
+    m(this, "baseY");
     // Relative Y to swarm center
-    g(this, "z");
-    g(this, "vx");
-    g(this, "vy");
-    g(this, "color");
-    g(this, "targetColor", null);
-    g(this, "colorDelay", 0);
-    g(this, "angleTarget");
-    g(this, "randomSpeed");
-    g(this, "sizeBias");
-    g(this, "scale");
-    g(this, "dirX");
-    g(this, "dirY");
-    g(this, "initialized", !1);
+    m(this, "z");
+    m(this, "vx");
+    m(this, "vy");
+    m(this, "color");
+    m(this, "targetColor", null);
+    m(this, "colorDelay", 0);
+    m(this, "angleTarget");
+    m(this, "randomSpeed");
+    m(this, "sizeBias");
+    m(this, "scale");
+    m(this, "dirX");
+    m(this, "dirY");
+    m(this, "initialized", !1);
     this.x = e, this.y = n, this.baseX = e, this.baseY = n, this.z = Math.random() * 1.5 + 0.2, this.vx = 0, this.vy = 0, this.color = i, this.angleTarget = Math.random() * Math.PI * 2, this.randomSpeed = Math.random() * 2 + 1, this.sizeBias = Math.random(), this.scale = 1, this.dirX = Math.cos(this.angleTarget), this.dirY = Math.sin(this.angleTarget);
   }
-  update(e, n, i, s, m, r, o, h = "vertical") {
+  update(e, n, i, s, y, r, o, h = "vertical") {
     this.initialized || (this.x = i + this.baseX, this.y = s + this.baseY, this.initialized = !0);
     const {
-      forceX: y,
+      forceX: g,
       forceY: d,
       dxCenter: c,
       dyCenter: a,
@@ -66,13 +66,13 @@ class tt {
       forceX: u,
       forceY: w
     } = U(this, i, s, o);
-    this.vx += y + u, this.vy += d + w, this.vx *= 0.75, this.vy *= 0.75, this.x += this.vx, this.y += this.vy, V(this, l), Z(this, c, a, l, h, o), this.targetColor && (this.colorDelay -= 1, this.colorDelay <= 0 && (this.color = this.targetColor, this.targetColor = null));
+    this.vx += g + u, this.vy += d + w, this.vx *= 0.75, this.vy *= 0.75, this.x += this.vx, this.y += this.vy, V(this, l), Z(this, c, a, l, h, o), this.targetColor && (this.colorDelay -= 1, this.colorDelay <= 0 && (this.color = this.targetColor, this.targetColor = null));
   }
   draw(e, n, i = "bean") {
     if (this.scale <= 0.05) return;
     e.fillStyle = this.color;
-    const s = Math.sqrt(this.baseX * this.baseX + this.baseY * this.baseY), m = Math.max(0, 1 - s / 350);
-    if (e.globalAlpha = Math.min(1, (0.5 + this.z * 0.5) * Math.min(this.scale, 1) * m), !(e.globalAlpha <= 0.01))
+    const s = Math.sqrt(this.baseX * this.baseX + this.baseY * this.baseY), y = Math.max(0, 1 - s / 350);
+    if (e.globalAlpha = Math.min(1, (0.5 + this.z * 0.5) * Math.min(this.scale, 1) * y), !(e.globalAlpha <= 0.01))
       if (i === "circle") {
         const r = Math.max(0.1, 2 * this.scale * this.z);
         e.beginPath(), e.arc(this.x, this.y, r, 0, Math.PI * 2), e.fill();
@@ -80,13 +80,13 @@ class tt {
         const r = Math.max(0.1, 2 * this.scale * this.z);
         e.fillRect(this.x - r, this.y - r, r * 2, r * 2);
       } else {
-        const o = (6 + this.sizeBias * 6) * this.scale, h = Math.sin(n * 3.5 + this.baseX * 0.1 + this.randomSpeed * 5), y = 0.4 + 0.6 * ((h + 1) / 2), d = o * 0.5 * y, c = Math.max(0.8, this.z * 1.5 * this.scale * (0.8 + 0.2 * h)), a = Math.atan2(this.dirY, this.dirX);
+        const o = (6 + this.sizeBias * 6) * this.scale, h = Math.sin(n * 3.5 + this.baseX * 0.1 + this.randomSpeed * 5), g = 0.4 + 0.6 * ((h + 1) / 2), d = o * 0.5 * g, c = Math.max(0.8, this.z * 1.5 * this.scale * (0.8 + 0.2 * h)), a = Math.atan2(this.dirY, this.dirX);
         e.beginPath(), e.ellipse(this.x, this.y, d, c, a, 0, Math.PI * 2), e.fill();
       }
   }
 }
 function et({ config: t, backgroundColor: e }) {
-  const n = I(null), i = I(null), s = I([]), m = I(0), r = I({ x: -1e3, y: -1e3, isDown: !1, active: !1 }), o = I({ x: 0, y: 0, initialized: !1 });
+  const n = I(null), i = I(null), s = I([]), y = I(0), r = I({ x: -1e3, y: -1e3, isDown: !1, active: !1 }), o = I({ x: 0, y: 0, initialized: !1 });
   L(() => {
     const c = (l) => {
       if (!n.current) return;
@@ -99,11 +99,11 @@ function et({ config: t, backgroundColor: e }) {
       window.removeEventListener("pointermove", c), window.removeEventListener("pointerleave", a);
     };
   }, []);
-  const h = I(t), y = I(null), d = I(0);
+  const h = I(t), g = I(null), d = I(0);
   return L(() => {
     h.current = t;
   }, [t]), L(() => {
-    if (y.current && (clearInterval(y.current), y.current = null), !t.colors || t.colors.length === 0) {
+    if (g.current && (clearInterval(g.current), g.current = null), !t.colors || t.colors.length === 0) {
       const a = t.color || "#8B5CF6";
       s.current.forEach((l) => {
         l.targetColor = a, l.colorDelay = Math.random() * 20;
@@ -119,11 +119,11 @@ function et({ config: t, backgroundColor: e }) {
     };
     return t.colorMode === "mixed" ? s.current.forEach((a, l) => {
       a.targetColor = t.colors[l % t.colors.length], a.colorDelay = Math.random() * 20;
-    }) : (d.current = 0, c(t.colors[0]), t.colors.length > 1 && (y.current = setInterval(() => {
+    }) : (d.current = 0, c(t.colors[0]), t.colors.length > 1 && (g.current = setInterval(() => {
       const a = t.colors;
       d.current = (d.current + 1) % a.length, c(a[d.current]);
     }, 3e3))), () => {
-      y.current && clearInterval(y.current);
+      g.current && clearInterval(g.current);
     };
   }, [t.colors, t.color, t.colorMode]), L(() => {
     if (!n.current || !i.current || h.current.name === "NONE") return;
@@ -179,49 +179,49 @@ function et({ config: t, backgroundColor: e }) {
           M.draw(w, P, x);
         }
       }
-      m.current = requestAnimationFrame(q);
+      y.current = requestAnimationFrame(q);
     };
     return q(), () => {
-      u.disconnect(), cancelAnimationFrame(m.current);
+      u.disconnect(), cancelAnimationFrame(y.current);
     };
   }, [e, t.density]), t.name === "NONE" ? null : /* @__PURE__ */ $("div", { ref: n, style: { position: "absolute", inset: 0, zIndex: 0, overflow: "hidden" }, children: /* @__PURE__ */ $("canvas", { ref: i, style: { display: "block", width: "100%", height: "100%" } }) });
 }
 class nt {
   constructor(e, n) {
-    g(this, "x");
-    g(this, "y");
-    g(this, "vx");
-    g(this, "vy");
-    g(this, "radius");
-    g(this, "currentColor", "#8B5CF6");
-    g(this, "targetColor", null);
-    g(this, "colorDelay", 0);
+    m(this, "x");
+    m(this, "y");
+    m(this, "vx");
+    m(this, "vy");
+    m(this, "radius");
+    m(this, "currentColor", "#8B5CF6");
+    m(this, "targetColor", null);
+    m(this, "colorDelay", 0);
     this.x = e, this.y = n;
     const i = Math.random() * Math.PI * 2, s = Math.random() * 0.5 + 0.1;
     this.vx = Math.cos(i) * s, this.vy = Math.sin(i) * s, this.radius = Math.random() * 1.5 + 1;
   }
-  update(e, n, i, s, m = 1, r = 0.06) {
-    if (this.x += this.vx * m, this.y += this.vy * m, this.x < 0 ? (this.x = 0, this.vx *= -1) : this.x > e && (this.x = e, this.vx *= -1), this.y < 0 ? (this.y = 0, this.vy *= -1) : this.y > n && (this.y = n, this.vy *= -1), i !== null && s !== null) {
-      const o = i - this.x, h = s - this.y, y = o * o + h * h, d = 150, c = d * d;
-      if (y < c) {
-        const a = Math.sqrt(y), l = (d - a) / d, u = r / 0.06;
+  update(e, n, i, s, y = 1, r = 0.06) {
+    if (this.x += this.vx * y, this.y += this.vy * y, this.x < 0 ? (this.x = 0, this.vx *= -1) : this.x > e && (this.x = e, this.vx *= -1), this.y < 0 ? (this.y = 0, this.vy *= -1) : this.y > n && (this.y = n, this.vy *= -1), i !== null && s !== null) {
+      const o = i - this.x, h = s - this.y, g = o * o + h * h, d = 150, c = d * d;
+      if (g < c) {
+        const a = Math.sqrt(g), l = (d - a) / d, u = r / 0.06;
         this.x -= o / a * l * 2 * u, this.y -= h / a * l * 2 * u;
       }
     }
-    this.targetColor && (this.colorDelay -= 1 * m, this.colorDelay <= 0 && (this.currentColor = this.targetColor, this.targetColor = null));
+    this.targetColor && (this.colorDelay -= 1 * y, this.colorDelay <= 0 && (this.currentColor = this.targetColor, this.targetColor = null));
   }
   draw(e, n = "circle", i = 0) {
     if (e.fillStyle = this.currentColor, n === "square")
       e.fillRect(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
     else if (n === "bean") {
-      const s = Math.sin(i * 0.05 + this.x * 0.01 + this.y * 0.01), m = this.radius * 2 * (0.8 + 0.4 * s), r = this.radius * (0.8 + 0.2 * s), o = this.vx !== 0 || this.vy !== 0 ? Math.atan2(this.vy, this.vx) : 0;
-      e.beginPath(), e.ellipse(this.x, this.y, m, r, o, 0, Math.PI * 2), e.fill();
+      const s = Math.sin(i * 0.05 + this.x * 0.01 + this.y * 0.01), y = this.radius * 2 * (0.8 + 0.4 * s), r = this.radius * (0.8 + 0.2 * s), o = this.vx !== 0 || this.vy !== 0 ? Math.atan2(this.vy, this.vx) : 0;
+      e.beginPath(), e.ellipse(this.x, this.y, y, r, o, 0, Math.PI * 2), e.fill();
     } else
       e.beginPath(), e.arc(this.x, this.y, this.radius, 0, Math.PI * 2), e.fill();
   }
 }
 function rt({ config: t, backgroundColor: e }) {
-  const n = I(null), i = I(null), s = I([]), m = I(0), r = I({ x: -1e3, y: -1e3, active: !1 });
+  const n = I(null), i = I(null), s = I([]), y = I(0), r = I({ x: -1e3, y: -1e3, active: !1 });
   L(() => {
     const d = (a) => {
       if (!n.current) return;
@@ -234,11 +234,11 @@ function rt({ config: t, backgroundColor: e }) {
       window.removeEventListener("pointermove", d), window.removeEventListener("pointerleave", c);
     };
   }, []);
-  const o = I(t), h = I(0), y = I(null);
+  const o = I(t), h = I(0), g = I(null);
   return L(() => {
     o.current = t;
   }, [t]), L(() => {
-    if (y.current && (clearInterval(y.current), y.current = null), !t.colors || t.colors.length === 0) {
+    if (g.current && (clearInterval(g.current), g.current = null), !t.colors || t.colors.length === 0) {
       const l = t.color || "#8B5CF6";
       s.current.forEach((u) => {
         u.targetColor = l, u.colorDelay = Math.random() * 20;
@@ -253,11 +253,11 @@ function rt({ config: t, backgroundColor: e }) {
     };
     return t.colorMode === "mixed" ? s.current.forEach((l, u) => {
       l.targetColor = t.colors[u % t.colors.length], l.colorDelay = Math.random() * 20;
-    }) : (h.current = 0, a(t.colors[0]), t.colors.length > 1 && (y.current = setInterval(() => {
+    }) : (h.current = 0, a(t.colors[0]), t.colors.length > 1 && (g.current = setInterval(() => {
       const l = t.colors;
       h.current = (h.current + 1) % l.length, a(l[h.current]);
     }, 3e3))), () => {
-      y.current && clearInterval(y.current);
+      g.current && clearInterval(g.current);
     };
   }, [t.colors, t.color, t.colorMode]), L(() => {
     if (!n.current || !i.current) return;
@@ -304,44 +304,44 @@ function rt({ config: t, backgroundColor: e }) {
             u.beginPath(), u.moveTo(x.x, x.y), u.lineTo(b, C), u.strokeStyle = x.currentColor, u.globalAlpha = F * 0.8, u.lineWidth = 1.5, u.stroke();
           }
         }
-      u.globalAlpha = 1, m.current = requestAnimationFrame(P);
+      u.globalAlpha = 1, y.current = requestAnimationFrame(P);
     };
     return P(), () => {
-      l.disconnect(), cancelAnimationFrame(m.current);
+      l.disconnect(), cancelAnimationFrame(y.current);
     };
   }, [e, t.density]), /* @__PURE__ */ $("div", { ref: n, style: { position: "absolute", inset: 0, zIndex: 0, overflow: "hidden" }, children: /* @__PURE__ */ $("canvas", { ref: i, style: { display: "block", width: "100%", height: "100%" } }) });
 }
 class st {
   constructor(e, n, i, s) {
-    g(this, "x", 0);
-    g(this, "y", 0);
-    g(this, "baseX");
-    g(this, "baseY");
-    g(this, "vx", 0);
-    g(this, "vy", 0);
-    g(this, "color");
-    g(this, "size");
-    g(this, "angle");
-    g(this, "dist");
-    g(this, "spring");
-    g(this, "friction");
-    g(this, "targetColor", null);
-    g(this, "colorDelay", 0);
+    m(this, "x", 0);
+    m(this, "y", 0);
+    m(this, "baseX");
+    m(this, "baseY");
+    m(this, "vx", 0);
+    m(this, "vy", 0);
+    m(this, "color");
+    m(this, "size");
+    m(this, "angle");
+    m(this, "dist");
+    m(this, "spring");
+    m(this, "friction");
+    m(this, "targetColor", null);
+    m(this, "colorDelay", 0);
     this.baseX = e, this.baseY = n, this.color = i, this.size = s, this.angle = Math.atan2(n, e), this.dist = Math.sqrt(e * e + n * n);
-    const m = Math.min(1, this.dist / 350);
-    this.spring = 0.15 - m * 0.13, this.friction = 0.85 + m * 0.1;
+    const y = Math.min(1, this.dist / 350);
+    this.spring = 0.15 - y * 0.13, this.friction = 0.85 + y * 0.1;
   }
   update(e, n, i, s) {
-    const r = 1 + Math.sin(this.angle * 3 + i * 1.2) * 0.05 + Math.cos(this.angle * 5 - i * 0.6) * 0.03, o = this.dist * s * r, h = Math.cos(this.angle) * o, y = Math.sin(this.angle) * o, d = this.dist * 0.1 * r, c = Math.sin(i * 3 + this.dist * 0.05) * d, a = e + h + Math.cos(this.angle + Math.PI / 2) * c, l = n + y + Math.sin(this.angle + Math.PI / 2) * c, u = a - this.x, w = l - this.y;
+    const r = 1 + Math.sin(this.angle * 3 + i * 1.2) * 0.05 + Math.cos(this.angle * 5 - i * 0.6) * 0.03, o = this.dist * s * r, h = Math.cos(this.angle) * o, g = Math.sin(this.angle) * o, d = this.dist * 0.1 * r, c = Math.sin(i * 3 + this.dist * 0.05) * d, a = e + h + Math.cos(this.angle + Math.PI / 2) * c, l = n + g + Math.sin(this.angle + Math.PI / 2) * c, u = a - this.x, w = l - this.y;
     this.vx += u * this.spring, this.vy += w * this.spring, this.vx *= this.friction, this.vy *= this.friction, this.x += this.vx, this.y += this.vy, this.targetColor && (this.colorDelay -= 1, this.colorDelay <= 0 && (this.color = this.targetColor, this.targetColor = null));
   }
   draw(e, n, i) {
-    const s = Math.min(1, this.dist / 350), m = 1 + (1 - s) * (i - 1) * 1.5, r = this.size * m;
+    const s = Math.min(1, this.dist / 350), y = 1 + (1 - s) * (i - 1) * 1.5, r = this.size * y;
     e.globalAlpha = Math.max(0.15, 1 - s * 0.7), e.fillStyle = this.color, e.beginPath(), n === "circle" ? e.arc(this.x, this.y, r, 0, Math.PI * 2) : n === "square" ? e.rect(this.x - r, this.y - r, r * 2, r * 2) : e.ellipse(this.x, this.y, r * 1.5, r, 0, 0, Math.PI * 2), e.fill();
   }
 }
 function ot({ config: t, backgroundColor: e }) {
-  const n = I(null), i = I(null), s = I([]), m = I(0), r = I({ x: -1e3, y: -1e3, active: !1 }), o = I({ x: 0, y: 0, initialized: !1, angle: -Math.PI / 2 });
+  const n = I(null), i = I(null), s = I([]), y = I(0), r = I({ x: -1e3, y: -1e3, active: !1 }), o = I({ x: 0, y: 0, initialized: !1, angle: -Math.PI / 2 });
   L(() => {
     const c = (a) => {
       if (!n.current) return;
@@ -352,7 +352,7 @@ function ot({ config: t, backgroundColor: e }) {
       window.removeEventListener("pointermove", c);
     };
   }, []);
-  const h = I(t), y = I(0), d = I(null);
+  const h = I(t), g = I(0), d = I(null);
   return L(() => {
     h.current = t;
   }, [t]), L(() => {
@@ -370,9 +370,9 @@ function ot({ config: t, backgroundColor: e }) {
     };
     return t.colorMode === "mixed" ? s.current.forEach((a, l) => {
       a.targetColor = t.colors[l % t.colors.length], a.colorDelay = Math.max(0, a.dist * 0.2) + Math.random() * 10;
-    }) : (y.current = 0, c(t.colors[0]), t.colors.length > 1 && (d.current = setInterval(() => {
+    }) : (g.current = 0, c(t.colors[0]), t.colors.length > 1 && (d.current = setInterval(() => {
       const a = t.colors;
-      y.current = (y.current + 1) % a.length, c(a[y.current]);
+      g.current = (g.current + 1) % a.length, c(a[g.current]);
     }, 3e3))), () => {
       d.current && clearInterval(d.current);
     };
@@ -444,10 +444,10 @@ function ot({ config: t, backgroundColor: e }) {
         const G = h.current.shape || "circle";
         B.draw(w, G, E);
       }
-      m.current = requestAnimationFrame(q);
+      y.current = requestAnimationFrame(q);
     };
     return q(), () => {
-      u.disconnect(), cancelAnimationFrame(m.current);
+      u.disconnect(), cancelAnimationFrame(y.current);
     };
   }, [e, t.density]), /* @__PURE__ */ $(
     "div",
@@ -472,20 +472,20 @@ const it = {
   boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
   transition: "all 300ms ease-out"
 };
-function ft({
+function ct({
   children: t,
   width: e = "100%",
   height: n = "60vh",
   backgroundColor: i = "#050505",
   className: s = "",
-  style: m,
+  style: y,
   background: r = { name: "NONE" }
 }) {
   return /* @__PURE__ */ _(
     "div",
     {
       className: s,
-      style: { ...it, width: e, height: n, backgroundColor: i, ...m },
+      style: { ...it, width: e, height: n, backgroundColor: i, ...y },
       children: [
         r.name === "FOLLOW_POINTER" && /* @__PURE__ */ $(et, { config: r, backgroundColor: i }),
         r.name === "NET" && /* @__PURE__ */ $(rt, { config: r, backgroundColor: i }),
@@ -495,7 +495,7 @@ function ft({
     }
   );
 }
-function ct(t) {
+function at(t) {
   const e = I({ x: -1e3, y: -1e3, isDown: !1, active: !1 });
   return L(() => {
     const n = t.current;
@@ -505,70 +505,70 @@ function ct(t) {
       e.current.x = o.clientX - h.left, e.current.y = o.clientY - h.top, e.current.active = !0;
     }, s = () => {
       e.current.active = !1;
-    }, m = () => {
+    }, y = () => {
       e.current.isDown = !0;
     }, r = () => {
       e.current.isDown = !1;
     };
-    return n.addEventListener("pointermove", i), n.addEventListener("pointerleave", s), n.addEventListener("pointerdown", m), n.addEventListener("pointerup", r), n.style.touchAction = "none", () => {
-      n.removeEventListener("pointermove", i), n.removeEventListener("pointerleave", s), n.removeEventListener("pointerdown", m), n.removeEventListener("pointerup", r);
+    return n.addEventListener("pointermove", i), n.addEventListener("pointerleave", s), n.addEventListener("pointerdown", y), n.addEventListener("pointerup", r), n.style.touchAction = "none", () => {
+      n.removeEventListener("pointermove", i), n.removeEventListener("pointerleave", s), n.removeEventListener("pointerdown", y), n.removeEventListener("pointerup", r);
     };
   }, [t]), e;
 }
-function at(t, e, n, i, s, m, r, o, h) {
-  if (s === null || m === null || !o && h === "none")
+function lt(t, e, n, i, s, y, r, o, h) {
+  if (s === null || y === null || !o && h === "none")
     return { x: n, y: i };
-  let y = n, d = i;
-  const c = s - t, a = m - e, l = c * c + a * a, u = Math.sqrt(l);
+  let g = n, d = i;
+  const c = s - t, a = y - e, l = c * c + a * a, u = Math.sqrt(l);
   if (o && !r && l < 3e4) {
     const P = (3e4 - l) / 3e4;
-    y += c * P * 0.15, d += a * P * 0.15;
+    g += c * P * 0.15, d += a * P * 0.15;
   }
   if (r && h !== "none") {
     if (h === "attract") {
       if (l < 3e4) {
         const P = (3e4 - l) / 3e4;
-        y += c * P * 0.8, d += a * P * 0.8;
+        g += c * P * 0.8, d += a * P * 0.8;
       }
     } else if (h === "repel" && l < 5e4 && u > 0) {
       const P = Math.pow(Math.max(0, 5e4 - l) / 5e4, 1.2);
-      y -= c / u * P * 400, d -= a / u * P * 400;
+      g -= c / u * P * 400, d -= a / u * P * 400;
     }
   }
-  return { x: y, y: d };
+  return { x: g, y: d };
 }
 class H {
   constructor(e, n, i = "255, 255, 255") {
-    g(this, "x");
-    g(this, "y");
-    g(this, "vx");
-    g(this, "vy");
-    g(this, "targetX");
-    g(this, "targetY");
-    g(this, "baseColor");
-    g(this, "opacity");
-    g(this, "size");
-    g(this, "sizeMultiplier");
-    g(this, "friction");
-    g(this, "ease");
-    g(this, "easeMultiplier");
-    g(this, "floatSpeed");
-    g(this, "floatOffset");
-    g(this, "randomSpeed");
+    m(this, "x");
+    m(this, "y");
+    m(this, "vx");
+    m(this, "vy");
+    m(this, "targetX");
+    m(this, "targetY");
+    m(this, "baseColor");
+    m(this, "opacity");
+    m(this, "size");
+    m(this, "sizeMultiplier");
+    m(this, "friction");
+    m(this, "ease");
+    m(this, "easeMultiplier");
+    m(this, "floatSpeed");
+    m(this, "floatOffset");
+    m(this, "randomSpeed");
     this.x = Math.random() * e, this.y = Math.random() * n, this.targetX = this.x, this.targetY = this.y, this.vx = 0, this.vy = 0, this.size = Math.random() * 1.8 + 0.5, this.sizeMultiplier = 1, this.baseColor = Array.isArray(i) ? i[Math.floor(Math.random() * i.length)] : i, this.opacity = 0.4 + Math.random() * 0.6, this.friction = 0.82 + Math.random() * 0.1, this.ease = 0.03 + Math.random() * 0.05, this.easeMultiplier = 1, this.floatSpeed = Math.random() * 0.02 + 5e-3, this.floatOffset = Math.random() * Math.PI * 2, this.randomSpeed = Math.random();
   }
-  update(e, n, i = null, s = null, m = !1, r = !0, o = "none") {
-    const { x: h, y } = at(
+  update(e, n, i = null, s = null, y = !1, r = !0, o = "none") {
+    const { x: h, y: g } = lt(
       this.x,
       this.y,
       this.targetX,
       this.targetY,
       i,
       s,
-      m,
+      y,
       r,
       o
-    ), d = h - this.x, c = y - this.y, a = n ? 0 : Math.cos(e * 0.01 + this.y * 0.01) * 0.5, l = n ? 0 : Math.sin(e * 0.01 + this.x * 0.01) * 0.5;
+    ), d = h - this.x, c = g - this.y, a = n ? 0 : Math.cos(e * 0.01 + this.y * 0.01) * 0.5, l = n ? 0 : Math.sin(e * 0.01 + this.x * 0.01) * 0.5;
     this.vx += d * (this.ease * this.easeMultiplier) + a, this.vy += c * (this.ease * this.easeMultiplier) + l, this.vx *= this.friction, this.vy *= this.friction, this.x += this.vx, this.y += this.vy;
     const u = n ? 0.2 : 2;
     this.x += Math.cos(e * this.floatSpeed + this.floatOffset) * u, this.y += Math.sin(e * this.floatSpeed + this.floatOffset) * u;
@@ -579,8 +579,8 @@ class H {
     if (n === "square")
       e.fillRect(this.x - s, this.y - s, s * 2, s * 2);
     else if (n === "bean") {
-      const m = 6 + this.size * 2 * this.sizeMultiplier, r = Math.sin(i * 0.05 + this.x * 0.01 + this.randomSpeed * 5), o = 0.4 + 0.6 * ((r + 1) / 2), h = m * 0.5 * o, y = Math.max(0.8, s * 1.5 * (0.8 + 0.2 * r)), d = this.vx !== 0 || this.vy !== 0 ? Math.atan2(this.vy, this.vx) : 0;
-      e.beginPath(), e.ellipse(this.x, this.y, h, y, d, 0, Math.PI * 2), e.fill();
+      const y = 6 + this.size * 2 * this.sizeMultiplier, r = Math.sin(i * 0.05 + this.x * 0.01 + this.randomSpeed * 5), o = 0.4 + 0.6 * ((r + 1) / 2), h = y * 0.5 * o, g = Math.max(0.8, s * 1.5 * (0.8 + 0.2 * r)), d = this.vx !== 0 || this.vy !== 0 ? Math.atan2(this.vy, this.vx) : 0;
+      e.beginPath(), e.ellipse(this.x, this.y, h, g, d, 0, Math.PI * 2), e.fill();
     } else
       e.beginPath(), e.arc(this.x, this.y, s, 0, Math.PI * 2), e.fill();
   }
@@ -592,36 +592,36 @@ function j(t, e, n) {
   const s = i.getContext("2d", { willReadFrequently: !0 });
   if (!s) return [];
   s.clearRect(0, 0, e, n);
-  let m = Math.min(e, n) * 0.65;
-  s.font = `bold ${m}px "Georgia", serif`;
+  let y = Math.min(e, n) * 0.65;
+  s.font = `bold ${y}px "Georgia", serif`;
   const r = s.measureText(t);
-  r.width > e * 0.9 && (m = m * (e * 0.9) / r.width, s.font = `bold ${m}px "Georgia", serif`), s.fillStyle = "white", s.textAlign = "center", s.textBaseline = "middle", s.fillText(t, e / 2, n / 2.05);
-  const h = s.getImageData(0, 0, e, n).data, y = [], d = window.innerWidth < 600 ? 6 : 8;
+  r.width > e * 0.9 && (y = y * (e * 0.9) / r.width, s.font = `bold ${y}px "Georgia", serif`), s.fillStyle = "white", s.textAlign = "center", s.textBaseline = "middle", s.fillText(t, e / 2, n / 2.05);
+  const h = s.getImageData(0, 0, e, n).data, g = [], d = window.innerWidth < 600 ? 6 : 8;
   for (let c = 0; c < n; c += d)
     for (let a = 0; a < e; a += d) {
       const l = (c * e + a) * 4;
-      h[l + 3] > 128 && y.push({
+      h[l + 3] > 128 && g.push({
         x: a + (Math.random() - 0.5) * 4,
         y: c + (Math.random() - 0.5) * 4
       });
     }
-  return y;
+  return g;
 }
-function lt(t, e, n) {
+function ht(t, e, n) {
   const i = I(t);
   return L(() => {
     i.current = t;
-  }, [t]), { getPixelsForText: j, updateTextTargets: (m, r, o) => {
+  }, [t]), { getPixelsForText: j, updateTextTargets: (y, r, o) => {
     var q, b;
-    const h = r || ((q = n.current) == null ? void 0 : q.offsetWidth) || window.innerWidth, y = o || ((b = n.current) == null ? void 0 : b.offsetHeight) || window.innerHeight;
-    if (!m) {
+    const h = r || ((q = n.current) == null ? void 0 : q.offsetWidth) || window.innerWidth, g = o || ((b = n.current) == null ? void 0 : b.offsetHeight) || window.innerHeight;
+    if (!y) {
       e.current.forEach((f) => {
-        const p = 50 + Math.random() * (h - 100), R = 50 + Math.random() * (y - 100);
+        const p = 50 + Math.random() * (h - 100), R = 50 + Math.random() * (g - 100);
         (Math.abs(p - f.x) > 20 || Math.abs(R - f.y) > 20) && (f.vx += (Math.random() - 0.5) * 20, f.vy += (Math.random() - 0.5) * 20), f.targetX = p, f.targetY = R;
       });
       return;
     }
-    const d = j(m, h, y);
+    const d = j(y, h, g);
     if (d.length === 0) return;
     const c = h * 0.15, a = d.map((C) => ({ pt: C, key: C.x + (Math.random() - 0.5) * c }));
     a.sort((C, f) => C.key - f.key);
@@ -666,14 +666,14 @@ function yt({
   particleSize: n = 1,
   particleDensity: i = 1,
   particleEase: s = 1,
-  isMagnet: m = !0,
+  isMagnet: y = !0,
   clickMode: r = "none",
   particleShape: o = "circle",
   backgroundColor: h = "#050505"
 }) {
-  const y = I(null), d = I(null), c = I([]), a = I(0), l = I(0), u = ct(d), w = I({ isMagnet: m, clickMode: r, particleShape: o, backgroundColor: h });
-  w.current = { isMagnet: m, clickMode: r, particleShape: o, backgroundColor: h };
-  const { updateTextTargets: P, textRef: q } = lt(
+  const g = I(null), d = I(null), c = I([]), a = I(0), l = I(0), u = at(d), w = I({ isMagnet: y, clickMode: r, particleShape: o, backgroundColor: h });
+  w.current = { isMagnet: y, clickMode: r, particleShape: o, backgroundColor: h };
+  const { updateTextTargets: P, textRef: q } = ht(
     t,
     c,
     d
@@ -701,7 +701,7 @@ function yt({
       f.easeMultiplier = s;
     });
   }, [s]), L(() => {
-    if (c.current.length > 0 && y.current && d.current) {
+    if (c.current.length > 0 && g.current && d.current) {
       const f = window.innerWidth < 600 ? 1500 : 3e3, p = Math.floor(f * i), R = c.current.length;
       if (p > R) {
         const S = d.current.getBoundingClientRect(), D = b();
@@ -713,7 +713,7 @@ function yt({
       } else p < R && c.current.splice(p);
     }
   }, [i]), L(() => {
-    const f = d.current, p = y.current;
+    const f = d.current, p = g.current;
     if (!f || !p) return;
     const R = (v) => {
       for (const X of v) {
@@ -753,17 +753,40 @@ function yt({
       children: /* @__PURE__ */ $(
         "canvas",
         {
-          ref: y,
+          ref: g,
           style: { display: "block", width: "100%", height: "100%" }
         }
       )
     }
   );
 }
+function gt({
+  name: t,
+  config: e,
+  width: n = "100%",
+  height: i = "60vh",
+  backgroundColor: s = "#050505",
+  className: y = "",
+  style: r
+}) {
+  const o = { name: t, ...e };
+  return /* @__PURE__ */ $(
+    ct,
+    {
+      width: n,
+      height: i,
+      backgroundColor: s,
+      className: y,
+      style: r,
+      background: o
+    }
+  );
+}
 export {
-  ft as ParticleCanvas,
+  gt as ParticleBackground,
+  ct as ParticleCanvas,
   yt as TextParticleEngine,
-  at as getMagnetTarget,
-  ct as useParticleInteraction,
-  lt as useTextParticles
+  lt as getMagnetTarget,
+  at as useParticleInteraction,
+  ht as useTextParticles
 };

package/dist/jl-particle-interactive.umd.cjs

@@ -1 +1 @@
-(function(A,q){typeof exports=="object"&&typeof module<"u"?q(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],q):(A=typeof globalThis<"u"?globalThis:A||self,q(A.JlParticleInteractive={},A.ReactJsxRuntime,A.React))})(this,(function(A,q,f){"use strict";var lt=Object.defineProperty;var ht=(A,q,f)=>q in A?lt(A,q,{enumerable:!0,configurable:!0,writable:!0,value:f}):A[q]=f;var v=(A,q,f)=>ht(A,typeof q!="symbol"?q+"":q,f);function _(t,e,n,i){let s=e+t.baseX,m=n+t.baseY;s+=Math.sin(i*t.randomSpeed+t.baseY*.05)*15*t.z,m+=Math.cos(i*t.randomSpeed+t.baseX*.05)*15*t.z;const r=s-t.x,o=m-t.y,h=r*.06,g=o*.06;return{forceX:h,forceY:g}}function U(t,e,n,i,s,m){const r=i,o=s,h=t.x-r,g=t.y-o,d=Math.max(Math.sqrt(h*h+g*g),1);let c=0,a=0;const u=Math.sin(d*.02-m*3)*2.5*t.z;c+=h/d*u,a+=g/d*u;const E=Math.cos(d*.01-m*1+t.randomSpeed)*.8*t.z,T=-g/d,b=h/d;return c+=T*E,a+=b*E,{forceX:c,forceY:a,dxCenter:h,dyCenter:g,distToCenter:d}}function Q(t,e){let s=Math.min(e/400,1)*2.5+t.sizeBias*1;s<.4&&(s=0),t.scale+=(s-t.scale)*.15}function V(t,e,n,i,s,m){let r=0,o=0;s==="horizontal"?(r=1,o=0):s==="diagonal"?(r=-e/i,o=-n/i):(r=-n/i,o=e/i);const h=Math.atan2(o,r),g=t.sizeBias>.3?1:0,d=Math.max(0,Math.sin(m*.5+t.randomSpeed*10)),c=Math.sin(m*3+t.baseX*.1+t.randomSpeed)*.5*d*g;r=Math.cos(h+c),o=Math.sin(h+c);const a=Math.max(1-i/400,.1);s==="horizontal"?(t.dirX=t.dirX*(1-.2)+r*.2,t.dirY=t.dirY*(1-.2)+o*.2):(t.dirX=t.dirX*(1-a*.3)+r*a*.3,t.dirY=t.dirY*(1-a*.3)+o*a*.3);const l=Math.sqrt(t.dirX*t.dirX+t.dirY*t.dirY);l>0&&(t.dirX/=l,t.dirY/=l)}class Z{constructor(e,n,i){v(this,"x");v(this,"y");v(this,"baseX");v(this,"baseY");v(this,"z");v(this,"vx");v(this,"vy");v(this,"color");v(this,"targetColor",null);v(this,"colorDelay",0);v(this,"angleTarget");v(this,"randomSpeed");v(this,"sizeBias");v(this,"scale");v(this,"dirX");v(this,"dirY");v(this,"initialized",!1);this.x=e,this.y=n,this.baseX=e,this.baseY=n,this.z=Math.random()*1.5+.2,this.vx=0,this.vy=0,this.color=i,this.angleTarget=Math.random()*Math.PI*2,this.randomSpeed=Math.random()*2+1,this.sizeBias=Math.random(),this.scale=1,this.dirX=Math.cos(this.angleTarget),this.dirY=Math.sin(this.angleTarget)}update(e,n,i,s,m,r,o,h="vertical"){this.initialized||(this.x=i+this.baseX,this.y=s+this.baseY,this.initialized=!0);const{forceX:g,forceY:d,dxCenter:c,dyCenter:a,distToCenter:l}=U(this,e,n,i,s,o),{forceX:u,forceY:R}=_(this,i,s,o);this.vx+=g+u,this.vy+=d+R,this.vx*=.75,this.vy*=.75,this.x+=this.vx,this.y+=this.vy,Q(this,l),V(this,c,a,l,h,o),this.targetColor&&(this.colorDelay-=1,this.colorDelay<=0&&(this.color=this.targetColor,this.targetColor=null))}draw(e,n,i="bean"){if(this.scale<=.05)return;e.fillStyle=this.color;const s=Math.sqrt(this.baseX*this.baseX+this.baseY*this.baseY),m=Math.max(0,1-s/350);if(e.globalAlpha=Math.min(1,(.5+this.z*.5)*Math.min(this.scale,1)*m),!(e.globalAlpha<=.01))if(i==="circle"){const r=Math.max(.1,2*this.scale*this.z);e.beginPath(),e.arc(this.x,this.y,r,0,Math.PI*2),e.fill()}else if(i==="square"){const r=Math.max(.1,2*this.scale*this.z);e.fillRect(this.x-r,this.y-r,r*2,r*2)}else{const o=(6+this.sizeBias*6)*this.scale,h=Math.sin(n*3.5+this.baseX*.1+this.randomSpeed*5),g=.4+.6*((h+1)/2),d=o*.5*g,c=Math.max(.8,this.z*1.5*this.scale*(.8+.2*h)),a=Math.atan2(this.dirY,this.dirX);e.beginPath(),e.ellipse(this.x,this.y,d,c,a,0,Math.PI*2),e.fill()}}}function tt({config:t,backgroundColor:e}){const n=f.useRef(null),i=f.useRef(null),s=f.useRef([]),m=f.useRef(0),r=f.useRef({x:-1e3,y:-1e3,isDown:!1,active:!1}),o=f.useRef({x:0,y:0,initialized:!1});f.useEffect(()=>{const c=l=>{if(!n.current)return;const u=n.current.getBoundingClientRect();r.current.x=l.clientX-u.left,r.current.y=l.clientY-u.top,r.current.active=!0},a=()=>{r.current.active=!1};return window.addEventListener("pointermove",c),window.addEventListener("pointerleave",a),()=>{window.removeEventListener("pointermove",c),window.removeEventListener("pointerleave",a)}},[]);const h=f.useRef(t),g=f.useRef(null),d=f.useRef(0);return f.useEffect(()=>{h.current=t},[t]),f.useEffect(()=>{if(g.current&&(clearInterval(g.current),g.current=null),!t.colors||t.colors.length===0){const a=t.color||"#8B5CF6";s.current.forEach(l=>{l.targetColor=a,l.colorDelay=Math.random()*20});return}const c=a=>{const l=r.current.active?r.current.x:o.current.x,u=r.current.active?r.current.y:o.current.y;s.current.forEach(R=>{const E=R.x-l,T=R.y-u,b=Math.sqrt(E*E+T*T);R.targetColor=a,R.colorDelay=Math.max(0,b*.15)})};return t.colorMode==="mixed"?s.current.forEach((a,l)=>{a.targetColor=t.colors[l%t.colors.length],a.colorDelay=Math.random()*20}):(d.current=0,c(t.colors[0]),t.colors.length>1&&(g.current=setInterval(()=>{const a=t.colors;d.current=(d.current+1)%a.length,c(a[d.current])},3e3))),()=>{g.current&&clearInterval(g.current)}},[t.colors,t.color,t.colorMode]),f.useEffect(()=>{if(!n.current||!i.current||h.current.name==="NONE")return;const c=i.current,a=n.current,l=b=>{for(const C of b){const{width:y,height:w}=C.contentRect,P=window.devicePixelRatio||1;c.width=y*P,c.height=w*P,c.style.width=`${y}px`,c.style.height=`${w}px`;const S=c.getContext("2d");S&&S.scale(P,P),s.current=[];const z=Math.floor(350*(h.current.density??1)),M=h.current.colors,D=h.current.colorMode||"wave";for(let x=0;x<z;x++){const p=Math.sqrt(Math.random())*350,X=Math.random()*Math.PI*2,Y=Math.cos(X)*p,L=Math.sin(X)*p;let F;if(M&&M.length>0)F=D==="mixed"?M[x%M.length]:M[0];else if(h.current.color)F=h.current.color;else{const O=210+Math.max(0,Math.min(1,(Y+350)/700))*130+(Math.random()*15-7.5),$=75+Math.random()*25,N=60+Math.random()*15;F=`hsl(${O}, ${$}%, ${N}%)`}s.current.push(new Z(Y,L,F))}}},u=new ResizeObserver(l);u.observe(a);const R=c.getContext("2d");let E=0;const T=()=>{const b=a.getBoundingClientRect();if(R.clearRect(0,0,b.width,b.height),e!=="transparent"&&(R.fillStyle=e,R.fillRect(0,0,b.width,b.height)),o.current.initialized||(o.current.x=b.width/2,o.current.y=b.height/2,o.current.initialized=!0),h.current.name==="FOLLOW_POINTER"){let C=b.width/2,y=b.height/2;const w=r.current.active?r.current.x:null,P=r.current.active?r.current.y:null;w!==null&&P!==null&&(C=w,y=P);const S=h.current.pointerTrackingSpeed??.06;o.current.x+=(C-o.current.x)*S,o.current.y+=(y-o.current.y)*S;const I=h.current.particleSpeed??1;E+=.012*I;const z=s.current,M=18,D=M*M;for(let x=0;x<z.length;x++){const p=z[x];for(let X=x+1;X<z.length;X++){const Y=z[X],L=p.x-Y.x,F=p.y-Y.y,W=L*L+F*F;if(W<D&&W>0){const O=Math.sqrt(W),$=(M-O)/M,N=L/O*$*.8,B=F/O*$*.8;p.x+=N,p.y+=B,Y.x-=N,Y.y-=B,p.vx+=N*.1,p.vy+=B*.1,Y.vx-=N*.1,Y.vy-=B*.1}}}for(const x of z){x.update(w,P,o.current.x,o.current.y,b.width,b.height,E,h.current.orientation);const p=h.current.shape||"bean";x.draw(R,E,p)}}m.current=requestAnimationFrame(T)};return T(),()=>{u.disconnect(),cancelAnimationFrame(m.current)}},[e,t.density]),t.name==="NONE"?null:q.jsx("div",{ref:n,style:{position:"absolute",inset:0,zIndex:0,overflow:"hidden"},children:q.jsx("canvas",{ref:i,style:{display:"block",width:"100%",height:"100%"}})})}class et{constructor(e,n){v(this,"x");v(this,"y");v(this,"vx");v(this,"vy");v(this,"radius");v(this,"currentColor","#8B5CF6");v(this,"targetColor",null);v(this,"colorDelay",0);this.x=e,this.y=n;const i=Math.random()*Math.PI*2,s=Math.random()*.5+.1;this.vx=Math.cos(i)*s,this.vy=Math.sin(i)*s,this.radius=Math.random()*1.5+1}update(e,n,i,s,m=1,r=.06){if(this.x+=this.vx*m,this.y+=this.vy*m,this.x<0?(this.x=0,this.vx*=-1):this.x>e&&(this.x=e,this.vx*=-1),this.y<0?(this.y=0,this.vy*=-1):this.y>n&&(this.y=n,this.vy*=-1),i!==null&&s!==null){const o=i-this.x,h=s-this.y,g=o*o+h*h,d=150,c=d*d;if(g<c){const a=Math.sqrt(g),l=(d-a)/d,u=r/.06;this.x-=o/a*l*2*u,this.y-=h/a*l*2*u}}this.targetColor&&(this.colorDelay-=1*m,this.colorDelay<=0&&(this.currentColor=this.targetColor,this.targetColor=null))}draw(e,n="circle",i=0){if(e.fillStyle=this.currentColor,n==="square")e.fillRect(this.x-this.radius,this.y-this.radius,this.radius*2,this.radius*2);else if(n==="bean"){const s=Math.sin(i*.05+this.x*.01+this.y*.01),m=this.radius*2*(.8+.4*s),r=this.radius*(.8+.2*s),o=this.vx!==0||this.vy!==0?Math.atan2(this.vy,this.vx):0;e.beginPath(),e.ellipse(this.x,this.y,m,r,o,0,Math.PI*2),e.fill()}else e.beginPath(),e.arc(this.x,this.y,this.radius,0,Math.PI*2),e.fill()}}function nt({config:t,backgroundColor:e}){const n=f.useRef(null),i=f.useRef(null),s=f.useRef([]),m=f.useRef(0),r=f.useRef({x:-1e3,y:-1e3,active:!1});f.useEffect(()=>{const d=a=>{if(!n.current)return;const l=n.current.getBoundingClientRect();r.current.x=a.clientX-l.left,r.current.y=a.clientY-l.top,r.current.active=!0},c=()=>{r.current.active=!1};return window.addEventListener("pointermove",d),window.addEventListener("pointerleave",c),()=>{window.removeEventListener("pointermove",d),window.removeEventListener("pointerleave",c)}},[]);const o=f.useRef(t),h=f.useRef(0),g=f.useRef(null);return f.useEffect(()=>{o.current=t},[t]),f.useEffect(()=>{if(g.current&&(clearInterval(g.current),g.current=null),!t.colors||t.colors.length===0){const l=t.color||"#8B5CF6";s.current.forEach(u=>{u.targetColor=l,u.colorDelay=Math.random()*20});return}const d=r.current.active?r.current.x:n.current?n.current.clientWidth/2:0,c=r.current.active?r.current.y:n.current?n.current.clientHeight/2:0,a=l=>{s.current.forEach(u=>{const R=u.x-d,E=u.y-c,T=Math.sqrt(R*R+E*E);u.targetColor=l,u.colorDelay=Math.max(0,T*.2)})};return t.colorMode==="mixed"?s.current.forEach((l,u)=>{l.targetColor=t.colors[u%t.colors.length],l.colorDelay=Math.random()*20}):(h.current=0,a(t.colors[0]),t.colors.length>1&&(g.current=setInterval(()=>{const l=t.colors;h.current=(h.current+1)%l.length,a(l[h.current])},3e3))),()=>{g.current&&clearInterval(g.current)}},[t.colors,t.color,t.colorMode]),f.useEffect(()=>{if(!n.current||!i.current)return;const d=i.current,c=n.current,a=T=>{for(const b of T){const{width:C,height:y}=b.contentRect,w=window.devicePixelRatio||1;d.width=C*w,d.height=y*w,d.style.width=`${C}px`,d.style.height=`${y}px`;const P=d.getContext("2d");P&&P.scale(w,w),s.current=[];const S=C*y,I=o.current.density??1,z=Math.min(Math.floor(300*I),Math.floor(S/6e3*I)),M=o.current.colors,D=o.current.colorMode||"wave";for(let x=0;x<z;x++){const p=new et(Math.random()*C,Math.random()*y);M&&M.length>0?p.currentColor=D==="mixed"?M[x%M.length]:M[0]:o.current.color&&(p.currentColor=o.current.color),s.current.push(p)}}},l=new ResizeObserver(a);l.observe(c);const u=d.getContext("2d");let R=0;const E=()=>{R+=1;const T=c.getBoundingClientRect();u.clearRect(0,0,T.width,T.height),e!=="transparent"&&(u.fillStyle=e,u.fillRect(0,0,T.width,T.height));const b=r.current.active?r.current.x:null,C=r.current.active?r.current.y:null,y=s.current,w=o.current.shape||"circle",P=120,S=P*P,I=o.current.particleSpeed??1,z=o.current.pointerTrackingSpeed??.06;for(let M=0;M<y.length;M++){const D=y[M];D.update(T.width,T.height,b,C,I,z),u.globalAlpha=1,D.draw(u,w,R);for(let x=M+1;x<y.length;x++){const p=y[x],X=D.x-p.x,Y=D.y-p.y,L=X*X+Y*Y;if(L<S){const F=1-Math.sqrt(L)/P;u.beginPath(),u.moveTo(D.x,D.y),u.lineTo(p.x,p.y),u.strokeStyle=D.currentColor,u.globalAlpha=F*.5,u.lineWidth=1,u.stroke()}}}if(u.globalAlpha=1,b!==null&&C!==null)for(let x=0;x<y.length;x++){const p=y[x],X=p.x-b,Y=p.y-C,L=X*X+Y*Y;if(L<22500){const F=1-Math.sqrt(L)/150;u.beginPath(),u.moveTo(p.x,p.y),u.lineTo(b,C),u.strokeStyle=p.currentColor,u.globalAlpha=F*.8,u.lineWidth=1.5,u.stroke()}}u.globalAlpha=1,m.current=requestAnimationFrame(E)};return E(),()=>{l.disconnect(),cancelAnimationFrame(m.current)}},[e,t.density]),q.jsx("div",{ref:n,style:{position:"absolute",inset:0,zIndex:0,overflow:"hidden"},children:q.jsx("canvas",{ref:i,style:{display:"block",width:"100%",height:"100%"}})})}class rt{constructor(e,n,i,s){v(this,"x",0);v(this,"y",0);v(this,"baseX");v(this,"baseY");v(this,"vx",0);v(this,"vy",0);v(this,"color");v(this,"size");v(this,"angle");v(this,"dist");v(this,"spring");v(this,"friction");v(this,"targetColor",null);v(this,"colorDelay",0);this.baseX=e,this.baseY=n,this.color=i,this.size=s,this.angle=Math.atan2(n,e),this.dist=Math.sqrt(e*e+n*n);const m=Math.min(1,this.dist/350);this.spring=.15-m*.13,this.friction=.85+m*.1}update(e,n,i,s){const r=1+Math.sin(this.angle*3+i*1.2)*.05+Math.cos(this.angle*5-i*.6)*.03,o=this.dist*s*r,h=Math.cos(this.angle)*o,g=Math.sin(this.angle)*o,d=this.dist*.1*r,c=Math.sin(i*3+this.dist*.05)*d,a=e+h+Math.cos(this.angle+Math.PI/2)*c,l=n+g+Math.sin(this.angle+Math.PI/2)*c,u=a-this.x,R=l-this.y;this.vx+=u*this.spring,this.vy+=R*this.spring,this.vx*=this.friction,this.vy*=this.friction,this.x+=this.vx,this.y+=this.vy,this.targetColor&&(this.colorDelay-=1,this.colorDelay<=0&&(this.color=this.targetColor,this.targetColor=null))}draw(e,n,i){const s=Math.min(1,this.dist/350),m=1+(1-s)*(i-1)*1.5,r=this.size*m;e.globalAlpha=Math.max(.15,1-s*.7),e.fillStyle=this.color,e.beginPath(),n==="circle"?e.arc(this.x,this.y,r,0,Math.PI*2):n==="square"?e.rect(this.x-r,this.y-r,r*2,r*2):e.ellipse(this.x,this.y,r*1.5,r,0,0,Math.PI*2),e.fill()}}function st({config:t,backgroundColor:e}){const n=f.useRef(null),i=f.useRef(null),s=f.useRef([]),m=f.useRef(0),r=f.useRef({x:-1e3,y:-1e3,active:!1}),o=f.useRef({x:0,y:0,initialized:!1,angle:-Math.PI/2});f.useEffect(()=>{const c=a=>{if(!n.current)return;const l=n.current.getBoundingClientRect();r.current.x=a.clientX-l.left,r.current.y=a.clientY-l.top,r.current.active=!0};return window.addEventListener("pointermove",c),()=>{window.removeEventListener("pointermove",c)}},[]);const h=f.useRef(t),g=f.useRef(0),d=f.useRef(null);return f.useEffect(()=>{h.current=t},[t]),f.useEffect(()=>{if(d.current&&(clearInterval(d.current),d.current=null),!t.colors||t.colors.length===0){const a=t.color||"#8B5CF6";s.current.forEach(l=>{l.targetColor=a,l.colorDelay=Math.random()*20});return}const c=a=>{s.current.forEach(l=>{l.targetColor=a,l.colorDelay=Math.max(0,l.dist*.2)})};return t.colorMode==="mixed"?s.current.forEach((a,l)=>{a.targetColor=t.colors[l%t.colors.length],a.colorDelay=Math.max(0,a.dist*.2)+Math.random()*10}):(g.current=0,c(t.colors[0]),t.colors.length>1&&(d.current=setInterval(()=>{const a=t.colors;g.current=(g.current+1)%a.length,c(a[g.current])},3e3))),()=>{d.current&&clearInterval(d.current)}},[t.colors,t.color,t.colorMode]),f.useEffect(()=>{if(!n.current||!i.current)return;const c=i.current,a=n.current,l=b=>{for(const C of b){const{width:y,height:w}=C.contentRect,P=window.devicePixelRatio||1;c.width=y*P,c.height=w*P,c.style.width=`${y}px`,c.style.height=`${w}px`;const S=c.getContext("2d");S&&S.scale(P,P),s.current=[];const z=Math.floor(350*(h.current.density??1)),M=h.current.colors,D=h.current.colorMode||"wave";for(let x=0;x<z;x++){const p=Math.random()*Math.PI*2,X=Math.sqrt(Math.random())*350,Y=Math.cos(p)*X,L=Math.sin(p)*X;let F;if(M&&M.length>0)F=D==="mixed"?M[x%M.length]:M[0];else if(h.current.color)F=h.current.color;else{const $=260+Math.random()*60,N=70+Math.random()*30,B=60+Math.random()*20;F=`hsl(${$}, ${N}%, ${B}%)`}let W=2+Math.random()*2;X>200&&(W*=.6),X<80&&(W*=1.5);const O=new rt(Y,L,F,W);O.x=y/2,O.y=w/2,s.current.push(O)}}},u=new ResizeObserver(l);u.observe(a);const R=c.getContext("2d");let E=0;const T=()=>{const b=a.getBoundingClientRect();R.globalCompositeOperation="source-over",e==="transparent"?R.clearRect(0,0,b.width,b.height):(R.fillStyle=e,R.fillRect(0,0,b.width,b.height)),o.current.initialized||(o.current.x=b.width/2,o.current.y=b.height/2,o.current.initialized=!0);let C=b.width/2,y=b.height/2;const w=r.current.active?r.current.x:null,P=r.current.active?r.current.y:null;w!==null&&P!==null&&(C=w,y=P);const S=C-o.current.x,I=y-o.current.y,z=Math.sqrt(S*S+I*I);let M=0,D=0;z>1?(M=S/z,D=I/z,o.current.angle=Math.atan2(D,M)):(M=Math.cos(o.current.angle),D=Math.sin(o.current.angle));const x=h.current.particleSpeed??1;E+=.02*x;const p=E%4;let X=1,Y=1,L=0;if(p<1){const B=p;X=1-Math.sin(B*Math.PI)*.3,Y=1+Math.sin(B*Math.PI)*.15,L=Math.sin(B*Math.PI)*12}else{const B=(p-1)/3;X=.7+.3*Math.sin(B*Math.PI/2),Y=1,L=0}const F=h.current.pointerTrackingSpeed??.02;o.current.x+=S*F,o.current.y+=I*F,o.current.x+=M*L*x,o.current.y+=D*L*x;const O=200*(Y+(p<1?p*.15:0)),$=R.createRadialGradient(o.current.x,o.current.y,0,o.current.x,o.current.y,O);$.addColorStop(0,"rgba(80, 150, 255, 0.05)"),$.addColorStop(1,"rgba(80, 150, 255, 0)"),R.fillStyle=$,R.beginPath(),R.arc(o.current.x,o.current.y,O,0,Math.PI*2),R.fill();const N=s.current;R.globalCompositeOperation="source-over";for(const B of N){B.update(o.current.x,o.current.y,E,X);const at=h.current.shape||"circle";B.draw(R,at,Y)}m.current=requestAnimationFrame(T)};return T(),()=>{u.disconnect(),cancelAnimationFrame(m.current)}},[e,t.density]),q.jsx("div",{ref:n,style:{position:"absolute",inset:0,zIndex:0,overflow:"hidden",pointerEvents:"none"},children:q.jsx("canvas",{ref:i,style:{display:"block",width:"100%",height:"100%",pointerEvents:"none"}})})}const ot={position:"relative",border:"1px solid rgba(255, 255, 255, 0.1)",borderRadius:"1rem",overflow:"hidden",boxShadow:"0 25px 50px -12px rgba(0, 0, 0, 0.25)",transition:"all 300ms ease-out"};function it({children:t,width:e="100%",height:n="60vh",backgroundColor:i="#050505",className:s="",style:m,background:r={name:"NONE"}}){return q.jsxs("div",{className:s,style:{...ot,width:e,height:n,backgroundColor:i,...m},children:[r.name==="FOLLOW_POINTER"&&q.jsx(tt,{config:r,backgroundColor:i}),r.name==="NET"&&q.jsx(nt,{config:r,backgroundColor:i}),r.name==="JELLYFISH"&&q.jsx(st,{config:r,backgroundColor:i}),q.jsx("div",{style:{position:"relative",zIndex:10,width:"100%",height:"100%"},children:t})]})}function k(t){const e=f.useRef({x:-1e3,y:-1e3,isDown:!1,active:!1});return f.useEffect(()=>{const n=t.current;if(!n)return;const i=o=>{const h=n.getBoundingClientRect();e.current.x=o.clientX-h.left,e.current.y=o.clientY-h.top,e.current.active=!0},s=()=>{e.current.active=!1},m=()=>{e.current.isDown=!0},r=()=>{e.current.isDown=!1};return n.addEventListener("pointermove",i),n.addEventListener("pointerleave",s),n.addEventListener("pointerdown",m),n.addEventListener("pointerup",r),n.style.touchAction="none",()=>{n.removeEventListener("pointermove",i),n.removeEventListener("pointerleave",s),n.removeEventListener("pointerdown",m),n.removeEventListener("pointerup",r)}},[t]),e}function H(t,e,n,i,s,m,r,o,h){if(s===null||m===null||!o&&h==="none")return{x:n,y:i};let g=n,d=i;const c=s-t,a=m-e,l=c*c+a*a,u=Math.sqrt(l);if(o&&!r&&l<3e4){const E=(3e4-l)/3e4;g+=c*E*.15,d+=a*E*.15}if(r&&h!=="none"){if(h==="attract"){if(l<3e4){const E=(3e4-l)/3e4;g+=c*E*.8,d+=a*E*.8}}else if(h==="repel"&&l<5e4&&u>0){const E=Math.pow(Math.max(0,5e4-l)/5e4,1.2);g-=c/u*E*400,d-=a/u*E*400}}return{x:g,y:d}}class J{constructor(e,n,i="255, 255, 255"){v(this,"x");v(this,"y");v(this,"vx");v(this,"vy");v(this,"targetX");v(this,"targetY");v(this,"baseColor");v(this,"opacity");v(this,"size");v(this,"sizeMultiplier");v(this,"friction");v(this,"ease");v(this,"easeMultiplier");v(this,"floatSpeed");v(this,"floatOffset");v(this,"randomSpeed");this.x=Math.random()*e,this.y=Math.random()*n,this.targetX=this.x,this.targetY=this.y,this.vx=0,this.vy=0,this.size=Math.random()*1.8+.5,this.sizeMultiplier=1,this.baseColor=Array.isArray(i)?i[Math.floor(Math.random()*i.length)]:i,this.opacity=.4+Math.random()*.6,this.friction=.82+Math.random()*.1,this.ease=.03+Math.random()*.05,this.easeMultiplier=1,this.floatSpeed=Math.random()*.02+.005,this.floatOffset=Math.random()*Math.PI*2,this.randomSpeed=Math.random()}update(e,n,i=null,s=null,m=!1,r=!0,o="none"){const{x:h,y:g}=H(this.x,this.y,this.targetX,this.targetY,i,s,m,r,o),d=h-this.x,c=g-this.y,a=n?0:Math.cos(e*.01+this.y*.01)*.5,l=n?0:Math.sin(e*.01+this.x*.01)*.5;this.vx+=d*(this.ease*this.easeMultiplier)+a,this.vy+=c*(this.ease*this.easeMultiplier)+l,this.vx*=this.friction,this.vy*=this.friction,this.x+=this.vx,this.y+=this.vy;const u=n?.2:2;this.x+=Math.cos(e*this.floatSpeed+this.floatOffset)*u,this.y+=Math.sin(e*this.floatSpeed+this.floatOffset)*u}draw(e,n="circle",i=0){e.fillStyle=`rgba(${this.baseColor}, ${this.opacity})`;const s=Math.max(.1,this.size*this.sizeMultiplier);if(n==="square")e.fillRect(this.x-s,this.y-s,s*2,s*2);else if(n==="bean"){const m=6+this.size*2*this.sizeMultiplier,r=Math.sin(i*.05+this.x*.01+this.randomSpeed*5),o=.4+.6*((r+1)/2),h=m*.5*o,g=Math.max(.8,s*1.5*(.8+.2*r)),d=this.vx!==0||this.vy!==0?Math.atan2(this.vy,this.vx):0;e.beginPath(),e.ellipse(this.x,this.y,h,g,d,0,Math.PI*2),e.fill()}else e.beginPath(),e.arc(this.x,this.y,s,0,Math.PI*2),e.fill()}}function G(t,e,n){if(e<=0||n<=0)return[];const i=document.createElement("canvas");i.width=e,i.height=n;const s=i.getContext("2d",{willReadFrequently:!0});if(!s)return[];s.clearRect(0,0,e,n);let m=Math.min(e,n)*.65;s.font=`bold ${m}px "Georgia", serif`;const r=s.measureText(t);r.width>e*.9&&(m=m*(e*.9)/r.width,s.font=`bold ${m}px "Georgia", serif`),s.fillStyle="white",s.textAlign="center",s.textBaseline="middle",s.fillText(t,e/2,n/2.05);const h=s.getImageData(0,0,e,n).data,g=[],d=window.innerWidth<600?6:8;for(let c=0;c<n;c+=d)for(let a=0;a<e;a+=d){const l=(c*e+a)*4;h[l+3]>128&&g.push({x:a+(Math.random()-.5)*4,y:c+(Math.random()-.5)*4})}return g}function K(t,e,n){const i=f.useRef(t);return f.useEffect(()=>{i.current=t},[t]),{getPixelsForText:G,updateTextTargets:(m,r,o)=>{var T,b;const h=r||((T=n.current)==null?void 0:T.offsetWidth)||window.innerWidth,g=o||((b=n.current)==null?void 0:b.offsetHeight)||window.innerHeight;if(!m){e.current.forEach(y=>{const w=50+Math.random()*(h-100),P=50+Math.random()*(g-100);(Math.abs(w-y.x)>20||Math.abs(P-y.y)>20)&&(y.vx+=(Math.random()-.5)*20,y.vy+=(Math.random()-.5)*20),y.targetX=w,y.targetY=P});return}const d=G(m,h,g);if(d.length===0)return;const c=h*.15,a=d.map(C=>({pt:C,key:C.x+(Math.random()-.5)*c}));a.sort((C,y)=>C.key-y.key);const l=a.map(C=>C.pt),u=e.current.map((C,y)=>({i:y,key:C.x+(Math.random()-.5)*c}));u.sort((C,y)=>C.key-y.key);const R=u.map(C=>C.i),E=Math.ceil(Math.sqrt(R.length));for(let C=0;C<R.length;C+=E){const y=Math.min(C+E,R.length),w=R.slice(C,y),P=[];for(let S=C;S<y;S++)P.push(l[S%l.length]);w.sort((S,I)=>e.current[S].y-e.current[I].y),P.sort((S,I)=>S.y-I.y);for(let S=0;S<w.length;S++){const I=w[S],z=e.current[I],M=P[S],D=M.x-z.x,x=M.y-z.y;if(Math.abs(D)>20||Math.abs(x)>20){z.vx+=(Math.random()-.5)*20,z.vy+=(Math.random()-.5)*20;const p=(Math.random()>.5?1:-1)*(Math.random()*10+5);z.vx+=Math.sign(x)*p,z.vy-=Math.sign(D)*p}z.targetX=M.x,z.targetY=M.y}}},textRef:i}}const j=t=>{if(!t||typeof t!="string")return"0, 0, 0";try{let e=0,n=0,i=0;if(t.length===4)e=parseInt(t[1]+t[1],16),n=parseInt(t[2]+t[2],16),i=parseInt(t[3]+t[3],16);else if(t.length===7)e=parseInt(t.substring(1,3),16),n=parseInt(t.substring(3,5),16),i=parseInt(t.substring(5,7),16);else return t;return`${e}, ${n}, ${i}`}catch{return"0, 0, 0"}};function ct({text:t,particleColor:e="255, 255, 255",particleSize:n=1,particleDensity:i=1,particleEase:s=1,isMagnet:m=!0,clickMode:r="none",particleShape:o="circle",backgroundColor:h="#050505"}){const g=f.useRef(null),d=f.useRef(null),c=f.useRef([]),a=f.useRef(0),l=f.useRef(0),u=k(d),R=f.useRef({isMagnet:m,clickMode:r,particleShape:o,backgroundColor:h});R.current={isMagnet:m,clickMode:r,particleShape:o,backgroundColor:h};const{updateTextTargets:E,textRef:T}=K(t,c,d),b=()=>Array.isArray(e)?e.map(y=>j(y)):j(e),C=(y,w,P=1)=>{const S=window.innerWidth<600?1500:3e3,I=Math.floor(S*P),z=[],M=b();for(let D=0;D<I;D++){const x=new J(y,w,M);x.sizeMultiplier=n,x.easeMultiplier=s,z.push(x)}c.current=z};return f.useEffect(()=>{if(c.current.length>0){const y=b();c.current.forEach(w=>{w.baseColor=Array.isArray(y)?y[Math.floor(Math.random()*y.length)]:y})}},[e]),f.useEffect(()=>{c.current.length>0&&c.current.forEach(y=>{y.sizeMultiplier=n})},[n]),f.useEffect(()=>{c.current.length>0&&c.current.forEach(y=>{y.easeMultiplier=s})},[s]),f.useEffect(()=>{if(c.current.length>0&&g.current&&d.current){const y=window.innerWidth<600?1500:3e3,w=Math.floor(y*i),P=c.current.length;if(w>P){const S=d.current.getBoundingClientRect(),I=b();for(let z=0;z<w-P;z++){const M=new J(S.width,S.height,I);M.sizeMultiplier=n,c.current.push(M)}E(t)}else w<P&&c.current.splice(w)}},[i]),f.useEffect(()=>{const y=d.current,w=g.current;if(!y||!w)return;const P=M=>{for(const D of M){const{width:x,height:p}=D.contentRect,X=window.devicePixelRatio||1;w.width=x*X,w.height=p*X,w.style.width=`${x}px`,w.style.height=`${p}px`;const Y=w.getContext("2d");Y&&Y.scale(X,X),c.current.length===0&&C(x,p,i),E(t,x,p)}},S=new ResizeObserver(P);S.observe(y);const I=w.getContext("2d"),z=()=>{l.current++;const M=y.getBoundingClientRect(),{isMagnet:D,clickMode:x,particleShape:p,backgroundColor:X}=R.current;if(X==="transparent")I.clearRect(0,0,M.width,M.height),I.globalCompositeOperation="source-over";else{const O=j(X);I.fillStyle=`rgba(${O}, 0.25)`,I.fillRect(0,0,M.width,M.height),I.globalCompositeOperation="screen"}const Y=T.current!=="",L=u.current.active?u.current.x:null,F=u.current.active?u.current.y:null,W=u.current.isDown;for(let O=0;O<c.current.length;O++){const $=c.current[O];$.update(l.current,!!Y,L,F,W,D,x),$.draw(I,p,l.current)}I.globalCompositeOperation="source-over",a.current=requestAnimationFrame(z)};return z(),()=>{S.disconnect(),cancelAnimationFrame(a.current)}},[]),f.useEffect(()=>{E(t)},[t]),q.jsx("div",{ref:d,style:{position:"absolute",inset:0,zIndex:0,overflow:"hidden"},children:q.jsx("canvas",{ref:g,style:{display:"block",width:"100%",height:"100%"}})})}A.ParticleCanvas=it,A.TextParticleEngine=ct,A.getMagnetTarget=H,A.useParticleInteraction=k,A.useTextParticles=K,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})}));
+(function(B,T){typeof exports=="object"&&typeof module<"u"?T(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],T):(B=typeof globalThis<"u"?globalThis:B||self,T(B.JlParticleInteractive={},B.ReactJsxRuntime,B.React))})(this,(function(B,T,f){"use strict";var ht=Object.defineProperty;var ut=(B,T,f)=>T in B?ht(B,T,{enumerable:!0,configurable:!0,writable:!0,value:f}):B[T]=f;var m=(B,T,f)=>ut(B,typeof T!="symbol"?T+"":T,f);function U(t,e,n,i){let s=e+t.baseX,g=n+t.baseY;s+=Math.sin(i*t.randomSpeed+t.baseY*.05)*15*t.z,g+=Math.cos(i*t.randomSpeed+t.baseX*.05)*15*t.z;const r=s-t.x,o=g-t.y,h=r*.06,v=o*.06;return{forceX:h,forceY:v}}function Q(t,e,n,i,s,g){const r=i,o=s,h=t.x-r,v=t.y-o,d=Math.max(Math.sqrt(h*h+v*v),1);let c=0,a=0;const u=Math.sin(d*.02-g*3)*2.5*t.z;c+=h/d*u,a+=v/d*u;const E=Math.cos(d*.01-g*1+t.randomSpeed)*.8*t.z,q=-v/d,b=h/d;return c+=q*E,a+=b*E,{forceX:c,forceY:a,dxCenter:h,dyCenter:v,distToCenter:d}}function V(t,e){let s=Math.min(e/400,1)*2.5+t.sizeBias*1;s<.4&&(s=0),t.scale+=(s-t.scale)*.15}function Z(t,e,n,i,s,g){let r=0,o=0;s==="horizontal"?(r=1,o=0):s==="diagonal"?(r=-e/i,o=-n/i):(r=-n/i,o=e/i);const h=Math.atan2(o,r),v=t.sizeBias>.3?1:0,d=Math.max(0,Math.sin(g*.5+t.randomSpeed*10)),c=Math.sin(g*3+t.baseX*.1+t.randomSpeed)*.5*d*v;r=Math.cos(h+c),o=Math.sin(h+c);const a=Math.max(1-i/400,.1);s==="horizontal"?(t.dirX=t.dirX*(1-.2)+r*.2,t.dirY=t.dirY*(1-.2)+o*.2):(t.dirX=t.dirX*(1-a*.3)+r*a*.3,t.dirY=t.dirY*(1-a*.3)+o*a*.3);const l=Math.sqrt(t.dirX*t.dirX+t.dirY*t.dirY);l>0&&(t.dirX/=l,t.dirY/=l)}class tt{constructor(e,n,i){m(this,"x");m(this,"y");m(this,"baseX");m(this,"baseY");m(this,"z");m(this,"vx");m(this,"vy");m(this,"color");m(this,"targetColor",null);m(this,"colorDelay",0);m(this,"angleTarget");m(this,"randomSpeed");m(this,"sizeBias");m(this,"scale");m(this,"dirX");m(this,"dirY");m(this,"initialized",!1);this.x=e,this.y=n,this.baseX=e,this.baseY=n,this.z=Math.random()*1.5+.2,this.vx=0,this.vy=0,this.color=i,this.angleTarget=Math.random()*Math.PI*2,this.randomSpeed=Math.random()*2+1,this.sizeBias=Math.random(),this.scale=1,this.dirX=Math.cos(this.angleTarget),this.dirY=Math.sin(this.angleTarget)}update(e,n,i,s,g,r,o,h="vertical"){this.initialized||(this.x=i+this.baseX,this.y=s+this.baseY,this.initialized=!0);const{forceX:v,forceY:d,dxCenter:c,dyCenter:a,distToCenter:l}=Q(this,e,n,i,s,o),{forceX:u,forceY:R}=U(this,i,s,o);this.vx+=v+u,this.vy+=d+R,this.vx*=.75,this.vy*=.75,this.x+=this.vx,this.y+=this.vy,V(this,l),Z(this,c,a,l,h,o),this.targetColor&&(this.colorDelay-=1,this.colorDelay<=0&&(this.color=this.targetColor,this.targetColor=null))}draw(e,n,i="bean"){if(this.scale<=.05)return;e.fillStyle=this.color;const s=Math.sqrt(this.baseX*this.baseX+this.baseY*this.baseY),g=Math.max(0,1-s/350);if(e.globalAlpha=Math.min(1,(.5+this.z*.5)*Math.min(this.scale,1)*g),!(e.globalAlpha<=.01))if(i==="circle"){const r=Math.max(.1,2*this.scale*this.z);e.beginPath(),e.arc(this.x,this.y,r,0,Math.PI*2),e.fill()}else if(i==="square"){const r=Math.max(.1,2*this.scale*this.z);e.fillRect(this.x-r,this.y-r,r*2,r*2)}else{const o=(6+this.sizeBias*6)*this.scale,h=Math.sin(n*3.5+this.baseX*.1+this.randomSpeed*5),v=.4+.6*((h+1)/2),d=o*.5*v,c=Math.max(.8,this.z*1.5*this.scale*(.8+.2*h)),a=Math.atan2(this.dirY,this.dirX);e.beginPath(),e.ellipse(this.x,this.y,d,c,a,0,Math.PI*2),e.fill()}}}function et({config:t,backgroundColor:e}){const n=f.useRef(null),i=f.useRef(null),s=f.useRef([]),g=f.useRef(0),r=f.useRef({x:-1e3,y:-1e3,isDown:!1,active:!1}),o=f.useRef({x:0,y:0,initialized:!1});f.useEffect(()=>{const c=l=>{if(!n.current)return;const u=n.current.getBoundingClientRect();r.current.x=l.clientX-u.left,r.current.y=l.clientY-u.top,r.current.active=!0},a=()=>{r.current.active=!1};return window.addEventListener("pointermove",c),window.addEventListener("pointerleave",a),()=>{window.removeEventListener("pointermove",c),window.removeEventListener("pointerleave",a)}},[]);const h=f.useRef(t),v=f.useRef(null),d=f.useRef(0);return f.useEffect(()=>{h.current=t},[t]),f.useEffect(()=>{if(v.current&&(clearInterval(v.current),v.current=null),!t.colors||t.colors.length===0){const a=t.color||"#8B5CF6";s.current.forEach(l=>{l.targetColor=a,l.colorDelay=Math.random()*20});return}const c=a=>{const l=r.current.active?r.current.x:o.current.x,u=r.current.active?r.current.y:o.current.y;s.current.forEach(R=>{const E=R.x-l,q=R.y-u,b=Math.sqrt(E*E+q*q);R.targetColor=a,R.colorDelay=Math.max(0,b*.15)})};return t.colorMode==="mixed"?s.current.forEach((a,l)=>{a.targetColor=t.colors[l%t.colors.length],a.colorDelay=Math.random()*20}):(d.current=0,c(t.colors[0]),t.colors.length>1&&(v.current=setInterval(()=>{const a=t.colors;d.current=(d.current+1)%a.length,c(a[d.current])},3e3))),()=>{v.current&&clearInterval(v.current)}},[t.colors,t.color,t.colorMode]),f.useEffect(()=>{if(!n.current||!i.current||h.current.name==="NONE")return;const c=i.current,a=n.current,l=b=>{for(const C of b){const{width:y,height:w}=C.contentRect,P=window.devicePixelRatio||1;c.width=y*P,c.height=w*P,c.style.width=`${y}px`,c.style.height=`${w}px`;const S=c.getContext("2d");S&&S.scale(P,P),s.current=[];const z=Math.floor(350*(h.current.density??1)),M=h.current.colors,D=h.current.colorMode||"wave";for(let x=0;x<z;x++){const p=Math.sqrt(Math.random())*350,X=Math.random()*Math.PI*2,Y=Math.cos(X)*p,L=Math.sin(X)*p;let F;if(M&&M.length>0)F=D==="mixed"?M[x%M.length]:M[0];else if(h.current.color)F=h.current.color;else{const A=210+Math.max(0,Math.min(1,(Y+350)/700))*130+(Math.random()*15-7.5),$=75+Math.random()*25,k=60+Math.random()*15;F=`hsl(${A}, ${$}%, ${k}%)`}s.current.push(new tt(Y,L,F))}}},u=new ResizeObserver(l);u.observe(a);const R=c.getContext("2d");let E=0;const q=()=>{const b=a.getBoundingClientRect();if(R.clearRect(0,0,b.width,b.height),e!=="transparent"&&(R.fillStyle=e,R.fillRect(0,0,b.width,b.height)),o.current.initialized||(o.current.x=b.width/2,o.current.y=b.height/2,o.current.initialized=!0),h.current.name==="FOLLOW_POINTER"){let C=b.width/2,y=b.height/2;const w=r.current.active?r.current.x:null,P=r.current.active?r.current.y:null;w!==null&&P!==null&&(C=w,y=P);const S=h.current.pointerTrackingSpeed??.06;o.current.x+=(C-o.current.x)*S,o.current.y+=(y-o.current.y)*S;const I=h.current.particleSpeed??1;E+=.012*I;const z=s.current,M=18,D=M*M;for(let x=0;x<z.length;x++){const p=z[x];for(let X=x+1;X<z.length;X++){const Y=z[X],L=p.x-Y.x,F=p.y-Y.y,W=L*L+F*F;if(W<D&&W>0){const A=Math.sqrt(W),$=(M-A)/M,k=L/A*$*.8,O=F/A*$*.8;p.x+=k,p.y+=O,Y.x-=k,Y.y-=O,p.vx+=k*.1,p.vy+=O*.1,Y.vx-=k*.1,Y.vy-=O*.1}}}for(const x of z){x.update(w,P,o.current.x,o.current.y,b.width,b.height,E,h.current.orientation);const p=h.current.shape||"bean";x.draw(R,E,p)}}g.current=requestAnimationFrame(q)};return q(),()=>{u.disconnect(),cancelAnimationFrame(g.current)}},[e,t.density]),t.name==="NONE"?null:T.jsx("div",{ref:n,style:{position:"absolute",inset:0,zIndex:0,overflow:"hidden"},children:T.jsx("canvas",{ref:i,style:{display:"block",width:"100%",height:"100%"}})})}class nt{constructor(e,n){m(this,"x");m(this,"y");m(this,"vx");m(this,"vy");m(this,"radius");m(this,"currentColor","#8B5CF6");m(this,"targetColor",null);m(this,"colorDelay",0);this.x=e,this.y=n;const i=Math.random()*Math.PI*2,s=Math.random()*.5+.1;this.vx=Math.cos(i)*s,this.vy=Math.sin(i)*s,this.radius=Math.random()*1.5+1}update(e,n,i,s,g=1,r=.06){if(this.x+=this.vx*g,this.y+=this.vy*g,this.x<0?(this.x=0,this.vx*=-1):this.x>e&&(this.x=e,this.vx*=-1),this.y<0?(this.y=0,this.vy*=-1):this.y>n&&(this.y=n,this.vy*=-1),i!==null&&s!==null){const o=i-this.x,h=s-this.y,v=o*o+h*h,d=150,c=d*d;if(v<c){const a=Math.sqrt(v),l=(d-a)/d,u=r/.06;this.x-=o/a*l*2*u,this.y-=h/a*l*2*u}}this.targetColor&&(this.colorDelay-=1*g,this.colorDelay<=0&&(this.currentColor=this.targetColor,this.targetColor=null))}draw(e,n="circle",i=0){if(e.fillStyle=this.currentColor,n==="square")e.fillRect(this.x-this.radius,this.y-this.radius,this.radius*2,this.radius*2);else if(n==="bean"){const s=Math.sin(i*.05+this.x*.01+this.y*.01),g=this.radius*2*(.8+.4*s),r=this.radius*(.8+.2*s),o=this.vx!==0||this.vy!==0?Math.atan2(this.vy,this.vx):0;e.beginPath(),e.ellipse(this.x,this.y,g,r,o,0,Math.PI*2),e.fill()}else e.beginPath(),e.arc(this.x,this.y,this.radius,0,Math.PI*2),e.fill()}}function rt({config:t,backgroundColor:e}){const n=f.useRef(null),i=f.useRef(null),s=f.useRef([]),g=f.useRef(0),r=f.useRef({x:-1e3,y:-1e3,active:!1});f.useEffect(()=>{const d=a=>{if(!n.current)return;const l=n.current.getBoundingClientRect();r.current.x=a.clientX-l.left,r.current.y=a.clientY-l.top,r.current.active=!0},c=()=>{r.current.active=!1};return window.addEventListener("pointermove",d),window.addEventListener("pointerleave",c),()=>{window.removeEventListener("pointermove",d),window.removeEventListener("pointerleave",c)}},[]);const o=f.useRef(t),h=f.useRef(0),v=f.useRef(null);return f.useEffect(()=>{o.current=t},[t]),f.useEffect(()=>{if(v.current&&(clearInterval(v.current),v.current=null),!t.colors||t.colors.length===0){const l=t.color||"#8B5CF6";s.current.forEach(u=>{u.targetColor=l,u.colorDelay=Math.random()*20});return}const d=r.current.active?r.current.x:n.current?n.current.clientWidth/2:0,c=r.current.active?r.current.y:n.current?n.current.clientHeight/2:0,a=l=>{s.current.forEach(u=>{const R=u.x-d,E=u.y-c,q=Math.sqrt(R*R+E*E);u.targetColor=l,u.colorDelay=Math.max(0,q*.2)})};return t.colorMode==="mixed"?s.current.forEach((l,u)=>{l.targetColor=t.colors[u%t.colors.length],l.colorDelay=Math.random()*20}):(h.current=0,a(t.colors[0]),t.colors.length>1&&(v.current=setInterval(()=>{const l=t.colors;h.current=(h.current+1)%l.length,a(l[h.current])},3e3))),()=>{v.current&&clearInterval(v.current)}},[t.colors,t.color,t.colorMode]),f.useEffect(()=>{if(!n.current||!i.current)return;const d=i.current,c=n.current,a=q=>{for(const b of q){const{width:C,height:y}=b.contentRect,w=window.devicePixelRatio||1;d.width=C*w,d.height=y*w,d.style.width=`${C}px`,d.style.height=`${y}px`;const P=d.getContext("2d");P&&P.scale(w,w),s.current=[];const S=C*y,I=o.current.density??1,z=Math.min(Math.floor(300*I),Math.floor(S/6e3*I)),M=o.current.colors,D=o.current.colorMode||"wave";for(let x=0;x<z;x++){const p=new nt(Math.random()*C,Math.random()*y);M&&M.length>0?p.currentColor=D==="mixed"?M[x%M.length]:M[0]:o.current.color&&(p.currentColor=o.current.color),s.current.push(p)}}},l=new ResizeObserver(a);l.observe(c);const u=d.getContext("2d");let R=0;const E=()=>{R+=1;const q=c.getBoundingClientRect();u.clearRect(0,0,q.width,q.height),e!=="transparent"&&(u.fillStyle=e,u.fillRect(0,0,q.width,q.height));const b=r.current.active?r.current.x:null,C=r.current.active?r.current.y:null,y=s.current,w=o.current.shape||"circle",P=120,S=P*P,I=o.current.particleSpeed??1,z=o.current.pointerTrackingSpeed??.06;for(let M=0;M<y.length;M++){const D=y[M];D.update(q.width,q.height,b,C,I,z),u.globalAlpha=1,D.draw(u,w,R);for(let x=M+1;x<y.length;x++){const p=y[x],X=D.x-p.x,Y=D.y-p.y,L=X*X+Y*Y;if(L<S){const F=1-Math.sqrt(L)/P;u.beginPath(),u.moveTo(D.x,D.y),u.lineTo(p.x,p.y),u.strokeStyle=D.currentColor,u.globalAlpha=F*.5,u.lineWidth=1,u.stroke()}}}if(u.globalAlpha=1,b!==null&&C!==null)for(let x=0;x<y.length;x++){const p=y[x],X=p.x-b,Y=p.y-C,L=X*X+Y*Y;if(L<22500){const F=1-Math.sqrt(L)/150;u.beginPath(),u.moveTo(p.x,p.y),u.lineTo(b,C),u.strokeStyle=p.currentColor,u.globalAlpha=F*.8,u.lineWidth=1.5,u.stroke()}}u.globalAlpha=1,g.current=requestAnimationFrame(E)};return E(),()=>{l.disconnect(),cancelAnimationFrame(g.current)}},[e,t.density]),T.jsx("div",{ref:n,style:{position:"absolute",inset:0,zIndex:0,overflow:"hidden"},children:T.jsx("canvas",{ref:i,style:{display:"block",width:"100%",height:"100%"}})})}class st{constructor(e,n,i,s){m(this,"x",0);m(this,"y",0);m(this,"baseX");m(this,"baseY");m(this,"vx",0);m(this,"vy",0);m(this,"color");m(this,"size");m(this,"angle");m(this,"dist");m(this,"spring");m(this,"friction");m(this,"targetColor",null);m(this,"colorDelay",0);this.baseX=e,this.baseY=n,this.color=i,this.size=s,this.angle=Math.atan2(n,e),this.dist=Math.sqrt(e*e+n*n);const g=Math.min(1,this.dist/350);this.spring=.15-g*.13,this.friction=.85+g*.1}update(e,n,i,s){const r=1+Math.sin(this.angle*3+i*1.2)*.05+Math.cos(this.angle*5-i*.6)*.03,o=this.dist*s*r,h=Math.cos(this.angle)*o,v=Math.sin(this.angle)*o,d=this.dist*.1*r,c=Math.sin(i*3+this.dist*.05)*d,a=e+h+Math.cos(this.angle+Math.PI/2)*c,l=n+v+Math.sin(this.angle+Math.PI/2)*c,u=a-this.x,R=l-this.y;this.vx+=u*this.spring,this.vy+=R*this.spring,this.vx*=this.friction,this.vy*=this.friction,this.x+=this.vx,this.y+=this.vy,this.targetColor&&(this.colorDelay-=1,this.colorDelay<=0&&(this.color=this.targetColor,this.targetColor=null))}draw(e,n,i){const s=Math.min(1,this.dist/350),g=1+(1-s)*(i-1)*1.5,r=this.size*g;e.globalAlpha=Math.max(.15,1-s*.7),e.fillStyle=this.color,e.beginPath(),n==="circle"?e.arc(this.x,this.y,r,0,Math.PI*2):n==="square"?e.rect(this.x-r,this.y-r,r*2,r*2):e.ellipse(this.x,this.y,r*1.5,r,0,0,Math.PI*2),e.fill()}}function ot({config:t,backgroundColor:e}){const n=f.useRef(null),i=f.useRef(null),s=f.useRef([]),g=f.useRef(0),r=f.useRef({x:-1e3,y:-1e3,active:!1}),o=f.useRef({x:0,y:0,initialized:!1,angle:-Math.PI/2});f.useEffect(()=>{const c=a=>{if(!n.current)return;const l=n.current.getBoundingClientRect();r.current.x=a.clientX-l.left,r.current.y=a.clientY-l.top,r.current.active=!0};return window.addEventListener("pointermove",c),()=>{window.removeEventListener("pointermove",c)}},[]);const h=f.useRef(t),v=f.useRef(0),d=f.useRef(null);return f.useEffect(()=>{h.current=t},[t]),f.useEffect(()=>{if(d.current&&(clearInterval(d.current),d.current=null),!t.colors||t.colors.length===0){const a=t.color||"#8B5CF6";s.current.forEach(l=>{l.targetColor=a,l.colorDelay=Math.random()*20});return}const c=a=>{s.current.forEach(l=>{l.targetColor=a,l.colorDelay=Math.max(0,l.dist*.2)})};return t.colorMode==="mixed"?s.current.forEach((a,l)=>{a.targetColor=t.colors[l%t.colors.length],a.colorDelay=Math.max(0,a.dist*.2)+Math.random()*10}):(v.current=0,c(t.colors[0]),t.colors.length>1&&(d.current=setInterval(()=>{const a=t.colors;v.current=(v.current+1)%a.length,c(a[v.current])},3e3))),()=>{d.current&&clearInterval(d.current)}},[t.colors,t.color,t.colorMode]),f.useEffect(()=>{if(!n.current||!i.current)return;const c=i.current,a=n.current,l=b=>{for(const C of b){const{width:y,height:w}=C.contentRect,P=window.devicePixelRatio||1;c.width=y*P,c.height=w*P,c.style.width=`${y}px`,c.style.height=`${w}px`;const S=c.getContext("2d");S&&S.scale(P,P),s.current=[];const z=Math.floor(350*(h.current.density??1)),M=h.current.colors,D=h.current.colorMode||"wave";for(let x=0;x<z;x++){const p=Math.random()*Math.PI*2,X=Math.sqrt(Math.random())*350,Y=Math.cos(p)*X,L=Math.sin(p)*X;let F;if(M&&M.length>0)F=D==="mixed"?M[x%M.length]:M[0];else if(h.current.color)F=h.current.color;else{const $=260+Math.random()*60,k=70+Math.random()*30,O=60+Math.random()*20;F=`hsl(${$}, ${k}%, ${O}%)`}let W=2+Math.random()*2;X>200&&(W*=.6),X<80&&(W*=1.5);const A=new st(Y,L,F,W);A.x=y/2,A.y=w/2,s.current.push(A)}}},u=new ResizeObserver(l);u.observe(a);const R=c.getContext("2d");let E=0;const q=()=>{const b=a.getBoundingClientRect();R.globalCompositeOperation="source-over",e==="transparent"?R.clearRect(0,0,b.width,b.height):(R.fillStyle=e,R.fillRect(0,0,b.width,b.height)),o.current.initialized||(o.current.x=b.width/2,o.current.y=b.height/2,o.current.initialized=!0);let C=b.width/2,y=b.height/2;const w=r.current.active?r.current.x:null,P=r.current.active?r.current.y:null;w!==null&&P!==null&&(C=w,y=P);const S=C-o.current.x,I=y-o.current.y,z=Math.sqrt(S*S+I*I);let M=0,D=0;z>1?(M=S/z,D=I/z,o.current.angle=Math.atan2(D,M)):(M=Math.cos(o.current.angle),D=Math.sin(o.current.angle));const x=h.current.particleSpeed??1;E+=.02*x;const p=E%4;let X=1,Y=1,L=0;if(p<1){const O=p;X=1-Math.sin(O*Math.PI)*.3,Y=1+Math.sin(O*Math.PI)*.15,L=Math.sin(O*Math.PI)*12}else{const O=(p-1)/3;X=.7+.3*Math.sin(O*Math.PI/2),Y=1,L=0}const F=h.current.pointerTrackingSpeed??.02;o.current.x+=S*F,o.current.y+=I*F,o.current.x+=M*L*x,o.current.y+=D*L*x;const A=200*(Y+(p<1?p*.15:0)),$=R.createRadialGradient(o.current.x,o.current.y,0,o.current.x,o.current.y,A);$.addColorStop(0,"rgba(80, 150, 255, 0.05)"),$.addColorStop(1,"rgba(80, 150, 255, 0)"),R.fillStyle=$,R.beginPath(),R.arc(o.current.x,o.current.y,A,0,Math.PI*2),R.fill();const k=s.current;R.globalCompositeOperation="source-over";for(const O of k){O.update(o.current.x,o.current.y,E,X);const lt=h.current.shape||"circle";O.draw(R,lt,Y)}g.current=requestAnimationFrame(q)};return q(),()=>{u.disconnect(),cancelAnimationFrame(g.current)}},[e,t.density]),T.jsx("div",{ref:n,style:{position:"absolute",inset:0,zIndex:0,overflow:"hidden",pointerEvents:"none"},children:T.jsx("canvas",{ref:i,style:{display:"block",width:"100%",height:"100%",pointerEvents:"none"}})})}const it={position:"relative",border:"1px solid rgba(255, 255, 255, 0.1)",borderRadius:"1rem",overflow:"hidden",boxShadow:"0 25px 50px -12px rgba(0, 0, 0, 0.25)",transition:"all 300ms ease-out"};function j({children:t,width:e="100%",height:n="60vh",backgroundColor:i="#050505",className:s="",style:g,background:r={name:"NONE"}}){return T.jsxs("div",{className:s,style:{...it,width:e,height:n,backgroundColor:i,...g},children:[r.name==="FOLLOW_POINTER"&&T.jsx(et,{config:r,backgroundColor:i}),r.name==="NET"&&T.jsx(rt,{config:r,backgroundColor:i}),r.name==="JELLYFISH"&&T.jsx(ot,{config:r,backgroundColor:i}),T.jsx("div",{style:{position:"relative",zIndex:10,width:"100%",height:"100%"},children:t})]})}function H(t){const e=f.useRef({x:-1e3,y:-1e3,isDown:!1,active:!1});return f.useEffect(()=>{const n=t.current;if(!n)return;const i=o=>{const h=n.getBoundingClientRect();e.current.x=o.clientX-h.left,e.current.y=o.clientY-h.top,e.current.active=!0},s=()=>{e.current.active=!1},g=()=>{e.current.isDown=!0},r=()=>{e.current.isDown=!1};return n.addEventListener("pointermove",i),n.addEventListener("pointerleave",s),n.addEventListener("pointerdown",g),n.addEventListener("pointerup",r),n.style.touchAction="none",()=>{n.removeEventListener("pointermove",i),n.removeEventListener("pointerleave",s),n.removeEventListener("pointerdown",g),n.removeEventListener("pointerup",r)}},[t]),e}function J(t,e,n,i,s,g,r,o,h){if(s===null||g===null||!o&&h==="none")return{x:n,y:i};let v=n,d=i;const c=s-t,a=g-e,l=c*c+a*a,u=Math.sqrt(l);if(o&&!r&&l<3e4){const E=(3e4-l)/3e4;v+=c*E*.15,d+=a*E*.15}if(r&&h!=="none"){if(h==="attract"){if(l<3e4){const E=(3e4-l)/3e4;v+=c*E*.8,d+=a*E*.8}}else if(h==="repel"&&l<5e4&&u>0){const E=Math.pow(Math.max(0,5e4-l)/5e4,1.2);v-=c/u*E*400,d-=a/u*E*400}}return{x:v,y:d}}class G{constructor(e,n,i="255, 255, 255"){m(this,"x");m(this,"y");m(this,"vx");m(this,"vy");m(this,"targetX");m(this,"targetY");m(this,"baseColor");m(this,"opacity");m(this,"size");m(this,"sizeMultiplier");m(this,"friction");m(this,"ease");m(this,"easeMultiplier");m(this,"floatSpeed");m(this,"floatOffset");m(this,"randomSpeed");this.x=Math.random()*e,this.y=Math.random()*n,this.targetX=this.x,this.targetY=this.y,this.vx=0,this.vy=0,this.size=Math.random()*1.8+.5,this.sizeMultiplier=1,this.baseColor=Array.isArray(i)?i[Math.floor(Math.random()*i.length)]:i,this.opacity=.4+Math.random()*.6,this.friction=.82+Math.random()*.1,this.ease=.03+Math.random()*.05,this.easeMultiplier=1,this.floatSpeed=Math.random()*.02+.005,this.floatOffset=Math.random()*Math.PI*2,this.randomSpeed=Math.random()}update(e,n,i=null,s=null,g=!1,r=!0,o="none"){const{x:h,y:v}=J(this.x,this.y,this.targetX,this.targetY,i,s,g,r,o),d=h-this.x,c=v-this.y,a=n?0:Math.cos(e*.01+this.y*.01)*.5,l=n?0:Math.sin(e*.01+this.x*.01)*.5;this.vx+=d*(this.ease*this.easeMultiplier)+a,this.vy+=c*(this.ease*this.easeMultiplier)+l,this.vx*=this.friction,this.vy*=this.friction,this.x+=this.vx,this.y+=this.vy;const u=n?.2:2;this.x+=Math.cos(e*this.floatSpeed+this.floatOffset)*u,this.y+=Math.sin(e*this.floatSpeed+this.floatOffset)*u}draw(e,n="circle",i=0){e.fillStyle=`rgba(${this.baseColor}, ${this.opacity})`;const s=Math.max(.1,this.size*this.sizeMultiplier);if(n==="square")e.fillRect(this.x-s,this.y-s,s*2,s*2);else if(n==="bean"){const g=6+this.size*2*this.sizeMultiplier,r=Math.sin(i*.05+this.x*.01+this.randomSpeed*5),o=.4+.6*((r+1)/2),h=g*.5*o,v=Math.max(.8,s*1.5*(.8+.2*r)),d=this.vx!==0||this.vy!==0?Math.atan2(this.vy,this.vx):0;e.beginPath(),e.ellipse(this.x,this.y,h,v,d,0,Math.PI*2),e.fill()}else e.beginPath(),e.arc(this.x,this.y,s,0,Math.PI*2),e.fill()}}function K(t,e,n){if(e<=0||n<=0)return[];const i=document.createElement("canvas");i.width=e,i.height=n;const s=i.getContext("2d",{willReadFrequently:!0});if(!s)return[];s.clearRect(0,0,e,n);let g=Math.min(e,n)*.65;s.font=`bold ${g}px "Georgia", serif`;const r=s.measureText(t);r.width>e*.9&&(g=g*(e*.9)/r.width,s.font=`bold ${g}px "Georgia", serif`),s.fillStyle="white",s.textAlign="center",s.textBaseline="middle",s.fillText(t,e/2,n/2.05);const h=s.getImageData(0,0,e,n).data,v=[],d=window.innerWidth<600?6:8;for(let c=0;c<n;c+=d)for(let a=0;a<e;a+=d){const l=(c*e+a)*4;h[l+3]>128&&v.push({x:a+(Math.random()-.5)*4,y:c+(Math.random()-.5)*4})}return v}function _(t,e,n){const i=f.useRef(t);return f.useEffect(()=>{i.current=t},[t]),{getPixelsForText:K,updateTextTargets:(g,r,o)=>{var q,b;const h=r||((q=n.current)==null?void 0:q.offsetWidth)||window.innerWidth,v=o||((b=n.current)==null?void 0:b.offsetHeight)||window.innerHeight;if(!g){e.current.forEach(y=>{const w=50+Math.random()*(h-100),P=50+Math.random()*(v-100);(Math.abs(w-y.x)>20||Math.abs(P-y.y)>20)&&(y.vx+=(Math.random()-.5)*20,y.vy+=(Math.random()-.5)*20),y.targetX=w,y.targetY=P});return}const d=K(g,h,v);if(d.length===0)return;const c=h*.15,a=d.map(C=>({pt:C,key:C.x+(Math.random()-.5)*c}));a.sort((C,y)=>C.key-y.key);const l=a.map(C=>C.pt),u=e.current.map((C,y)=>({i:y,key:C.x+(Math.random()-.5)*c}));u.sort((C,y)=>C.key-y.key);const R=u.map(C=>C.i),E=Math.ceil(Math.sqrt(R.length));for(let C=0;C<R.length;C+=E){const y=Math.min(C+E,R.length),w=R.slice(C,y),P=[];for(let S=C;S<y;S++)P.push(l[S%l.length]);w.sort((S,I)=>e.current[S].y-e.current[I].y),P.sort((S,I)=>S.y-I.y);for(let S=0;S<w.length;S++){const I=w[S],z=e.current[I],M=P[S],D=M.x-z.x,x=M.y-z.y;if(Math.abs(D)>20||Math.abs(x)>20){z.vx+=(Math.random()-.5)*20,z.vy+=(Math.random()-.5)*20;const p=(Math.random()>.5?1:-1)*(Math.random()*10+5);z.vx+=Math.sign(x)*p,z.vy-=Math.sign(D)*p}z.targetX=M.x,z.targetY=M.y}}},textRef:i}}const N=t=>{if(!t||typeof t!="string")return"0, 0, 0";try{let e=0,n=0,i=0;if(t.length===4)e=parseInt(t[1]+t[1],16),n=parseInt(t[2]+t[2],16),i=parseInt(t[3]+t[3],16);else if(t.length===7)e=parseInt(t.substring(1,3),16),n=parseInt(t.substring(3,5),16),i=parseInt(t.substring(5,7),16);else return t;return`${e}, ${n}, ${i}`}catch{return"0, 0, 0"}};function ct({text:t,particleColor:e="255, 255, 255",particleSize:n=1,particleDensity:i=1,particleEase:s=1,isMagnet:g=!0,clickMode:r="none",particleShape:o="circle",backgroundColor:h="#050505"}){const v=f.useRef(null),d=f.useRef(null),c=f.useRef([]),a=f.useRef(0),l=f.useRef(0),u=H(d),R=f.useRef({isMagnet:g,clickMode:r,particleShape:o,backgroundColor:h});R.current={isMagnet:g,clickMode:r,particleShape:o,backgroundColor:h};const{updateTextTargets:E,textRef:q}=_(t,c,d),b=()=>Array.isArray(e)?e.map(y=>N(y)):N(e),C=(y,w,P=1)=>{const S=window.innerWidth<600?1500:3e3,I=Math.floor(S*P),z=[],M=b();for(let D=0;D<I;D++){const x=new G(y,w,M);x.sizeMultiplier=n,x.easeMultiplier=s,z.push(x)}c.current=z};return f.useEffect(()=>{if(c.current.length>0){const y=b();c.current.forEach(w=>{w.baseColor=Array.isArray(y)?y[Math.floor(Math.random()*y.length)]:y})}},[e]),f.useEffect(()=>{c.current.length>0&&c.current.forEach(y=>{y.sizeMultiplier=n})},[n]),f.useEffect(()=>{c.current.length>0&&c.current.forEach(y=>{y.easeMultiplier=s})},[s]),f.useEffect(()=>{if(c.current.length>0&&v.current&&d.current){const y=window.innerWidth<600?1500:3e3,w=Math.floor(y*i),P=c.current.length;if(w>P){const S=d.current.getBoundingClientRect(),I=b();for(let z=0;z<w-P;z++){const M=new G(S.width,S.height,I);M.sizeMultiplier=n,c.current.push(M)}E(t)}else w<P&&c.current.splice(w)}},[i]),f.useEffect(()=>{const y=d.current,w=v.current;if(!y||!w)return;const P=M=>{for(const D of M){const{width:x,height:p}=D.contentRect,X=window.devicePixelRatio||1;w.width=x*X,w.height=p*X,w.style.width=`${x}px`,w.style.height=`${p}px`;const Y=w.getContext("2d");Y&&Y.scale(X,X),c.current.length===0&&C(x,p,i),E(t,x,p)}},S=new ResizeObserver(P);S.observe(y);const I=w.getContext("2d"),z=()=>{l.current++;const M=y.getBoundingClientRect(),{isMagnet:D,clickMode:x,particleShape:p,backgroundColor:X}=R.current;if(X==="transparent")I.clearRect(0,0,M.width,M.height),I.globalCompositeOperation="source-over";else{const A=N(X);I.fillStyle=`rgba(${A}, 0.25)`,I.fillRect(0,0,M.width,M.height),I.globalCompositeOperation="screen"}const Y=q.current!=="",L=u.current.active?u.current.x:null,F=u.current.active?u.current.y:null,W=u.current.isDown;for(let A=0;A<c.current.length;A++){const $=c.current[A];$.update(l.current,!!Y,L,F,W,D,x),$.draw(I,p,l.current)}I.globalCompositeOperation="source-over",a.current=requestAnimationFrame(z)};return z(),()=>{S.disconnect(),cancelAnimationFrame(a.current)}},[]),f.useEffect(()=>{E(t)},[t]),T.jsx("div",{ref:d,style:{position:"absolute",inset:0,zIndex:0,overflow:"hidden"},children:T.jsx("canvas",{ref:v,style:{display:"block",width:"100%",height:"100%"}})})}function at({name:t,config:e,width:n="100%",height:i="60vh",backgroundColor:s="#050505",className:g="",style:r}){const o={name:t,...e};return T.jsx(j,{width:n,height:i,backgroundColor:s,className:g,style:r,background:o})}B.ParticleBackground=at,B.ParticleCanvas=j,B.TextParticleEngine=ct,B.getMagnetTarget=J,B.useParticleInteraction=H,B.useTextParticles=_,Object.defineProperty(B,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jl-particle-interactive",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": false,
   "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.",
   "author": {