react-particle-physics 1.0.0

package/dist/index.mjs

@@ -0,0 +1,994 @@
+// src/ParticleSystem.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import * as THREE from "three";
+import { useFrame, useThree } from "@react-three/fiber";
+
+// src/sampleLogoToParticles.ts
+var createSeed = (x, y) => {
+  const n = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+  return n - Math.floor(n);
+};
+async function sampleLogoToParticles(imageUrl, targetCount, options = {}) {
+  const {
+    maxTextureSize = 1024,
+    mode = "alpha",
+    alphaThreshold = 0.04,
+    lumaThreshold = 0.64,
+    edgeThreshold = 0.08
+  } = options;
+  const image = await loadImage(imageUrl);
+  const scale = Math.min(1, maxTextureSize / Math.max(image.width, image.height));
+  const width = Math.max(1, Math.round(image.width * scale));
+  const height = Math.max(1, Math.round(image.height * scale));
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) {
+    throw new Error("Unable to create a 2D canvas context.");
+  }
+  context.clearRect(0, 0, width, height);
+  context.drawImage(image, 0, 0, width, height);
+  const imageData = context.getImageData(0, 0, width, height).data;
+  const luminance = new Float32Array(width * height);
+  for (let i = 0; i < width * height; i += 1) {
+    const offset = i * 4;
+    const r = imageData[offset] / 255;
+    const g = imageData[offset + 1] / 255;
+    const b = imageData[offset + 2] / 255;
+    luminance[i] = r * 0.2126 + g * 0.7152 + b * 0.0722;
+  }
+  const reservoir = [];
+  let visibleCount = 0;
+  const pixelScore = (x, y) => {
+    const idx = y * width + x;
+    const offset = idx * 4;
+    const alpha = imageData[offset + 3] / 255;
+    const luma = luminance[idx];
+    if (mode === "alpha") {
+      return alpha > alphaThreshold ? alpha : 0;
+    }
+    if (mode === "luma") {
+      return luma > lumaThreshold ? luma : 0;
+    }
+    if (mode === "hybrid") {
+      const alphaMask = alpha > alphaThreshold ? alpha : 0;
+      const lumaMask = luma > lumaThreshold ? luma : 0;
+      return Math.max(alphaMask, lumaMask);
+    }
+    const left = luminance[y * width + Math.max(0, x - 1)];
+    const right = luminance[y * width + Math.min(width - 1, x + 1)];
+    const up = luminance[Math.max(0, y - 1) * width + x];
+    const down = luminance[Math.min(height - 1, y + 1) * width + x];
+    const gradient = Math.abs(right - left) + Math.abs(down - up);
+    return gradient > edgeThreshold ? gradient : 0;
+  };
+  for (let y = 0; y < height; y += 1) {
+    for (let x = 0; x < width; x += 1) {
+      const index = (y * width + x) * 4;
+      const alpha = imageData[index + 3] / 255;
+      const score = pixelScore(x, y);
+      if (score <= 0) {
+        continue;
+      }
+      visibleCount += 1;
+      const brightness = (imageData[index] + imageData[index + 1] + imageData[index + 2]) / (255 * 3);
+      const point = {
+        x,
+        y,
+        uvX: (x + 0.5) / width,
+        uvY: 1 - (y + 0.5) / height,
+        r: imageData[index] / 255,
+        g: imageData[index + 1] / 255,
+        b: imageData[index + 2] / 255,
+        alpha: Math.max(0.2, Math.min(1, score * 1.4 + alpha * 0.4 + brightness * 0.2)),
+        seed: createSeed(x, y)
+      };
+      if (reservoir.length < targetCount) {
+        reservoir.push(point);
+      } else {
+        const randomIndex = Math.floor(Math.random() * visibleCount);
+        if (randomIndex < targetCount) {
+          reservoir[randomIndex] = point;
+        }
+      }
+    }
+  }
+  if (reservoir.length === 0) {
+    throw new Error("The provided image did not contain any visible pixels to sample.");
+  }
+  const count = reservoir.length;
+  const position = new Float32Array(count * 3);
+  const uv = new Float32Array(count * 2);
+  const color = new Float32Array(count * 3);
+  const seed = new Float32Array(count);
+  const opacity = new Float32Array(count);
+  const fitScale = 0.96;
+  const imageAspect = width / height;
+  for (let i = 0; i < count; i += 1) {
+    const point = reservoir[i];
+    const normalizedX = ((point.x + 0.5) / width - 0.5) * 2;
+    const normalizedY = ((point.y + 0.5) / height - 0.5) * -2;
+    position[i * 3] = normalizedX * fitScale * imageAspect;
+    position[i * 3 + 1] = normalizedY * fitScale;
+    position[i * 3 + 2] = (point.seed - 0.5) * 0.02;
+    uv[i * 2] = point.uvX;
+    uv[i * 2 + 1] = point.uvY;
+    color[i * 3] = point.r;
+    color[i * 3 + 1] = point.g;
+    color[i * 3 + 2] = point.b;
+    seed[i] = point.seed;
+    opacity[i] = point.alpha;
+  }
+  return {
+    position,
+    uv,
+    color,
+    seed,
+    opacity,
+    count,
+    width,
+    height
+  };
+}
+async function loadImage(imageUrl) {
+  return await new Promise((resolve, reject) => {
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error(`Unable to load image at ${imageUrl}`));
+    image.src = imageUrl;
+  });
+}
+
+// src/particleShaders.ts
+var particleVertexShader = `
+precision highp float;
+
+uniform float uTime;
+uniform float uPixelRatio;
+uniform float uParticleSize;
+uniform float uInteractionRadius;
+uniform float uDisplacementStrength;
+uniform float uTrailStrength;
+uniform float uDestructTime;
+uniform vec2 uPointer;
+uniform sampler2D uTrailTexture;
+
+attribute vec2 aUv;
+attribute float aSeed;
+attribute float aOpacity;
+attribute vec3 aOriginalColor;
+
+varying float vOpacity;
+varying float vSeed;
+varying float vTrail;
+varying vec3 vOriginalColor;
+
+float hash11(float p) {
+  p = fract(p * 0.1031);
+  p *= p + 33.33;
+  p *= p + p;
+  return fract(p);
+}
+
+void main() {
+  vec3 transformed = position;
+  vec2 delta = aUv - uPointer;
+  float distanceToPointer = length(delta);
+  float influence = 1.0 - smoothstep(0.0, uInteractionRadius, distanceToPointer);
+  influence = pow(influence, 1.75);
+
+  vec2 safeDelta = delta / max(distanceToPointer, 0.0001);
+  vec2 repel = safeDelta * influence * uDisplacementStrength;
+
+  vec4 trailSample = texture2D(uTrailTexture, aUv);
+  vec2 trail = trailSample.rg * 2.0 - 1.0;
+  float trailEnergy = trailSample.a;
+
+  float noise = hash11(aSeed + uTime * 0.2);
+  vec2 ambient = vec2(sin(uTime * 0.5 + aSeed * 12.1), cos(uTime * 0.37 + aSeed * 4.9)) * 0.0015;
+
+  transformed.xy += repel;
+  transformed.xy += trail * (uTrailStrength * (0.2 + trailEnergy));
+  transformed.xy += ambient * (0.5 + noise);
+  transformed.z += trailEnergy * 0.04;
+
+  if (uDestructTime > 0.0) {
+    vec3 outward = normalize(transformed + vec3(hash11(aSeed) - 0.5, hash11(aSeed * 2.0) - 0.5, hash11(aSeed * 3.0) - 0.5) * 0.5);
+    float speed = (2.0 + hash11(aSeed * 5.0) * 8.0) * uDestructTime + uDestructTime * uDestructTime * 15.0;
+    transformed += outward * speed;
+    transformed.x += sin(uDestructTime * 10.0 + aSeed * 20.0) * uDestructTime * 0.5;
+    transformed.y += cos(uDestructTime * 12.0 + aSeed * 25.0) * uDestructTime * 0.5;
+  }
+
+  vec4 mvPosition = modelViewMatrix * vec4(transformed, 1.0);
+  float perspectiveScale = 1.0 / max(0.6, -mvPosition.z);
+  gl_PointSize = uParticleSize * uPixelRatio * perspectiveScale * (0.72 + aOpacity * 0.55);
+  gl_Position = projectionMatrix * mvPosition;
+
+  vOpacity = aOpacity;
+  vSeed = aSeed;
+  vTrail = trailEnergy;
+  vOriginalColor = aOriginalColor;
+}
+`;
+var particleFragmentShader = `
+precision highp float;
+
+uniform float uTime;
+uniform vec3 uColor;
+uniform float uGlowIntensity;
+uniform int uColorMode;
+uniform float uOpacityVariation;
+uniform float uDestructTime;
+
+varying float vOpacity;
+varying float vSeed;
+varying float vTrail;
+varying vec3 vOriginalColor;
+
+float hash11(float p) {
+  p = fract(p * 0.1031);
+  p *= p + 33.33;
+  p *= p + p;
+  return fract(p);
+}
+
+vec3 seedToColor(float s) {
+  return vec3(
+    0.5 + 0.5 * sin(s * 6.2831 * 1.0 + 0.0),
+    0.5 + 0.5 * sin(s * 6.2831 * 1.5 + 2.094),
+    0.5 + 0.5 * sin(s * 6.2831 * 2.0 + 4.188)
+  );
+}
+
+void main() {
+  vec2 centered = gl_PointCoord - 0.5;
+  float dist = length(centered);
+  float soft = 1.0 - smoothstep(0.22, 0.5, dist);
+  float halo = 1.0 - smoothstep(0.0, 0.5, dist);
+  float sparkle = mix(0.88, 1.08, hash11(vSeed * 37.0 + floor(uTime * 4.0)));
+
+  float alpha = soft * soft * mix(1.0, 0.55 + vOpacity * 0.45, uOpacityVariation);
+  alpha *= mix(0.9, 1.12, vTrail);
+
+  vec3 baseColor = uColor;
+  if (uColorMode == 1) {
+    baseColor = seedToColor(vSeed);
+  } else if (uColorMode == 2) {
+    baseColor = vOriginalColor;
+  }
+
+  float glow = pow(halo, max(0.1, 2.0 - uGlowIntensity)) * uGlowIntensity * 0.6;
+  vec3 color = baseColor * (0.72 + halo * 0.32 + glow) * sparkle;
+
+  if (uDestructTime > 0.0) {
+    alpha *= max(0.0, 1.0 - uDestructTime * 0.4);
+  }
+
+  gl_FragColor = vec4(color, alpha);
+}
+`;
+var trailVertexShader = `
+precision highp float;
+
+varying vec2 vUv;
+
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position.xy, 0.0, 1.0);
+}
+`;
+var trailFragmentShader = `
+precision highp float;
+
+uniform sampler2D uPreviousTrail;
+uniform vec2 uPointer;
+uniform vec2 uPreviousPointer;
+uniform float uDecay;
+uniform float uBrushSize;
+uniform float uBrushStrength;
+uniform float uTime;
+
+varying vec2 vUv;
+
+float lineMask(vec2 p, vec2 a, vec2 b, float radius) {
+  vec2 pa = p - a;
+  vec2 ba = b - a;
+  float h = clamp(dot(pa, ba) / max(dot(ba, ba), 0.0001), 0.0, 1.0);
+  return 1.0 - smoothstep(radius * 0.72, radius, length(pa - ba * h));
+}
+
+void main() {
+  vec4 texColor = texture2D(uPreviousTrail, vUv);
+  
+  // Decode flow from 0..1 to -1..1
+  vec2 prevFlow = texColor.rg * 2.0 - 1.0;
+  
+  // Apply decay
+  prevFlow *= uDecay;
+  float prevEnergy = texColor.a * uDecay;
+
+  float pointerGlow = 1.0 - smoothstep(uBrushSize, uBrushSize * 1.7, length(vUv - uPointer));
+  float trailGlow = lineMask(vUv, uPreviousPointer, uPointer, uBrushSize * 0.75);
+  float pulse = 0.9 + 0.1 * sin(uTime * 2.0);
+
+  vec2 motion = uPointer - uPreviousPointer;
+  // Scale motion by a constant so faster movements create larger flow, 
+  // without jumping to 100% force on tiny directional changes.
+  vec2 flow = motion * 50.0 * (pointerGlow + trailGlow);
+  
+  vec2 newFlow = clamp(prevFlow + flow * uBrushStrength, -1.0, 1.0);
+  float newEnergy = max(prevEnergy, max(pointerGlow, trailGlow) * pulse * uBrushStrength);
+
+  // Encode flow back to 0..1
+  gl_FragColor = vec4(newFlow * 0.5 + 0.5, newEnergy, newEnergy);
+}
+`;
+
+// src/ParticleSystem.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ParticleSystem({
+  image,
+  particleCount = 5e4,
+  interactionRadius = 0.25,
+  displacementStrength = 0.15,
+  particleSize = 2,
+  trailStrength = 0.18,
+  sampleMode = "edge",
+  alphaThreshold = 0.04,
+  lumaThreshold = 0.64,
+  edgeThreshold = 0.08,
+  particleColor = "#f5f7fb",
+  colorMode = "base",
+  glowIntensity = 0.4,
+  opacityVariation = 0.5,
+  isDestructing = false,
+  onDestructComplete,
+  onPointsRef,
+  onLoadStatus
+}) {
+  const [particleData, setParticleData] = useState(null);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    setParticleData(null);
+    setError(null);
+    onLoadStatus?.(true, null);
+    sampleLogoToParticles(image, particleCount, {
+      mode: sampleMode,
+      alphaThreshold,
+      lumaThreshold,
+      edgeThreshold
+    }).then((data) => {
+      if (mounted) {
+        setParticleData(data);
+        onLoadStatus?.(false, null);
+      }
+    }).catch((loadError) => {
+      if (mounted) {
+        const errMsg = loadError instanceof Error ? loadError.message : "Unable to load particles.";
+        setError(errMsg);
+        onLoadStatus?.(false, errMsg);
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [alphaThreshold, edgeThreshold, image, lumaThreshold, particleCount, sampleMode, onLoadStatus]);
+  const pointerTarget = useRef(new THREE.Vector2(-10, -10));
+  const pointerCurrent = useRef(new THREE.Vector2(-10, -10));
+  const pointerPrevious = useRef(new THREE.Vector2(-10, -10));
+  const isPointerActive = useRef(false);
+  const particleGeometry = useMemo(() => new THREE.BufferGeometry(), []);
+  const particleMaterial = useMemo(() => createParticleMaterial(), []);
+  const trail = useMemo(() => createTrailState(), []);
+  const particleMesh = useRef(null);
+  const { gl, size } = useThree();
+  useEffect(() => {
+    trail.resize(size.width, size.height);
+  }, [gl, size.height, size.width, trail]);
+  useEffect(() => {
+    if (!particleData || error) return;
+    particleGeometry.setAttribute("position", new THREE.BufferAttribute(particleData.position, 3));
+    particleGeometry.setAttribute("aUv", new THREE.BufferAttribute(particleData.uv, 2));
+    particleGeometry.setAttribute("aOriginalColor", new THREE.BufferAttribute(particleData.color, 3));
+    particleGeometry.setAttribute("aSeed", new THREE.BufferAttribute(particleData.seed, 1));
+    particleGeometry.setAttribute("aOpacity", new THREE.BufferAttribute(particleData.opacity, 1));
+    particleGeometry.computeBoundingSphere();
+  }, [error, particleData, particleGeometry]);
+  useEffect(() => {
+    if (particleData && particleMesh.current) {
+      onPointsRef?.(particleMesh.current);
+    }
+    return () => onPointsRef?.(null);
+  }, [particleData, onPointsRef]);
+  const destructStartTime = useRef(null);
+  useFrame(({ clock, gl: gl2 }, delta) => {
+    if (isPointerActive.current && particleData) {
+      if (pointerCurrent.current.x < -5) {
+        pointerCurrent.current.copy(pointerTarget.current);
+        pointerPrevious.current.copy(pointerTarget.current);
+      } else {
+        const smoothing = 1 - Math.exp(-delta * 12);
+        pointerCurrent.current.lerp(pointerTarget.current, smoothing);
+      }
+    } else {
+      pointerTarget.current.set(-10, -10);
+      pointerCurrent.current.set(-10, -10);
+      pointerPrevious.current.set(-10, -10);
+    }
+    particleMaterial.uniforms.uTime.value = clock.elapsedTime;
+    particleMaterial.uniforms.uPointer.value.copy(pointerCurrent.current);
+    particleMaterial.uniforms.uPixelRatio.value = Math.min(window.devicePixelRatio || 1, 2);
+    particleMaterial.uniforms.uInteractionRadius.value = interactionRadius;
+    particleMaterial.uniforms.uDisplacementStrength.value = displacementStrength;
+    particleMaterial.uniforms.uParticleSize.value = particleSize;
+    particleMaterial.uniforms.uTrailStrength.value = trailStrength;
+    particleMaterial.uniforms.uGlowIntensity.value = glowIntensity;
+    particleMaterial.uniforms.uColorMode.value = colorMode === "original" ? 2 : colorMode === "random" ? 1 : 0;
+    particleMaterial.uniforms.uColor.value.set(particleColor);
+    particleMaterial.uniforms.uOpacityVariation.value = opacityVariation;
+    trail.uniforms.uPointer.value.copy(pointerCurrent.current);
+    trail.uniforms.uPreviousPointer.value.copy(pointerPrevious.current);
+    trail.uniforms.uTime.value = clock.elapsedTime;
+    trail.uniforms.uDecay.value = Math.pow(0.85, delta * 60);
+    trail.uniforms.uPreviousTrail.value = trail.read.texture;
+    gl2.setRenderTarget(trail.write);
+    gl2.render(trail.scene, trail.camera);
+    gl2.setRenderTarget(null);
+    trail.swap();
+    particleMaterial.uniforms.uTrailTexture.value = trail.read.texture;
+    pointerPrevious.current.copy(pointerCurrent.current);
+    if (particleMesh.current) {
+      particleMesh.current.rotation.z = Math.sin(clock.elapsedTime * 0.06) * 8e-3;
+    }
+    if (isDestructing) {
+      if (destructStartTime.current === null) destructStartTime.current = clock.elapsedTime;
+      const destructTime = clock.elapsedTime - destructStartTime.current;
+      particleMaterial.uniforms.uDestructTime.value = destructTime;
+      if (destructTime > 2.5 && onDestructComplete) onDestructComplete();
+    } else {
+      destructStartTime.current = null;
+      particleMaterial.uniforms.uDestructTime.value = 0;
+    }
+  });
+  if (!particleData || error) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "points",
+      {
+        ref: particleMesh,
+        geometry: particleGeometry,
+        material: particleMaterial,
+        frustumCulled: false,
+        scale: [1.6, 1.6, 1]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "mesh",
+      {
+        visible: false,
+        onPointerOver: () => {
+          isPointerActive.current = true;
+        },
+        onPointerOut: () => {
+          isPointerActive.current = false;
+        },
+        onPointerMove: (e) => {
+          if (!particleData) return;
+          isPointerActive.current = true;
+          const imageAspect = particleData.width / particleData.height;
+          const meshScale = 1.6;
+          const fitScale = 0.96;
+          const localX = e.point.x / meshScale;
+          const localY = e.point.y / meshScale;
+          const uvX = (localX / (fitScale * imageAspect) + 1) * 0.5;
+          const uvY = (localY / fitScale + 1) * 0.5;
+          pointerTarget.current.set(uvX, uvY);
+        },
+        children: /* @__PURE__ */ jsx("planeGeometry", { args: [100, 100] })
+      }
+    )
+  ] });
+}
+function createParticleMaterial() {
+  return new THREE.ShaderMaterial({
+    transparent: true,
+    depthWrite: false,
+    depthTest: false,
+    uniforms: {
+      uTime: { value: 0 },
+      uPixelRatio: { value: 1 },
+      uParticleSize: { value: 2 },
+      uInteractionRadius: { value: 0.25 },
+      uDisplacementStrength: { value: 0.15 },
+      uTrailStrength: { value: 0.18 },
+      uPointer: { value: new THREE.Vector2(0.5, 0.5) },
+      uTrailTexture: { value: null },
+      uColor: { value: new THREE.Color("#f5f7fb") },
+      uGlowIntensity: { value: 0.4 },
+      uColorMode: { value: 0 },
+      uOpacityVariation: { value: 0.5 },
+      uDestructTime: { value: 0 }
+    },
+    vertexShader: particleVertexShader,
+    fragmentShader: particleFragmentShader,
+    blending: THREE.AdditiveBlending
+  });
+}
+function createTrailState() {
+  const scene = new THREE.Scene();
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+  const uniforms = {
+    uPreviousTrail: { value: null },
+    uPointer: { value: new THREE.Vector2(0.5, 0.5) },
+    uPreviousPointer: { value: new THREE.Vector2(0.5, 0.5) },
+    uDecay: { value: 0.985 },
+    uBrushSize: { value: 0.08 },
+    uBrushStrength: { value: 0.55 },
+    uTime: { value: 0 }
+  };
+  const material = new THREE.ShaderMaterial({
+    transparent: false,
+    depthWrite: false,
+    depthTest: false,
+    uniforms,
+    vertexShader: trailVertexShader,
+    fragmentShader: trailFragmentShader
+  });
+  const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
+  scene.add(quad);
+  let write = new THREE.WebGLRenderTarget(512, 512, {
+    depthBuffer: false,
+    stencilBuffer: false,
+    generateMipmaps: false,
+    minFilter: THREE.LinearFilter,
+    magFilter: THREE.LinearFilter,
+    format: THREE.RGBAFormat,
+    type: THREE.UnsignedByteType
+  });
+  let read = write.clone();
+  const resize = (width, height) => {
+    const devicePixelRatio = Math.min(window.devicePixelRatio || 1, 2);
+    const resolution = Math.max(384, Math.min(1024, Math.round(Math.max(width, height) * devicePixelRatio)));
+    write.setSize(resolution, resolution);
+    read.setSize(resolution, resolution);
+    uniforms.uPreviousTrail.value = read.texture;
+  };
+  const swap = () => {
+    const temp = write;
+    write = read;
+    read = temp;
+    uniforms.uPreviousTrail.value = read.texture;
+  };
+  uniforms.uPreviousTrail.value = read.texture;
+  return { scene, camera, uniforms, get write() {
+    return write;
+  }, get read() {
+    return read;
+  }, resize, swap };
+}
+
+// src/LineSystem.tsx
+import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import * as THREE2 from "three";
+import { useFrame as useFrame2, useThree as useThree2 } from "@react-three/fiber";
+
+// src/lineShaders.ts
+var lineVertexShader = `
+precision highp float;
+
+uniform float uTime;
+uniform float uAmplitude;
+uniform float uLineWidth;
+uniform float uPixelRatio;
+uniform float uInteractionRadius;
+uniform float uDisplacementStrength;
+uniform float uDestructTime;
+uniform vec2 uPointer;
+
+attribute float aBrightness;
+attribute vec2 aUv;
+attribute float aSeed;
+attribute vec3 aOriginalColor;
+
+varying float vBrightness;
+varying float vSeed;
+varying vec3 vOriginalColor;
+varying vec2 vUv;
+
+float hash11(float p) {
+  p = fract(p * 0.1031);
+  p *= p + 33.33;
+  p *= p + p;
+  return fract(p);
+}
+
+void main() {
+  vec3 transformed = position;
+
+  // Pointer repulsion (same as particle system)
+  vec2 delta = aUv - uPointer;
+  float distanceToPointer = length(delta);
+  float influence = 1.0 - smoothstep(0.0, uInteractionRadius, distanceToPointer);
+  influence = pow(influence, 1.75);
+  vec2 safeDelta = delta / max(distanceToPointer, 0.0001);
+  vec2 repel = safeDelta * influence * uDisplacementStrength;
+  transformed.xy += repel;
+
+  // Subtle ambient motion
+  float noise = hash11(aSeed + uTime * 0.15);
+  vec2 ambient = vec2(
+    sin(uTime * 0.3 + aSeed * 8.0),
+    cos(uTime * 0.25 + aSeed * 5.0)
+  ) * 0.001;
+  transformed.xy += ambient * (0.5 + noise);
+
+  // Self-destruct
+  if (uDestructTime > 0.0) {
+    vec3 outward = normalize(transformed + vec3(
+      hash11(aSeed) - 0.5,
+      hash11(aSeed * 2.0) - 0.5,
+      hash11(aSeed * 3.0) - 0.5
+    ) * 0.5);
+    float speed = (2.0 + hash11(aSeed * 5.0) * 8.0) * uDestructTime + uDestructTime * uDestructTime * 15.0;
+    transformed += outward * speed;
+  }
+
+  vec4 mvPosition = modelViewMatrix * vec4(transformed, 1.0);
+  float perspectiveScale = 1.0 / max(0.6, -mvPosition.z);
+  gl_PointSize = uLineWidth * uPixelRatio * perspectiveScale;
+  gl_Position = projectionMatrix * mvPosition;
+
+  vBrightness = aBrightness;
+  vSeed = aSeed;
+  vOriginalColor = aOriginalColor;
+  vUv = aUv;
+}
+`;
+var lineFragmentShader = `
+precision highp float;
+
+uniform float uTime;
+uniform vec3 uColor;
+uniform float uGlowIntensity;
+uniform int uColorMode;
+uniform float uOpacityVariation;
+uniform float uDestructTime;
+
+varying float vBrightness;
+varying float vSeed;
+varying vec3 vOriginalColor;
+varying vec2 vUv;
+
+float hash11(float p) {
+  p = fract(p * 0.1031);
+  p *= p + 33.33;
+  p *= p + p;
+  return fract(p);
+}
+
+vec3 seedToColor(float s) {
+  return vec3(
+    0.5 + 0.5 * sin(s * 6.2831 * 1.0 + 0.0),
+    0.5 + 0.5 * sin(s * 6.2831 * 1.5 + 2.094),
+    0.5 + 0.5 * sin(s * 6.2831 * 2.0 + 4.188)
+  );
+}
+
+void main() {
+  // Soft circular point for smooth line appearance
+  vec2 centered = gl_PointCoord - 0.5;
+  float dist = length(centered);
+  float soft = 1.0 - smoothstep(0.3, 0.5, dist);
+
+  float alpha = vBrightness * mix(1.0, 0.55 + vBrightness * 0.45, uOpacityVariation);
+  alpha *= soft;
+  float sparkle = mix(0.88, 1.08, hash11(vSeed * 37.0 + floor(uTime * 4.0)));
+
+  vec3 baseColor = uColor;
+  if (uColorMode == 1) {
+    baseColor = seedToColor(vSeed);
+  } else if (uColorMode == 2) {
+    baseColor = vOriginalColor;
+  }
+
+  float glow = uGlowIntensity * 0.4;
+  vec3 color = baseColor * (0.72 + vBrightness * 0.32 + glow) * sparkle;
+
+  if (uDestructTime > 0.0) {
+    alpha *= max(0.0, 1.0 - uDestructTime * 0.4);
+  }
+
+  gl_FragColor = vec4(color, alpha);
+}
+`;
+
+// src/LineSystem.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+async function sampleImageToLines(imageUrl, lineCount, amplitude, sampleMode = "alpha", edgeThreshold = 0.075) {
+  const image = await loadImg(imageUrl);
+  const maxTextureSize = 1024;
+  const scale = Math.min(1, maxTextureSize / Math.max(image.width, image.height));
+  const width = Math.max(1, Math.round(image.width * scale));
+  const height = Math.max(1, Math.round(image.height * scale));
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  if (!ctx) throw new Error("Unable to create 2D context");
+  ctx.clearRect(0, 0, width, height);
+  ctx.drawImage(image, 0, 0, width, height);
+  const imageData = ctx.getImageData(0, 0, width, height).data;
+  const luminance = new Float32Array(width * height);
+  for (let i = 0; i < width * height; i++) {
+    const off = i * 4;
+    luminance[i] = imageData[off] / 255 * 0.2126 + imageData[off + 1] / 255 * 0.7152 + imageData[off + 2] / 255 * 0.0722;
+  }
+  const imageAspect = width / height;
+  const fitScale = 0.96;
+  const lines = [];
+  const actualLineCount = Math.min(lineCount, width);
+  const step = width / actualLineCount;
+  for (let i = 0; i < actualLineCount; i++) {
+    const x = Math.floor(i * step);
+    const positions = [];
+    const brightness = [];
+    const uvs = [];
+    const seeds = [];
+    const colors = [];
+    for (let y = 0; y < height; y++) {
+      const idx = (y * width + x) * 4;
+      const r = imageData[idx] / 255;
+      const g = imageData[idx + 1] / 255;
+      const b = imageData[idx + 2] / 255;
+      const a = imageData[idx + 3] / 255;
+      const luma = r * 0.2126 + g * 0.7152 + b * 0.0722;
+      let score = 0;
+      const alphaThreshold = 0.04;
+      const lumaThreshold = 0.64;
+      if (sampleMode === "alpha") {
+        score = a > alphaThreshold ? a : 0;
+      } else if (sampleMode === "luma") {
+        score = luma > lumaThreshold ? luma : 0;
+      } else if (sampleMode === "hybrid") {
+        score = Math.max(a > alphaThreshold ? a : 0, luma > lumaThreshold ? luma : 0);
+      } else {
+        const left = luminance[y * width + Math.max(0, x - 1)];
+        const right = luminance[y * width + Math.min(width - 1, x + 1)];
+        const up = luminance[Math.max(0, y - 1) * width + x];
+        const down = luminance[Math.min(height - 1, y + 1) * width + x];
+        const gradient = Math.abs(right - left) + Math.abs(down - up);
+        score = gradient > edgeThreshold ? gradient : 0;
+      }
+      const bright = score > 0 ? luma * a : 0;
+      const baseX = ((x + 0.5) / width - 0.5) * 2 * fitScale * imageAspect;
+      const displaceX = baseX + bright * amplitude;
+      const posY = ((y + 0.5) / height - 0.5) * -2 * fitScale;
+      const seedVal = Math.abs(Math.sin(x * 12.9898 + y * 78.233) * 43758.5453) % 1;
+      positions.push(displaceX, posY, seedVal * 5e-3);
+      brightness.push(bright);
+      uvs.push((x + 0.5) / width, 1 - (y + 0.5) / height);
+      seeds.push(seedVal);
+      colors.push(r, g, b);
+    }
+    if (positions.length > 0) {
+      lines.push({
+        positions: new Float32Array(positions),
+        brightness: new Float32Array(brightness),
+        uvs: new Float32Array(uvs),
+        seeds: new Float32Array(seeds),
+        colors: new Float32Array(colors),
+        vertexCount: positions.length / 3
+      });
+    }
+  }
+  return { lines, width, height };
+}
+function loadImg(imageUrl) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error(`Unable to load image at ${imageUrl}`));
+    image.src = imageUrl;
+  });
+}
+function LineSystem({
+  image,
+  lineCount = 100,
+  lineWidth = 1.5,
+  lineAmplitude = 0.15,
+  interactionRadius = 0.25,
+  displacementStrength = 0.15,
+  sampleMode = "alpha",
+  edgeThreshold = 0.075,
+  particleColor = "#f5f7fb",
+  colorMode = "base",
+  glowIntensity = 0.4,
+  opacityVariation = 0.5,
+  isDestructing = false,
+  onDestructComplete,
+  onLoadStatus
+}) {
+  const [lineData, setLineData] = useState2(null);
+  useEffect2(() => {
+    let mounted = true;
+    setLineData(null);
+    onLoadStatus?.(true, null);
+    sampleImageToLines(image, lineCount, lineAmplitude, sampleMode, edgeThreshold).then((data) => {
+      if (mounted) {
+        setLineData(data);
+        onLoadStatus?.(false, null);
+      }
+    }).catch((err) => {
+      if (mounted) {
+        const msg = err instanceof Error ? err.message : "Failed to sample lines.";
+        onLoadStatus?.(false, msg);
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [image, lineCount, lineAmplitude, sampleMode, edgeThreshold, onLoadStatus]);
+  const groupRef = useRef2(null);
+  const pointerTarget = useRef2(new THREE2.Vector2(-10, -10));
+  const pointerCurrent = useRef2(new THREE2.Vector2(-10, -10));
+  const isPointerActive = useRef2(false);
+  const destructStartTime = useRef2(null);
+  const linesRef = useRef2([]);
+  const { scene } = useThree2();
+  const material = useMemo2(() => {
+    return new THREE2.ShaderMaterial({
+      transparent: true,
+      depthWrite: false,
+      depthTest: false,
+      uniforms: {
+        uTime: { value: 0 },
+        uAmplitude: { value: 0.15 },
+        uLineWidth: { value: 1.5 },
+        uPixelRatio: { value: 1 },
+        uInteractionRadius: { value: 0.25 },
+        uDisplacementStrength: { value: 0.15 },
+        uDestructTime: { value: 0 },
+        uPointer: { value: new THREE2.Vector2(-10, -10) },
+        uColor: { value: new THREE2.Color("#f5f7fb") },
+        uGlowIntensity: { value: 0.4 },
+        uColorMode: { value: 0 },
+        uOpacityVariation: { value: 0.5 }
+      },
+      vertexShader: lineVertexShader,
+      fragmentShader: lineFragmentShader,
+      blending: THREE2.AdditiveBlending
+    });
+  }, []);
+  useEffect2(() => {
+    const group = groupRef.current;
+    if (!group || !lineData) return;
+    linesRef.current.forEach((line) => {
+      group.remove(line);
+      line.geometry.dispose();
+    });
+    linesRef.current = [];
+    lineData.lines.forEach((lineInfo) => {
+      const geom = new THREE2.BufferGeometry();
+      geom.setAttribute("position", new THREE2.BufferAttribute(lineInfo.positions, 3));
+      geom.setAttribute("aBrightness", new THREE2.BufferAttribute(lineInfo.brightness, 1));
+      geom.setAttribute("aUv", new THREE2.BufferAttribute(lineInfo.uvs, 2));
+      geom.setAttribute("aSeed", new THREE2.BufferAttribute(lineInfo.seeds, 1));
+      geom.setAttribute("aOriginalColor", new THREE2.BufferAttribute(lineInfo.colors, 3));
+      const lineObj = new THREE2.Points(geom, material);
+      lineObj.frustumCulled = false;
+      group.add(lineObj);
+      linesRef.current.push(lineObj);
+    });
+    return () => {
+      linesRef.current.forEach((line) => {
+        group.remove(line);
+        line.geometry.dispose();
+      });
+      linesRef.current = [];
+    };
+  }, [lineData, material, scene]);
+  useFrame2(({ clock }, delta) => {
+    if (isPointerActive.current) {
+      if (pointerCurrent.current.x < -5) {
+        pointerCurrent.current.copy(pointerTarget.current);
+      } else {
+        const smoothing = 1 - Math.exp(-delta * 12);
+        pointerCurrent.current.lerp(pointerTarget.current, smoothing);
+      }
+    } else {
+      pointerTarget.current.set(-10, -10);
+      pointerCurrent.current.set(-10, -10);
+    }
+    const colorModeValue = colorMode === "original" ? 2 : colorMode === "random" ? 1 : 0;
+    material.uniforms.uTime.value = clock.elapsedTime;
+    material.uniforms.uPointer.value.copy(pointerCurrent.current);
+    material.uniforms.uInteractionRadius.value = interactionRadius;
+    material.uniforms.uDisplacementStrength.value = displacementStrength;
+    material.uniforms.uLineWidth.value = lineWidth;
+    material.uniforms.uPixelRatio.value = Math.min(window.devicePixelRatio || 1, 2);
+    material.uniforms.uColor.value.set(particleColor);
+    material.uniforms.uGlowIntensity.value = glowIntensity;
+    material.uniforms.uColorMode.value = colorModeValue;
+    material.uniforms.uOpacityVariation.value = opacityVariation;
+    if (isDestructing) {
+      if (destructStartTime.current === null) destructStartTime.current = clock.elapsedTime;
+      const destructTime = clock.elapsedTime - destructStartTime.current;
+      material.uniforms.uDestructTime.value = destructTime;
+      if (destructTime > 2.5 && onDestructComplete) onDestructComplete();
+    } else {
+      destructStartTime.current = null;
+      material.uniforms.uDestructTime.value = 0;
+    }
+    if (groupRef.current) {
+      groupRef.current.rotation.z = Math.sin(clock.elapsedTime * 0.06) * 8e-3;
+    }
+  });
+  if (!lineData) return null;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("group", { ref: groupRef, scale: [1.6, 1.6, 1] }),
+    /* @__PURE__ */ jsx2(
+      "mesh",
+      {
+        visible: false,
+        onPointerOver: () => {
+          isPointerActive.current = true;
+        },
+        onPointerOut: () => {
+          isPointerActive.current = false;
+        },
+        onPointerMove: (e) => {
+          isPointerActive.current = true;
+          const imageAspect = lineData.width / lineData.height;
+          const meshScale = 1.6;
+          const fitScale = 0.96;
+          const localX = e.point.x / meshScale;
+          const localY = e.point.y / meshScale;
+          const uvX = (localX / (fitScale * imageAspect) + 1) * 0.5;
+          const uvY = (localY / fitScale + 1) * 0.5;
+          pointerTarget.current.set(uvX, uvY);
+        },
+        children: /* @__PURE__ */ jsx2("planeGeometry", { args: [100, 100] })
+      }
+    )
+  ] });
+}
+
+// src/performance.ts
+function detectPerformanceTier() {
+  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    typeof navigator !== "undefined" ? navigator.userAgent : ""
+  );
+  if (isMobile) return "low";
+  const nav = typeof navigator !== "undefined" ? navigator : {};
+  const memory = nav.deviceMemory || 4;
+  const cores = nav.hardwareConcurrency || 4;
+  if (memory < 4 || cores <= 2) return "low";
+  if (memory <= 8 || cores <= 4) return "medium";
+  if (memory <= 16 || cores <= 8) return "high";
+  return "ultra";
+}
+function getPresetSettings(tier) {
+  switch (tier) {
+    case "low":
+      return { particleCount: 15e3, particleSize: 3, lineCount: 50 };
+    case "medium":
+      return { particleCount: 3e4, particleSize: 2.5, lineCount: 100 };
+    case "ultra":
+      return { particleCount: 1e5, particleSize: 1.5, lineCount: 300 };
+    case "high":
+    default:
+      return { particleCount: 5e4, particleSize: 2, lineCount: 200 };
+  }
+}
+export {
+  LineSystem,
+  ParticleSystem,
+  detectPerformanceTier,
+  getPresetSettings,
+  sampleLogoToParticles
+};