@xdy-npm/react-particle-backgrounds 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1081 @@
+import { createContext, useState, useEffect, useCallback, useContext, useRef, useMemo } from 'react';
+import Particles, { initParticlesEngine } from '@tsparticles/react';
+import { loadSlim } from '@tsparticles/slim';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/ParticlesBackground.tsx
+
+// src/themes/base.ts
+var baseConfig = {
+  fullScreen: {
+    enable: true,
+    zIndex: 0
+  },
+  background: {
+    color: { value: "transparent" }
+  },
+  fpsLimit: 120,
+  detectRetina: true
+};
+var DEFAULT_COLORS = [
+  "#ffb3d9",
+  "#f43f5e",
+  "#a78bfa",
+  "#3b82f6",
+  "#10b981",
+  "#f59e0b",
+  "#ff6b6b",
+  "#8b5cf6",
+  "#06b6d4",
+  "#fb7185"
+];
+
+// src/themes/starline.ts
+var starlineTheme = {
+  id: "starline",
+  name: "Star Links",
+  icon: "\u2728",
+  description: "Classic particle linking effect",
+  backgroundGradient: "linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #334155 100%)",
+  options: (isDark) => {
+    const colors = DEFAULT_COLORS;
+    return {
+      ...baseConfig,
+      interactivity: {
+        detectsOn: "window",
+        events: {
+          onClick: { enable: true, mode: "push" },
+          onHover: { enable: true, mode: "grab" },
+          resize: { enable: true }
+        },
+        modes: {
+          push: { quantity: 6 },
+          grab: {
+            distance: 200,
+            links: { opacity: 1, color: colors }
+          }
+        }
+      },
+      particles: {
+        color: { value: colors },
+        links: {
+          color: colors,
+          distance: 150,
+          enable: true,
+          opacity: 0.5,
+          width: 1
+        },
+        move: {
+          direction: "none",
+          enable: true,
+          outModes: { default: "out" },
+          random: false,
+          speed: 2,
+          straight: false
+        },
+        number: {
+          density: { enable: true, width: 1920, height: 1080 },
+          value: 100
+        },
+        opacity: { value: 0.7 },
+        shape: { type: "circle" },
+        size: { value: { min: 2, max: 6 } },
+        shadow: {
+          blur: 8,
+          color: { value: colors },
+          enable: true,
+          offset: { x: 0, y: 0 }
+        }
+      }
+    };
+  }
+};
+
+// src/themes/snow.ts
+var snowTheme = {
+  id: "snow",
+  name: "Snowfall",
+  icon: "\u2744\uFE0F",
+  description: "Romantic falling snowflakes",
+  backgroundGradient: "linear-gradient(180deg, #1e3a5f 0%, #2d4a6b 50%, #3d5a7b 100%)",
+  options: (isDark) => ({
+    ...baseConfig,
+    interactivity: {
+      detectsOn: "window",
+      events: {
+        onHover: { enable: true, mode: "repulse" },
+        resize: { enable: true }
+      },
+      modes: {
+        repulse: { distance: 100, duration: 0.4 }
+      }
+    },
+    particles: {
+      color: { value: isDark ? "#ffffff" : "#87CEEB" },
+      move: {
+        direction: "bottom",
+        enable: true,
+        outModes: { default: "out" },
+        speed: { min: 1, max: 3 },
+        straight: false,
+        drift: { min: -0.5, max: 0.5 }
+      },
+      number: {
+        density: { enable: true, width: 1920, height: 1080 },
+        value: 80
+      },
+      opacity: {
+        value: { min: 0.3, max: 0.8 },
+        animation: { enable: true, speed: 1, minimumValue: 0.3, sync: false }
+      },
+      shape: { type: "circle" },
+      size: { value: { min: 2, max: 6 } },
+      wobble: {
+        enable: true,
+        distance: 10,
+        speed: { min: -5, max: 5 }
+      },
+      shadow: {
+        blur: 5,
+        color: { value: isDark ? "#ffffff" : "#87CEEB" },
+        enable: true,
+        offset: { x: 0, y: 0 }
+      }
+    }
+  })
+};
+
+// src/themes/bubble.ts
+var bubbleTheme = {
+  id: "bubble",
+  name: "Bubbles",
+  icon: "\u{1FAE7}",
+  description: "Dreamy rising bubbles",
+  backgroundGradient: "linear-gradient(180deg, #0a2647 0%, #144272 50%, #205295 100%)",
+  options: (isDark) => ({
+    ...baseConfig,
+    interactivity: {
+      detectsOn: "window",
+      events: {
+        onClick: { enable: true, mode: "pop" },
+        onHover: { enable: true, mode: "bubble" },
+        resize: { enable: true }
+      },
+      modes: {
+        bubble: { distance: 200, size: 15, duration: 2, opacity: 0.8 },
+        pop: {}
+      }
+    },
+    particles: {
+      color: {
+        value: isDark ? ["#00d9ff", "#00ff9d", "#ff00e6", "#ffee00"] : ["#ffb3d9", "#ff91c7", "#ffc0e5", "#ffd6e8"]
+      },
+      move: {
+        direction: "top",
+        enable: true,
+        outModes: { default: "out" },
+        speed: { min: 1, max: 2 },
+        straight: false
+      },
+      number: {
+        density: { enable: true, width: 1920, height: 1080 },
+        value: 50
+      },
+      opacity: {
+        value: { min: 0.2, max: 0.6 },
+        animation: { enable: true, speed: 0.5, minimumValue: 0.1, sync: false }
+      },
+      shape: { type: "circle" },
+      size: {
+        value: { min: 5, max: 15 },
+        animation: { enable: true, speed: 3, minimumValue: 3, sync: false }
+      },
+      stroke: {
+        width: 1,
+        color: { value: isDark ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.1)" }
+      },
+      shadow: {
+        blur: 10,
+        color: { value: isDark ? "#ffb3d9" : "#ff91c7" },
+        enable: true,
+        offset: { x: 0, y: 0 }
+      }
+    }
+  })
+};
+
+// src/themes/stars.ts
+var starsTheme = {
+  id: "stars",
+  name: "Twinkling Stars",
+  icon: "\u2B50",
+  description: "Sparkling starry sky",
+  backgroundGradient: "linear-gradient(180deg, #000000 0%, #1a1a2e 50%, #16213e 100%)",
+  options: (isDark) => ({
+    ...baseConfig,
+    interactivity: {
+      detectsOn: "window",
+      events: {
+        onClick: { enable: true, mode: "push" },
+        onHover: { enable: true, mode: "connect" },
+        resize: { enable: true }
+      },
+      modes: {
+        push: { quantity: 3 },
+        connect: { distance: 100, links: { opacity: 0.3 }, radius: 150 }
+      }
+    },
+    particles: {
+      color: {
+        value: isDark ? ["#ffffff", "#ffffd4", "#ffecd2", "#d4f1ff"] : ["#ffd700", "#ffb347", "#ff6b6b", "#4ecdc4"]
+      },
+      move: {
+        direction: "none",
+        enable: true,
+        outModes: { default: "out" },
+        random: true,
+        speed: 0.5,
+        straight: false
+      },
+      number: {
+        density: { enable: true, width: 1920, height: 1080 },
+        value: 120
+      },
+      opacity: {
+        value: { min: 0.2, max: 1 },
+        animation: {
+          enable: true,
+          speed: 1,
+          minimumValue: 0.1,
+          sync: false
+        }
+      },
+      shape: { type: "star", options: { star: { sides: 5 } } },
+      size: { value: { min: 1, max: 4 } },
+      twinkle: {
+        lines: { enable: false },
+        particles: {
+          enable: true,
+          frequency: 0.05,
+          opacity: 1,
+          color: { value: isDark ? "#ffffff" : "#ffd700" }
+        }
+      },
+      shadow: {
+        blur: 6,
+        color: { value: isDark ? "#ffffff" : "#ffd700" },
+        enable: true,
+        offset: { x: 0, y: 0 }
+      }
+    }
+  })
+};
+
+// src/themes/firefly.ts
+var fireflyTheme = {
+  id: "firefly",
+  name: "Fireflies",
+  icon: "\u{1FAB2}",
+  description: "Warm glowing firefly effect",
+  backgroundGradient: "linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%)",
+  options: (isDark) => ({
+    ...baseConfig,
+    interactivity: {
+      detectsOn: "window",
+      events: {
+        onHover: { enable: true, mode: "slow" },
+        resize: { enable: true }
+      },
+      modes: {
+        slow: { factor: 3, radius: 200 }
+      }
+    },
+    particles: {
+      color: {
+        value: isDark ? ["#ffff00", "#adff2f", "#7fff00", "#00ff7f"] : ["#ffc107", "#ff9800", "#ff5722", "#4caf50"]
+      },
+      move: {
+        direction: "none",
+        enable: true,
+        outModes: { default: "bounce" },
+        random: true,
+        speed: 1,
+        straight: false,
+        trail: {
+          enable: true,
+          length: 5,
+          fill: { color: "transparent" }
+        }
+      },
+      number: {
+        density: { enable: true, width: 1920, height: 1080 },
+        value: 40
+      },
+      opacity: {
+        value: { min: 0.3, max: 1 },
+        animation: {
+          enable: true,
+          speed: 2,
+          minimumValue: 0.1,
+          sync: false
+        }
+      },
+      shape: { type: "circle" },
+      size: { value: { min: 2, max: 5 } },
+      shadow: {
+        blur: 15,
+        color: { value: isDark ? "#adff2f" : "#ffc107" },
+        enable: true,
+        offset: { x: 0, y: 0 }
+      }
+    }
+  })
+};
+
+// src/themes/geometry.ts
+var geometryTheme = {
+  id: "geometry",
+  name: "Geometry",
+  icon: "\u{1F537}",
+  description: "Floating abstract geometric shapes",
+  backgroundGradient: "linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%)",
+  options: (isDark) => ({
+    ...baseConfig,
+    interactivity: {
+      detectsOn: "window",
+      events: {
+        onClick: { enable: true, mode: "push" },
+        onHover: { enable: true, mode: "repulse" },
+        resize: { enable: true }
+      },
+      modes: {
+        push: { quantity: 2 },
+        repulse: { distance: 150, duration: 0.4 }
+      }
+    },
+    particles: {
+      color: {
+        value: ["#ffb3d9", "#ff91c7", "#ffc0e5", "#ffd6e8"]
+      },
+      move: {
+        direction: "none",
+        enable: true,
+        outModes: { default: "bounce" },
+        random: false,
+        speed: 1.5,
+        straight: false
+      },
+      number: {
+        density: { enable: true, width: 1920, height: 1080 },
+        value: 30
+      },
+      opacity: {
+        value: { min: 0.3, max: 0.7 }
+      },
+      rotate: {
+        value: { min: 0, max: 360 },
+        direction: "random",
+        animation: { enable: true, speed: 5 }
+      },
+      shape: {
+        type: ["triangle", "square", "polygon"],
+        options: {
+          polygon: { sides: 6 }
+        }
+      },
+      size: { value: { min: 10, max: 25 } },
+      stroke: {
+        width: 1,
+        color: { value: isDark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.2)" }
+      },
+      shadow: {
+        blur: 10,
+        color: { value: isDark ? "#ffb3d9" : "#ff91c7" },
+        enable: true,
+        offset: { x: 2, y: 2 }
+      }
+    }
+  })
+};
+
+// src/themes/wave.ts
+var waveTheme = {
+  id: "wave",
+  name: "Particle Ocean",
+  icon: "\u{1F30A}",
+  description: "3D particle wave effect (requires three.js)",
+  isThreeJS: true,
+  backgroundGradient: "linear-gradient(180deg, #000000 0%, #0a1628 50%, #0d1f3c 100%)",
+  options: () => ({
+    ...baseConfig,
+    particles: {
+      number: { value: 0 }
+    }
+  })
+};
+
+// src/themes/index.ts
+var particleThemes = [
+  starlineTheme,
+  snowTheme,
+  bubbleTheme,
+  starsTheme,
+  fireflyTheme,
+  geometryTheme,
+  waveTheme
+];
+var getThemeById = (id) => {
+  return particleThemes.find((theme) => theme.id === id) || starlineTheme;
+};
+var DEFAULT_THEME_ID = "starline";
+var ParticleContext = createContext(null);
+var STORAGE_KEY = "rpb-theme-id";
+var ParticleProvider = ({
+  defaultTheme = DEFAULT_THEME_ID,
+  isDark: isDarkProp = true,
+  persist = true,
+  children
+}) => {
+  const [themeId, setThemeId] = useState(() => {
+    if (persist && typeof window !== "undefined") {
+      return localStorage.getItem(STORAGE_KEY) || defaultTheme;
+    }
+    return defaultTheme;
+  });
+  const [isDark, setDark] = useState(isDarkProp);
+  useEffect(() => {
+    setDark(isDarkProp);
+  }, [isDarkProp]);
+  const setTheme = useCallback((id) => {
+    setThemeId(id);
+    if (persist && typeof window !== "undefined") {
+      localStorage.setItem(STORAGE_KEY, id);
+    }
+  }, [persist]);
+  return /* @__PURE__ */ jsx(ParticleContext.Provider, { value: { themeId, isDark, setTheme, setDark }, children });
+};
+var useParticleTheme = () => {
+  const ctx = useContext(ParticleContext);
+  if (!ctx) {
+    throw new Error("useParticleTheme must be used within a <ParticleProvider>");
+  }
+  return ctx;
+};
+var useParticleThemeOptional = () => {
+  return useContext(ParticleContext);
+};
+var ParticleWave = ({
+  background = "linear-gradient(180deg, #000000 0%, #0a1628 50%, #0d1f3c 100%)",
+  className,
+  style
+}) => {
+  const containerRef = useRef(null);
+  const animationRef = useRef();
+  const hasThree = useRef(true);
+  useEffect(() => {
+    let THREE;
+    try {
+      THREE = globalThis.require ? globalThis.require("three") : (() => {
+        throw new Error("no require");
+      })();
+    } catch (e) {
+      hasThree.current = false;
+      console.warn('[react-particle-backgrounds] "three" is not installed. The wave theme requires it as a peer dependency.');
+      return;
+    }
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+    const scene = new THREE.Scene();
+    scene.background = null;
+    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1e3);
+    camera.position.set(0, 50, 100);
+    camera.lookAt(0, 0, 0);
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setSize(width, height);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    container.appendChild(renderer.domElement);
+    const particleCount = 15e3;
+    const waveWidth = 200;
+    const waveDepth = 100;
+    const geometry = new THREE.BufferGeometry();
+    const positions = new Float32Array(particleCount * 3);
+    const colors = new Float32Array(particleCount * 3);
+    const sizes = new Float32Array(particleCount);
+    for (let i = 0; i < particleCount; i++) {
+      const i3 = i * 3;
+      positions[i3] = (Math.random() - 0.5) * waveWidth;
+      positions[i3 + 1] = 0;
+      positions[i3 + 2] = (Math.random() - 0.5) * waveDepth;
+      const colorChoice = Math.random();
+      if (colorChoice < 0.5) {
+        colors[i3] = 0;
+        colors[i3 + 1] = 0.8 + Math.random() * 0.2;
+        colors[i3 + 2] = 1;
+      } else if (colorChoice < 0.8) {
+        colors[i3] = 0.1;
+        colors[i3 + 1] = 0.3 + Math.random() * 0.3;
+        colors[i3 + 2] = 0.9 + Math.random() * 0.1;
+      } else {
+        colors[i3] = 0.8 + Math.random() * 0.2;
+        colors[i3 + 1] = 0.9 + Math.random() * 0.1;
+        colors[i3 + 2] = 1;
+      }
+      sizes[i] = Math.random() * 2 + 0.5;
+    }
+    geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+    geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+    geometry.setAttribute("size", new THREE.BufferAttribute(sizes, 1));
+    const vertexShader = `
+      attribute float size;
+      varying vec3 vColor;
+      void main() {
+        vColor = color;
+        vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+        gl_PointSize = size * (300.0 / -mvPosition.z);
+        gl_Position = projectionMatrix * mvPosition;
+      }
+    `;
+    const fragmentShader = `
+      varying vec3 vColor;
+      void main() {
+        float dist = length(gl_PointCoord - vec2(0.5));
+        if (dist > 0.5) discard;
+        float alpha = 1.0 - smoothstep(0.0, 0.5, dist);
+        float glow = exp(-dist * 3.0);
+        vec3 finalColor = vColor + glow * 0.5;
+        gl_FragColor = vec4(finalColor, alpha * 0.8);
+      }
+    `;
+    const material = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      transparent: true,
+      vertexColors: true,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false
+    });
+    const particles = new THREE.Points(geometry, material);
+    scene.add(particles);
+    const bokehCount = 100;
+    const bokehGeometry = new THREE.BufferGeometry();
+    const bokehPositions = new Float32Array(bokehCount * 3);
+    const bokehColors = new Float32Array(bokehCount * 3);
+    const bokehSizes = new Float32Array(bokehCount);
+    for (let i = 0; i < bokehCount; i++) {
+      const i3 = i * 3;
+      bokehPositions[i3] = (Math.random() - 0.5) * waveWidth * 1.5;
+      bokehPositions[i3 + 1] = Math.random() * -30 - 10;
+      bokehPositions[i3 + 2] = (Math.random() - 0.5) * waveDepth * 2;
+      bokehColors[i3] = 0.2;
+      bokehColors[i3 + 1] = 0.5 + Math.random() * 0.3;
+      bokehColors[i3 + 2] = 1;
+      bokehSizes[i] = Math.random() * 15 + 8;
+    }
+    bokehGeometry.setAttribute("position", new THREE.BufferAttribute(bokehPositions, 3));
+    bokehGeometry.setAttribute("color", new THREE.BufferAttribute(bokehColors, 3));
+    bokehGeometry.setAttribute("size", new THREE.BufferAttribute(bokehSizes, 1));
+    const bokehMaterial = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader: `
+        varying vec3 vColor;
+        void main() {
+          float dist = length(gl_PointCoord - vec2(0.5));
+          if (dist > 0.5) discard;
+          float alpha = 1.0 - smoothstep(0.2, 0.5, dist);
+          gl_FragColor = vec4(vColor, alpha * 0.3);
+        }
+      `,
+      transparent: true,
+      vertexColors: true,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false
+    });
+    const bokehParticles = new THREE.Points(bokehGeometry, bokehMaterial);
+    scene.add(bokehParticles);
+    const dropCount = 150;
+    const trailLength = 12;
+    const rainDrops = [];
+    for (let i = 0; i < dropCount; i++) {
+      const shouldActivate = Math.random() < 0.1;
+      const x = (Math.random() - 0.5) * waveWidth * 0.9;
+      const z = (Math.random() - 0.5) * waveDepth * 0.7;
+      const waveHeight = Math.sin(x * 0.05) * 8 + Math.sin(z * 0.08) * 5;
+      const startHeight = shouldActivate ? waveHeight + Math.random() * 40 : -200;
+      rainDrops.push({
+        x,
+        z,
+        y: startHeight,
+        velocity: shouldActivate ? 0.5 + Math.random() * 0.7 : 0,
+        active: shouldActivate,
+        maxHeight: waveHeight + 80 + Math.random() * 120,
+        trail: new Array(trailLength).fill(startHeight),
+        opacity: shouldActivate ? 1 : 0
+      });
+    }
+    const trailPointCount = dropCount * trailLength;
+    const dropTrailGeometry = new THREE.BufferGeometry();
+    const dropTrailPositions = new Float32Array(trailPointCount * 3);
+    const dropTrailColors = new Float32Array(trailPointCount * 3);
+    const dropTrailSizes = new Float32Array(trailPointCount);
+    for (let i = 0; i < dropCount; i++) {
+      for (let j = 0; j < trailLength; j++) {
+        dropTrailSizes[i * trailLength + j] = 4 * (1 - j / trailLength) * 0.5;
+      }
+    }
+    dropTrailGeometry.setAttribute("position", new THREE.BufferAttribute(dropTrailPositions, 3));
+    dropTrailGeometry.setAttribute("color", new THREE.BufferAttribute(dropTrailColors, 3));
+    dropTrailGeometry.setAttribute("size", new THREE.BufferAttribute(dropTrailSizes, 1));
+    const dropTrailMaterial = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader: `
+        varying vec3 vColor;
+        void main() {
+          float dist = length(gl_PointCoord - vec2(0.5));
+          if (dist > 0.5) discard;
+          float alpha = 1.0 - smoothstep(0.0, 0.5, dist);
+          gl_FragColor = vec4(vColor, alpha * 0.8);
+        }
+      `,
+      transparent: true,
+      vertexColors: true,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false
+    });
+    const dropTrailParticles = new THREE.Points(dropTrailGeometry, dropTrailMaterial);
+    scene.add(dropTrailParticles);
+    const dropHeadGeometry = new THREE.BufferGeometry();
+    const dropHeadPositions = new Float32Array(dropCount * 3);
+    const dropHeadColors = new Float32Array(dropCount * 3);
+    const dropHeadSizes = new Float32Array(dropCount);
+    for (let i = 0; i < dropCount; i++) {
+      dropHeadSizes[i] = (6 + Math.random() * 4) * 0.5;
+    }
+    dropHeadGeometry.setAttribute("position", new THREE.BufferAttribute(dropHeadPositions, 3));
+    dropHeadGeometry.setAttribute("color", new THREE.BufferAttribute(dropHeadColors, 3));
+    dropHeadGeometry.setAttribute("size", new THREE.BufferAttribute(dropHeadSizes, 1));
+    const dropHeadMaterial = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader: `
+        varying vec3 vColor;
+        void main() {
+          float dist = length(gl_PointCoord - vec2(0.5));
+          if (dist > 0.5) discard;
+          float alpha = 1.0 - smoothstep(0.0, 0.5, dist);
+          float glow = exp(-dist * 2.0);
+          vec3 finalColor = vColor + glow * 0.8;
+          gl_FragColor = vec4(finalColor, alpha);
+        }
+      `,
+      transparent: true,
+      vertexColors: true,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false
+    });
+    const dropHeadParticles = new THREE.Points(dropHeadGeometry, dropHeadMaterial);
+    scene.add(dropHeadParticles);
+    let time = 0;
+    let lastSpawnTime = 0;
+    const getWaveHeight = (x, z, t) => Math.sin(x * 0.05 + t) * 8 + Math.sin(z * 0.08 + t * 0.8) * 5 + Math.sin((x + z) * 0.03 + t * 1.2) * 3;
+    const activateDrop = (drop) => {
+      drop.x = (Math.random() - 0.5) * waveWidth * 0.9;
+      drop.z = (Math.random() - 0.5) * waveDepth * 0.7;
+      const wh = getWaveHeight(drop.x, drop.z, time);
+      drop.y = wh;
+      drop.velocity = 0.5 + Math.random() * 0.7;
+      drop.maxHeight = wh + 80 + Math.random() * 120;
+      drop.active = true;
+      drop.opacity = 0.5;
+      drop.trail.fill(wh);
+    };
+    const animate = () => {
+      time += 0.02;
+      const wavePos = particles.geometry.attributes.position.array;
+      for (let i = 0; i < particleCount; i++) {
+        const i3 = i * 3;
+        wavePos[i3 + 1] = getWaveHeight(wavePos[i3], wavePos[i3 + 2], time);
+      }
+      particles.geometry.attributes.position.needsUpdate = true;
+      const tPos = dropTrailParticles.geometry.attributes.position.array;
+      const tCol = dropTrailParticles.geometry.attributes.color.array;
+      const hPos = dropHeadParticles.geometry.attributes.position.array;
+      const hCol = dropHeadParticles.geometry.attributes.color.array;
+      let activeCount = 0;
+      const inactiveIndices = [];
+      for (let i = 0; i < dropCount; i++) {
+        const drop = rainDrops[i];
+        if (drop.active) {
+          activeCount++;
+          for (let j = trailLength - 1; j > 0; j--) drop.trail[j] = drop.trail[j - 1];
+          drop.trail[0] = drop.y;
+          drop.velocity = Math.max(drop.velocity * 0.995, 0.3);
+          drop.y += drop.velocity;
+          if (drop.opacity < 1) drop.opacity = Math.min(drop.opacity + 0.05, 1);
+          if (drop.y > drop.maxHeight) {
+            drop.opacity -= 0.03;
+            if (drop.opacity <= 0) {
+              drop.active = false;
+              drop.y = -200;
+              drop.trail.fill(-200);
+              inactiveIndices.push(i);
+            }
+          }
+        } else {
+          inactiveIndices.push(i);
+        }
+      }
+      if (time - lastSpawnTime >= 0.1 && inactiveIndices.length > 0) {
+        const spawnCount = Math.min(2 + Math.floor(Math.random() * 2), inactiveIndices.length);
+        const shuffled = [...inactiveIndices].sort(() => Math.random() - 0.5);
+        for (let n = 0; n < spawnCount; n++) activateDrop(rainDrops[shuffled[n]]);
+        lastSpawnTime = time;
+      }
+      const targetActive = 20;
+      const needActivate = Math.max(3, targetActive - activeCount);
+      const remaining = inactiveIndices.filter((i) => !rainDrops[i].active);
+      if (remaining.length > 0) {
+        const shuffled = [...remaining].sort(() => Math.random() - 0.5);
+        for (let n = 0; n < Math.min(needActivate, shuffled.length); n++) activateDrop(rainDrops[shuffled[n]]);
+      }
+      for (let i = 0; i < dropCount; i++) {
+        if (!rainDrops[i].active && Math.random() < 0.25) activateDrop(rainDrops[i]);
+      }
+      for (let i = 0; i < dropCount; i++) {
+        const drop = rainDrops[i];
+        const hi3 = i * 3;
+        hPos[hi3] = drop.x;
+        hPos[hi3 + 1] = drop.y;
+        hPos[hi3 + 2] = drop.z;
+        const brightness = drop.active ? 0.8 + Math.sin(time * 5 + i) * 0.2 : 0;
+        hCol[hi3] = 0.5 * brightness * drop.opacity;
+        hCol[hi3 + 1] = 1 * brightness * drop.opacity;
+        hCol[hi3 + 2] = 1 * brightness * drop.opacity;
+        for (let j = 0; j < trailLength; j++) {
+          const pi = (i * trailLength + j) * 3;
+          tPos[pi] = drop.x;
+          tPos[pi + 1] = drop.trail[j];
+          tPos[pi + 2] = drop.z;
+          const fade = 1 - j / trailLength;
+          tCol[pi] = 0.6 * fade * drop.opacity;
+          tCol[pi + 1] = 1 * fade * drop.opacity;
+          tCol[pi + 2] = 1 * fade * drop.opacity;
+        }
+      }
+      dropTrailParticles.geometry.attributes.position.needsUpdate = true;
+      dropTrailParticles.geometry.attributes.color.needsUpdate = true;
+      dropHeadParticles.geometry.attributes.position.needsUpdate = true;
+      dropHeadParticles.geometry.attributes.color.needsUpdate = true;
+      camera.position.x = Math.sin(time * 0.3) * 5;
+      camera.lookAt(0, 0, 0);
+      renderer.render(scene, camera);
+      animationRef.current = requestAnimationFrame(animate);
+    };
+    animate();
+    const handleResize = () => {
+      const w = container.clientWidth;
+      const h = container.clientHeight;
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+      renderer.setSize(w, h);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      if (animationRef.current) cancelAnimationFrame(animationRef.current);
+      container.removeChild(renderer.domElement);
+      geometry.dispose();
+      material.dispose();
+      bokehGeometry.dispose();
+      bokehMaterial.dispose();
+      dropTrailGeometry.dispose();
+      dropTrailMaterial.dispose();
+      dropHeadGeometry.dispose();
+      dropHeadMaterial.dispose();
+      renderer.dispose();
+    };
+  }, [background]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        zIndex: 1,
+        pointerEvents: "none",
+        background,
+        ...style
+      }
+    }
+  );
+};
+var ParticleWave_default = ParticleWave;
+var ParticlesBackground = ({
+  theme: themeProp,
+  isDark: isDarkProp,
+  onLoaded,
+  className,
+  style
+}) => {
+  var _a, _b;
+  const [init, setInit] = useState(false);
+  const ctx = useParticleThemeOptional();
+  const themeId = (_a = themeProp != null ? themeProp : ctx == null ? void 0 : ctx.themeId) != null ? _a : DEFAULT_THEME_ID;
+  const isDark = (_b = isDarkProp != null ? isDarkProp : ctx == null ? void 0 : ctx.isDark) != null ? _b : true;
+  const theme = getThemeById(themeId);
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    }).then(() => {
+      setInit(true);
+    }).catch(() => {
+      setInit(true);
+    });
+  }, []);
+  const options = useMemo(() => theme.options(isDark), [theme, isDark]);
+  if (themeId === "none") return null;
+  if (theme.isThreeJS) {
+    return /* @__PURE__ */ jsx(
+      ParticleWave_default,
+      {
+        background: theme.backgroundGradient || theme.backgroundColor,
+        className,
+        style
+      }
+    );
+  }
+  if (!init) return null;
+  return /* @__PURE__ */ jsx(
+    Particles,
+    {
+      id: "rpb-tsparticles",
+      className,
+      style,
+      particlesLoaded: async (container) => onLoaded == null ? void 0 : onLoaded(container),
+      options
+    },
+    themeId
+  );
+};
+var ParticlesBackground_default = ParticlesBackground;
+var ThemeSelector = ({
+  position = "bottom-right",
+  accentColor = "#3b82f6"
+}) => {
+  const [open, setOpen] = useState(false);
+  const { themeId, setTheme } = useParticleTheme();
+  const currentTheme = getThemeById(themeId);
+  const positionStyles = {
+    "bottom-right": { bottom: 80, right: 16 },
+    "bottom-left": { bottom: 80, left: 16 },
+    "top-right": { top: 80, right: 16 },
+    "top-left": { top: 80, left: 16 }
+  };
+  const drawerSide = position.includes("right") ? "right" : "left";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setOpen(true),
+        title: "Theme Settings",
+        style: {
+          position: "fixed",
+          ...positionStyles[position],
+          zIndex: 9999,
+          width: 44,
+          height: 44,
+          borderRadius: 12,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "rgba(255, 255, 255, 0.7)",
+          backdropFilter: "blur(12px)",
+          WebkitBackdropFilter: "blur(12px)",
+          border: "1px solid rgba(255, 255, 255, 0.5)",
+          boxShadow: "0 4px 20px rgba(0, 0, 0, 0.08)",
+          cursor: "pointer",
+          fontSize: 20,
+          transition: "transform 0.3s, box-shadow 0.3s"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.transform = "scale(1.05) translateY(-2px)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.transform = "";
+        },
+        children: currentTheme.icon
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: () => setOpen(false),
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 1e4,
+          background: "rgba(0, 0, 0, 0.3)",
+          transition: "opacity 0.3s"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          [drawerSide]: 0,
+          width: 320,
+          maxWidth: "85vw",
+          height: "100vh",
+          zIndex: 10001,
+          background: "#fff",
+          boxShadow: "-4px 0 24px rgba(0, 0, 0, 0.12)",
+          transform: open ? "translateX(0)" : `translateX(${drawerSide === "right" ? "100%" : "-100%"})`,
+          transition: "transform 0.3s ease",
+          overflowY: "auto",
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "16px 20px",
+                borderBottom: "1px solid #f0f0f0"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 16 }, children: "Particle Theme" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setOpen(false),
+                    style: {
+                      background: "none",
+                      border: "none",
+                      fontSize: 20,
+                      cursor: "pointer",
+                      color: "#999",
+                      padding: 4
+                    },
+                    children: "\xD7"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { padding: 16, display: "flex", flexDirection: "column", gap: 12 }, children: [...particleThemes, {
+            id: "none",
+            name: "None",
+            icon: "\u{1F6AB}",
+            description: "Disable particle effects"
+          }].map((theme) => {
+            const isActive = theme.id === themeId;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onClick: () => setTheme(theme.id),
+                style: {
+                  padding: 16,
+                  borderRadius: 12,
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  transition: "all 0.2s",
+                  border: `2px solid ${isActive ? accentColor : "transparent"}`,
+                  background: isActive ? `${accentColor}10` : "#f5f5f5"
+                },
+                onMouseEnter: (e) => {
+                  if (!isActive) e.currentTarget.style.borderColor = "#e0e0e0";
+                },
+                onMouseLeave: (e) => {
+                  if (!isActive) e.currentTarget.style.borderColor = "transparent";
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: 48,
+                        height: 48,
+                        borderRadius: 12,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: 24,
+                        background: isActive ? accentColor : "#e5e5e5",
+                        flexShrink: 0
+                      },
+                      children: theme.icon
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontWeight: 600,
+                          fontSize: 14,
+                          color: isActive ? accentColor : "#1f2937"
+                        },
+                        children: theme.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#9ca3af", marginTop: 2 }, children: theme.description })
+                  ] }),
+                  isActive && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: 24,
+                        height: 24,
+                        borderRadius: "50%",
+                        background: accentColor,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0
+                      },
+                      children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" }) })
+                    }
+                  )
+                ]
+              },
+              theme.id
+            );
+          }) }),
+          /* @__PURE__ */ jsx("div", { style: { padding: "0 16px 16px", marginTop: "auto" }, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                padding: 16,
+                background: "#f9fafb",
+                borderRadius: 12,
+                fontSize: 13,
+                color: "#6b7280",
+                lineHeight: 1.6
+              },
+              children: "Your theme selection is automatically saved and will be remembered on your next visit."
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+};
+var ThemeSelector_default = ThemeSelector;
+
+export { DEFAULT_COLORS, DEFAULT_THEME_ID, ParticleProvider, ParticleWave_default as ParticleWave, ParticlesBackground_default as ParticlesBackground, ThemeSelector_default as ThemeSelector, baseConfig, bubbleTheme, fireflyTheme, geometryTheme, getThemeById, particleThemes, snowTheme, starlineTheme, starsTheme, useParticleTheme, waveTheme };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map