jl-particle-interactive 0.1.0

package/dist/components/Particle.d.ts

@@ -0,0 +1,21 @@
+import { ClickMode } from '../hooks/useParticleInteraction';
+export declare class Particle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    targetX: number;
+    targetY: number;
+    baseColor: string;
+    opacity: number;
+    size: number;
+    sizeMultiplier: number;
+    friction: number;
+    ease: number;
+    easeMultiplier: number;
+    floatSpeed: number;
+    floatOffset: number;
+    constructor(w: number, h: number, color?: string | string[]);
+    update(time: number, isActive: boolean, mx?: number | null, my?: number | null, isMouseDown?: boolean, isMagnet?: boolean, clickMode?: ClickMode): void;
+    draw(ctx: CanvasRenderingContext2D, shape?: 'circle' | 'square'): void;
+}

package/dist/components/ParticleCanvas.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface ParticleCanvasProps {
+    children?: ReactNode;
+    width?: string | number;
+    height?: string | number;
+    backgroundColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ParticleCanvas({ children, width, height, backgroundColor, className, style, }: ParticleCanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TextParticleEngine.d.ts

@@ -0,0 +1,14 @@
+import { ClickMode } from '../hooks/useParticleInteraction';
+import { ParticleShape } from '../types';
+export interface TextParticleEngineProps {
+    text: string;
+    particleColor?: string | string[];
+    particleSize?: number;
+    particleDensity?: number;
+    particleEase?: number;
+    isMagnet?: boolean;
+    clickMode?: ClickMode;
+    particleShape?: ParticleShape;
+    backgroundColor?: string;
+}
+export default function TextParticleEngine({ text, particleColor, particleSize, particleDensity, particleEase, isMagnet, clickMode, particleShape, backgroundColor }: TextParticleEngineProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useParticleInteraction.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+export type ClickMode = 'none' | 'attract' | 'repel';
+export declare function useParticleInteraction(containerRef: RefObject<HTMLDivElement | null>): RefObject<{
+    x: number;
+    y: number;
+    isDown: boolean;
+    active: boolean;
+}>;
+export declare function getMagnetTarget(x: number, y: number, targetX: number, targetY: number, mx: number | null, my: number | null, isMouseDown: boolean, isMagnet: boolean, clickMode: ClickMode): {
+    x: number;
+    y: number;
+};

package/dist/hooks/useTextParticles.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { Particle } from '../components/Particle';
+declare function getPixelsForText(text: string, width: number, height: number): {
+    x: number;
+    y: number;
+}[];
+export declare function useTextParticles(text: string, particlesRef: React.MutableRefObject<Particle[]>, containerRef: React.RefObject<HTMLElement | null>): {
+    getPixelsForText: typeof getPixelsForText;
+    updateTextTargets: (char: string, w?: number, h?: number) => void;
+    textRef: React.RefObject<string>;
+};
+export {};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { default as ParticleCanvas } from './components/ParticleCanvas';
+export type { ParticleCanvasProps } from './components/ParticleCanvas';
+export { default as TextParticleEngine } from './components/TextParticleEngine';
+export type { TextParticleEngineProps } from './components/TextParticleEngine';
+export { useParticleInteraction, getMagnetTarget } from './hooks/useParticleInteraction';
+export type { ClickMode } from './hooks/useParticleInteraction';
+export { useTextParticles } from './hooks/useTextParticles';
+export type { ParticleShape, ColorMode } from './types';

package/dist/jl-particle-interactive.js

@@ -0,0 +1,277 @@
+var H = Object.defineProperty;
+var j = (n, t, e) => t in n ? H(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var y = (n, t, e) => j(n, typeof t != "symbol" ? t + "" : t, e);
+import { jsx as L } from "react/jsx-runtime";
+import { useRef as E, useEffect as z } from "react";
+const G = {
+  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 _({
+  children: n,
+  width: t = "100%",
+  height: e = "60vh",
+  backgroundColor: r = "#050505",
+  className: a = "",
+  style: l
+}) {
+  return /* @__PURE__ */ L(
+    "div",
+    {
+      className: a,
+      style: { ...G, width: t, height: e, backgroundColor: r, ...l },
+      children: n
+    }
+  );
+}
+function K(n) {
+  const t = E({ x: -1e3, y: -1e3, isDown: !1, active: !1 });
+  return z(() => {
+    const e = n.current;
+    if (!e) return;
+    const r = (D) => {
+      const u = e.getBoundingClientRect();
+      t.current.x = D.clientX - u.left, t.current.y = D.clientY - u.top, t.current.active = !0;
+    }, a = () => {
+      t.current.active = !1;
+    }, l = () => {
+      t.current.isDown = !0;
+    }, x = () => {
+      t.current.isDown = !1;
+    };
+    return e.addEventListener("pointermove", r), e.addEventListener("pointerleave", a), e.addEventListener("pointerdown", l), e.addEventListener("pointerup", x), e.style.touchAction = "none", () => {
+      e.removeEventListener("pointermove", r), e.removeEventListener("pointerleave", a), e.removeEventListener("pointerdown", l), e.removeEventListener("pointerup", x);
+    };
+  }, [n]), t;
+}
+function U(n, t, e, r, a, l, x, D, u) {
+  if (a === null || l === null || !D && u === "none")
+    return { x: e, y: r };
+  let g = e, h = r;
+  const i = a - n, d = l - t, f = i * i + d * d, p = Math.sqrt(f);
+  if (D && !x && f < 3e4) {
+    const v = (3e4 - f) / 3e4;
+    g += i * v * 0.15, h += d * v * 0.15;
+  }
+  if (x && u !== "none") {
+    if (u === "attract") {
+      if (f < 3e4) {
+        const v = (3e4 - f) / 3e4;
+        g += i * v * 0.8, h += d * v * 0.8;
+      }
+    } else if (u === "repel" && f < 5e4 && p > 0) {
+      const v = Math.pow(Math.max(0, 5e4 - f) / 5e4, 1.2);
+      g -= i / p * v * 400, h -= d / p * v * 400;
+    }
+  }
+  return { x: g, y: h };
+}
+class O {
+  constructor(t, e, r = "255, 255, 255") {
+    y(this, "x");
+    y(this, "y");
+    y(this, "vx");
+    y(this, "vy");
+    y(this, "targetX");
+    y(this, "targetY");
+    y(this, "baseColor");
+    y(this, "opacity");
+    y(this, "size");
+    y(this, "sizeMultiplier");
+    y(this, "friction");
+    y(this, "ease");
+    y(this, "easeMultiplier");
+    y(this, "floatSpeed");
+    y(this, "floatOffset");
+    this.x = Math.random() * t, this.y = Math.random() * e, 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(r) ? r[Math.floor(Math.random() * r.length)] : r, 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;
+  }
+  update(t, e, r = null, a = null, l = !1, x = !0, D = "none") {
+    const { x: u, y: g } = U(
+      this.x,
+      this.y,
+      this.targetX,
+      this.targetY,
+      r,
+      a,
+      l,
+      x,
+      D
+    ), h = u - this.x, i = g - this.y, d = e ? 0 : Math.cos(t * 0.01 + this.y * 0.01) * 0.5, f = e ? 0 : Math.sin(t * 0.01 + this.x * 0.01) * 0.5;
+    this.vx += h * (this.ease * this.easeMultiplier) + d, this.vy += i * (this.ease * this.easeMultiplier) + f, this.vx *= this.friction, this.vy *= this.friction, this.x += this.vx, this.y += this.vy;
+    const p = e ? 0.2 : 2;
+    this.x += Math.cos(t * this.floatSpeed + this.floatOffset) * p, this.y += Math.sin(t * this.floatSpeed + this.floatOffset) * p;
+  }
+  draw(t, e = "circle") {
+    t.fillStyle = `rgba(${this.baseColor}, ${this.opacity})`;
+    const r = Math.max(0.1, this.size * this.sizeMultiplier);
+    e === "square" ? t.fillRect(this.x - r, this.y - r, r * 2, r * 2) : (t.beginPath(), t.arc(this.x, this.y, r, 0, Math.PI * 2), t.fill());
+  }
+}
+function A(n, t, e) {
+  if (t <= 0 || e <= 0) return [];
+  const r = document.createElement("canvas");
+  r.width = t, r.height = e;
+  const a = r.getContext("2d", { willReadFrequently: !0 });
+  if (!a) return [];
+  a.clearRect(0, 0, t, e);
+  let l = Math.min(t, e) * 0.65;
+  a.font = `bold ${l}px "Georgia", serif`;
+  const x = a.measureText(n);
+  x.width > t * 0.9 && (l = l * (t * 0.9) / x.width, a.font = `bold ${l}px "Georgia", serif`), a.fillStyle = "white", a.textAlign = "center", a.textBaseline = "middle", a.fillText(n, t / 2, e / 2.05);
+  const u = a.getImageData(0, 0, t, e).data, g = [], h = window.innerWidth < 600 ? 6 : 8;
+  for (let i = 0; i < e; i += h)
+    for (let d = 0; d < t; d += h) {
+      const f = (i * t + d) * 4;
+      u[f + 3] > 128 && g.push({
+        x: d + (Math.random() - 0.5) * 4,
+        y: i + (Math.random() - 0.5) * 4
+      });
+    }
+  return g;
+}
+function J(n, t, e) {
+  const r = E(n);
+  return z(() => {
+    r.current = n;
+  }, [n]), { getPixelsForText: A, updateTextTargets: (l, x, D) => {
+    var S, X;
+    const u = x || ((S = e.current) == null ? void 0 : S.offsetWidth) || window.innerWidth, g = D || ((X = e.current) == null ? void 0 : X.offsetHeight) || window.innerHeight;
+    if (!l) {
+      t.current.forEach((o) => {
+        const M = 50 + Math.random() * (u - 100), b = 50 + Math.random() * (g - 100);
+        (Math.abs(M - o.x) > 20 || Math.abs(b - o.y) > 20) && (o.vx += (Math.random() - 0.5) * 20, o.vy += (Math.random() - 0.5) * 20), o.targetX = M, o.targetY = b;
+      });
+      return;
+    }
+    const h = A(l, u, g);
+    if (h.length === 0) return;
+    const i = u * 0.15, d = h.map((s) => ({ pt: s, key: s.x + (Math.random() - 0.5) * i }));
+    d.sort((s, o) => s.key - o.key);
+    const f = d.map((s) => s.pt), p = t.current.map((s, o) => ({ i: o, key: s.x + (Math.random() - 0.5) * i }));
+    p.sort((s, o) => s.key - o.key);
+    const P = p.map((s) => s.i), v = Math.ceil(Math.sqrt(P.length));
+    for (let s = 0; s < P.length; s += v) {
+      const o = Math.min(s + v, P.length), M = P.slice(s, o), b = [];
+      for (let c = s; c < o; c++)
+        b.push(f[c % f.length]);
+      M.sort((c, w) => t.current[c].y - t.current[w].y), b.sort((c, w) => c.y - w.y);
+      for (let c = 0; c < M.length; c++) {
+        const w = M[c], m = t.current[w], R = b[c], T = R.x - m.x, C = R.y - m.y;
+        if (Math.abs(T) > 20 || Math.abs(C) > 20) {
+          m.vx += (Math.random() - 0.5) * 20, m.vy += (Math.random() - 0.5) * 20;
+          const I = (Math.random() > 0.5 ? 1 : -1) * (Math.random() * 10 + 5);
+          m.vx += Math.sign(C) * I, m.vy -= Math.sign(T) * I;
+        }
+        m.targetX = R.x, m.targetY = R.y;
+      }
+    }
+  }, textRef: r };
+}
+const N = (n) => {
+  if (!n || typeof n != "string") return "0, 0, 0";
+  try {
+    let t = 0, e = 0, r = 0;
+    return n.length === 4 ? (t = parseInt(n[1] + n[1], 16), e = parseInt(n[2] + n[2], 16), r = parseInt(n[3] + n[3], 16)) : n.length === 7 && (t = parseInt(n.substring(1, 3), 16), e = parseInt(n.substring(3, 5), 16), r = parseInt(n.substring(5, 7), 16)), `${t}, ${e}, ${r}`;
+  } catch {
+    return "0, 0, 0";
+  }
+};
+function tt({
+  text: n,
+  particleColor: t = "255, 255, 255",
+  particleSize: e = 1,
+  particleDensity: r = 1,
+  particleEase: a = 1,
+  isMagnet: l = !0,
+  clickMode: x = "none",
+  particleShape: D = "circle",
+  backgroundColor: u = "#050505"
+}) {
+  const g = E(null), h = E(null), i = E([]), d = E(0), f = E(0), p = K(h), P = E({ isMagnet: l, clickMode: x, particleShape: D, backgroundColor: u });
+  P.current = { isMagnet: l, clickMode: x, particleShape: D, backgroundColor: u };
+  const { updateTextTargets: v, textRef: S } = J(n, i, h), X = (s, o, M = 1) => {
+    const b = window.innerWidth < 600 ? 1500 : 3e3, c = Math.floor(b * M), w = [];
+    for (let m = 0; m < c; m++) {
+      const R = new O(s, o, t);
+      R.sizeMultiplier = e, R.easeMultiplier = a, w.push(R);
+    }
+    i.current = w;
+  };
+  return z(() => {
+    i.current.length > 0 && i.current.forEach((s) => {
+      s.baseColor = Array.isArray(t) ? t[Math.floor(Math.random() * t.length)] : t;
+    });
+  }, [t]), z(() => {
+    i.current.length > 0 && i.current.forEach((s) => {
+      s.sizeMultiplier = e;
+    });
+  }, [e]), z(() => {
+    i.current.length > 0 && i.current.forEach((s) => {
+      s.easeMultiplier = a;
+    });
+  }, [a]), z(() => {
+    if (i.current.length > 0 && g.current && h.current) {
+      const s = window.innerWidth < 600 ? 1500 : 3e3, o = Math.floor(s * r), M = i.current.length;
+      if (o > M) {
+        const b = h.current.getBoundingClientRect();
+        for (let c = 0; c < o - M; c++) {
+          const w = new O(b.width, b.height, t);
+          w.sizeMultiplier = e, i.current.push(w);
+        }
+        v(n);
+      } else o < M && i.current.splice(o);
+    }
+  }, [r]), z(() => {
+    const s = h.current, o = g.current;
+    if (!s || !o) return;
+    const M = (m) => {
+      for (const R of m) {
+        const { width: T, height: C } = R.contentRect, I = window.devicePixelRatio || 1;
+        o.width = T * I, o.height = C * I, o.style.width = `${T}px`, o.style.height = `${C}px`;
+        const Y = o.getContext("2d");
+        Y && Y.scale(I, I), i.current.length === 0 && X(T, C, r), v(n, T, C);
+      }
+    }, b = new ResizeObserver(M);
+    b.observe(s);
+    const c = o.getContext("2d"), w = () => {
+      f.current++;
+      const m = s.getBoundingClientRect(), { isMagnet: R, clickMode: T, particleShape: C, backgroundColor: I } = P.current, Y = N(I);
+      c.fillStyle = `rgba(${Y}, 0.25)`, c.fillRect(0, 0, m.width, m.height), c.globalCompositeOperation = "screen";
+      const W = S.current !== "", q = p.current.active ? p.current.x : null, B = p.current.active ? p.current.y : null, F = p.current.isDown;
+      for (let $ = 0; $ < i.current.length; $++) {
+        const k = i.current[$];
+        k.update(f.current, !!W, q, B, F, R, T), k.draw(c, C);
+      }
+      c.globalCompositeOperation = "source-over", d.current = requestAnimationFrame(w);
+    };
+    return w(), () => {
+      b.disconnect(), cancelAnimationFrame(d.current);
+    };
+  }, []), z(() => {
+    v(n);
+  }, [n]), /* @__PURE__ */ L(
+    "div",
+    {
+      ref: h,
+      style: { position: "absolute", inset: 0, zIndex: 0, overflow: "hidden" },
+      children: /* @__PURE__ */ L(
+        "canvas",
+        {
+          ref: g,
+          style: { display: "block", width: "100%", height: "100%" }
+        }
+      )
+    }
+  );
+}
+export {
+  _ as ParticleCanvas,
+  tt as TextParticleEngine,
+  U as getMagnetTarget,
+  K as useParticleInteraction,
+  J as useTextParticles
+};

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

@@ -0,0 +1 @@
+(function(f,M){typeof exports=="object"&&typeof module<"u"?M(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],M):(f=typeof globalThis<"u"?globalThis:f||self,M(f.JlParticleInteractive={},f.ReactJsxRuntime,f.React))})(this,(function(f,M,u){"use strict";var Q=Object.defineProperty;var V=(f,M,u)=>M in f?Q(f,M,{enumerable:!0,configurable:!0,writable:!0,value:u}):f[M]=u;var v=(f,M,u)=>V(f,typeof M!="symbol"?M+"":M,u);const B={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 F({children:r,width:t="100%",height:e="60vh",backgroundColor:n="#050505",className:a="",style:l}){return M.jsx("div",{className:a,style:{...B,width:t,height:e,backgroundColor:n,...l},children:r})}function O(r){const t=u.useRef({x:-1e3,y:-1e3,isDown:!1,active:!1});return u.useEffect(()=>{const e=r.current;if(!e)return;const n=E=>{const d=e.getBoundingClientRect();t.current.x=E.clientX-d.left,t.current.y=E.clientY-d.top,t.current.active=!0},a=()=>{t.current.active=!1},l=()=>{t.current.isDown=!0},b=()=>{t.current.isDown=!1};return e.addEventListener("pointermove",n),e.addEventListener("pointerleave",a),e.addEventListener("pointerdown",l),e.addEventListener("pointerup",b),e.style.touchAction="none",()=>{e.removeEventListener("pointermove",n),e.removeEventListener("pointerleave",a),e.removeEventListener("pointerdown",l),e.removeEventListener("pointerup",b)}},[r]),t}function k(r,t,e,n,a,l,b,E,d){if(a===null||l===null||!E&&d==="none")return{x:e,y:n};let m=e,h=n;const i=a-r,g=l-t,p=i*i+g*g,y=Math.sqrt(p);if(E&&!b&&p<3e4){const w=(3e4-p)/3e4;m+=i*w*.15,h+=g*w*.15}if(b&&d!=="none"){if(d==="attract"){if(p<3e4){const w=(3e4-p)/3e4;m+=i*w*.8,h+=g*w*.8}}else if(d==="repel"&&p<5e4&&y>0){const w=Math.pow(Math.max(0,5e4-p)/5e4,1.2);m-=i/y*w*400,h-=g/y*w*400}}return{x:m,y:h}}class q{constructor(t,e,n="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");this.x=Math.random()*t,this.y=Math.random()*e,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(n)?n[Math.floor(Math.random()*n.length)]:n,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}update(t,e,n=null,a=null,l=!1,b=!0,E="none"){const{x:d,y:m}=k(this.x,this.y,this.targetX,this.targetY,n,a,l,b,E),h=d-this.x,i=m-this.y,g=e?0:Math.cos(t*.01+this.y*.01)*.5,p=e?0:Math.sin(t*.01+this.x*.01)*.5;this.vx+=h*(this.ease*this.easeMultiplier)+g,this.vy+=i*(this.ease*this.easeMultiplier)+p,this.vx*=this.friction,this.vy*=this.friction,this.x+=this.vx,this.y+=this.vy;const y=e?.2:2;this.x+=Math.cos(t*this.floatSpeed+this.floatOffset)*y,this.y+=Math.sin(t*this.floatSpeed+this.floatOffset)*y}draw(t,e="circle"){t.fillStyle=`rgba(${this.baseColor}, ${this.opacity})`;const n=Math.max(.1,this.size*this.sizeMultiplier);e==="square"?t.fillRect(this.x-n,this.y-n,n*2,n*2):(t.beginPath(),t.arc(this.x,this.y,n,0,Math.PI*2),t.fill())}}function j(r,t,e){if(t<=0||e<=0)return[];const n=document.createElement("canvas");n.width=t,n.height=e;const a=n.getContext("2d",{willReadFrequently:!0});if(!a)return[];a.clearRect(0,0,t,e);let l=Math.min(t,e)*.65;a.font=`bold ${l}px "Georgia", serif`;const b=a.measureText(r);b.width>t*.9&&(l=l*(t*.9)/b.width,a.font=`bold ${l}px "Georgia", serif`),a.fillStyle="white",a.textAlign="center",a.textBaseline="middle",a.fillText(r,t/2,e/2.05);const d=a.getImageData(0,0,t,e).data,m=[],h=window.innerWidth<600?6:8;for(let i=0;i<e;i+=h)for(let g=0;g<t;g+=h){const p=(i*t+g)*4;d[p+3]>128&&m.push({x:g+(Math.random()-.5)*4,y:i+(Math.random()-.5)*4})}return m}function A(r,t,e){const n=u.useRef(r);return u.useEffect(()=>{n.current=r},[r]),{getPixelsForText:j,updateTextTargets:(l,b,E)=>{var X,Y;const d=b||((X=e.current)==null?void 0:X.offsetWidth)||window.innerWidth,m=E||((Y=e.current)==null?void 0:Y.offsetHeight)||window.innerHeight;if(!l){t.current.forEach(o=>{const R=50+Math.random()*(d-100),P=50+Math.random()*(m-100);(Math.abs(R-o.x)>20||Math.abs(P-o.y)>20)&&(o.vx+=(Math.random()-.5)*20,o.vy+=(Math.random()-.5)*20),o.targetX=R,o.targetY=P});return}const h=j(l,d,m);if(h.length===0)return;const i=d*.15,g=h.map(s=>({pt:s,key:s.x+(Math.random()-.5)*i}));g.sort((s,o)=>s.key-o.key);const p=g.map(s=>s.pt),y=t.current.map((s,o)=>({i:o,key:s.x+(Math.random()-.5)*i}));y.sort((s,o)=>s.key-o.key);const I=y.map(s=>s.i),w=Math.ceil(Math.sqrt(I.length));for(let s=0;s<I.length;s+=w){const o=Math.min(s+w,I.length),R=I.slice(s,o),P=[];for(let c=s;c<o;c++)P.push(p[c%p.length]);R.sort((c,T)=>t.current[c].y-t.current[T].y),P.sort((c,T)=>c.y-T.y);for(let c=0;c<R.length;c++){const T=R[c],x=t.current[T],D=P[c],C=D.x-x.x,S=D.y-x.y;if(Math.abs(C)>20||Math.abs(S)>20){x.vx+=(Math.random()-.5)*20,x.vy+=(Math.random()-.5)*20;const z=(Math.random()>.5?1:-1)*(Math.random()*10+5);x.vx+=Math.sign(S)*z,x.vy-=Math.sign(C)*z}x.targetX=D.x,x.targetY=D.y}}},textRef:n}}const H=r=>{if(!r||typeof r!="string")return"0, 0, 0";try{let t=0,e=0,n=0;return r.length===4?(t=parseInt(r[1]+r[1],16),e=parseInt(r[2]+r[2],16),n=parseInt(r[3]+r[3],16)):r.length===7&&(t=parseInt(r.substring(1,3),16),e=parseInt(r.substring(3,5),16),n=parseInt(r.substring(5,7),16)),`${t}, ${e}, ${n}`}catch{return"0, 0, 0"}};function G({text:r,particleColor:t="255, 255, 255",particleSize:e=1,particleDensity:n=1,particleEase:a=1,isMagnet:l=!0,clickMode:b="none",particleShape:E="circle",backgroundColor:d="#050505"}){const m=u.useRef(null),h=u.useRef(null),i=u.useRef([]),g=u.useRef(0),p=u.useRef(0),y=O(h),I=u.useRef({isMagnet:l,clickMode:b,particleShape:E,backgroundColor:d});I.current={isMagnet:l,clickMode:b,particleShape:E,backgroundColor:d};const{updateTextTargets:w,textRef:X}=A(r,i,h),Y=(s,o,R=1)=>{const P=window.innerWidth<600?1500:3e3,c=Math.floor(P*R),T=[];for(let x=0;x<c;x++){const D=new q(s,o,t);D.sizeMultiplier=e,D.easeMultiplier=a,T.push(D)}i.current=T};return u.useEffect(()=>{i.current.length>0&&i.current.forEach(s=>{s.baseColor=Array.isArray(t)?t[Math.floor(Math.random()*t.length)]:t})},[t]),u.useEffect(()=>{i.current.length>0&&i.current.forEach(s=>{s.sizeMultiplier=e})},[e]),u.useEffect(()=>{i.current.length>0&&i.current.forEach(s=>{s.easeMultiplier=a})},[a]),u.useEffect(()=>{if(i.current.length>0&&m.current&&h.current){const s=window.innerWidth<600?1500:3e3,o=Math.floor(s*n),R=i.current.length;if(o>R){const P=h.current.getBoundingClientRect();for(let c=0;c<o-R;c++){const T=new q(P.width,P.height,t);T.sizeMultiplier=e,i.current.push(T)}w(r)}else o<R&&i.current.splice(o)}},[n]),u.useEffect(()=>{const s=h.current,o=m.current;if(!s||!o)return;const R=x=>{for(const D of x){const{width:C,height:S}=D.contentRect,z=window.devicePixelRatio||1;o.width=C*z,o.height=S*z,o.style.width=`${C}px`,o.style.height=`${S}px`;const $=o.getContext("2d");$&&$.scale(z,z),i.current.length===0&&Y(C,S,n),w(r,C,S)}},P=new ResizeObserver(R);P.observe(s);const c=o.getContext("2d"),T=()=>{p.current++;const x=s.getBoundingClientRect(),{isMagnet:D,clickMode:C,particleShape:S,backgroundColor:z}=I.current,$=H(z);c.fillStyle=`rgba(${$}, 0.25)`,c.fillRect(0,0,x.width,x.height),c.globalCompositeOperation="screen";const J=X.current!=="",K=y.current.active?y.current.x:null,U=y.current.active?y.current.y:null,N=y.current.isDown;for(let L=0;L<i.current.length;L++){const W=i.current[L];W.update(p.current,!!J,K,U,N,D,C),W.draw(c,S)}c.globalCompositeOperation="source-over",g.current=requestAnimationFrame(T)};return T(),()=>{P.disconnect(),cancelAnimationFrame(g.current)}},[]),u.useEffect(()=>{w(r)},[r]),M.jsx("div",{ref:h,style:{position:"absolute",inset:0,zIndex:0,overflow:"hidden"},children:M.jsx("canvas",{ref:m,style:{display:"block",width:"100%",height:"100%"}})})}f.ParticleCanvas=F,f.TextParticleEngine=G,f.getMagnetTarget=k,f.useParticleInteraction=O,f.useTextParticles=A,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+export type ColorMode = 'single' | 'palette';
+export type ParticleShape = 'circle' | 'square';

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "jl-particle-interactive",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Interactive particle text animation components for React",
+  "author": "JL",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/jl-particle-interactive.umd.cjs",
+  "module": "./dist/jl-particle-interactive.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/jl-particle-interactive.js",
+      "require": "./dist/jl-particle-interactive.umd.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "lint": "tsc --noEmit"
+  },
+  "keywords": [
+    "react",
+    "particles",
+    "animation",
+    "canvas",
+    "interactive",
+    "text"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.3",
+    "vite-plugin-dts": "^4.5.0"
+  }
+}