cursor-fx 1.0.0

package/dist/react/index.js

@@ -0,0 +1,804 @@
+'use strict';
+
+var react = require('react');
+
+// src/react/index.tsx
+
+// src/core/utils.ts
+function randomColor(colors) {
+  return colors[Math.floor(Math.random() * colors.length)];
+}
+function createCanvas(container) {
+  const canvas = document.createElement("canvas");
+  canvas.style.position = "fixed";
+  canvas.style.top = "0";
+  canvas.style.left = "0";
+  canvas.style.pointerEvents = "none";
+  canvas.style.zIndex = "9999";
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  container.appendChild(canvas);
+  return canvas;
+}
+function resizeCanvas(canvas) {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+}
+function drawStar(ctx, x, y, size, spikes = 5) {
+  const outerRadius = size;
+  const innerRadius = size * 0.4;
+  ctx.beginPath();
+  for (let i = 0; i < spikes * 2; i++) {
+    const angle = i * Math.PI / spikes;
+    const radius = i % 2 === 0 ? outerRadius : innerRadius;
+    const dx = Math.cos(angle) * radius;
+    const dy = Math.sin(angle) * radius;
+    if (i === 0) {
+      ctx.moveTo(x + dx, y + dy);
+    } else {
+      ctx.lineTo(x + dx, y + dy);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+}
+function drawRectangle(ctx, x, y, width, height) {
+  ctx.fillRect(x - width / 2, y - height / 2, width, height);
+}
+function drawSnowflake(ctx, x, y, size, rotation = 0) {
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(rotation);
+  ctx.shadowBlur = 4;
+  ctx.shadowColor = "#FFFFFF";
+  ctx.lineWidth = 1.8;
+  ctx.beginPath();
+  for (let i = 0; i < 6; i++) {
+    const angle = i * Math.PI / 3;
+    ctx.moveTo(0, 0);
+    ctx.lineTo(Math.cos(angle) * size, Math.sin(angle) * size);
+  }
+  ctx.stroke();
+  ctx.restore();
+}
+function drawBubble(ctx, x, y, size) {
+  const baseColor = ctx.fillStyle;
+  const mainGradient = ctx.createRadialGradient(x - size * 0.25, y - size * 0.25, 0, x, y, size);
+  mainGradient.addColorStop(0, "rgba(255, 255, 255, 0.3)");
+  mainGradient.addColorStop(0.3, baseColor);
+  mainGradient.addColorStop(0.7, baseColor);
+  mainGradient.addColorStop(1, "rgba(255, 255, 255, 0.1)");
+  ctx.beginPath();
+  ctx.arc(x, y, size, 0, Math.PI * 2);
+  ctx.fillStyle = mainGradient;
+  ctx.fill();
+  ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
+  ctx.lineWidth = 1;
+  ctx.stroke();
+  ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
+  ctx.beginPath();
+  ctx.arc(x - size * 0.3, y - size * 0.3, size * 0.35, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
+  ctx.beginPath();
+  ctx.arc(x - size * 0.4, y - size * 0.4, size * 0.15, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
+  ctx.beginPath();
+  ctx.arc(x + size * 0.4, y + size * 0.4, size * 0.2, 0, Math.PI * 2);
+  ctx.fill();
+}
+function drawCross(ctx, x, y, size) {
+  const halfSize = size / 2;
+  const thickness = size * 0.3;
+  ctx.fillRect(x - thickness / 2, y - halfSize, thickness, size);
+  ctx.fillRect(x - halfSize, y - thickness / 2, size, thickness);
+}
+function drawOval(ctx, x, y, width, height) {
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.scale(width / height, 1);
+  ctx.beginPath();
+  ctx.arc(0, 0, height, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.restore();
+}
+
+// src/core/engine.ts
+var CursorFXEngine = class {
+  // Create particles on every valid move
+  constructor(options = {}) {
+    this.particles = [];
+    this.animationId = null;
+    this.effect = null;
+    this.maxParticles = 500;
+    // Cap to prevent performance issues
+    this.lastParticleTime = 0;
+    this.particleThrottle = 16;
+    // Create particles every 16ms (~60fps)
+    this.lastMouseX = 0;
+    this.lastMouseY = 0;
+    this.minMoveDistance = 0;
+    if (options.canvas) {
+      this.canvas = options.canvas;
+    } else {
+      const container = options.container || document.body;
+      this.canvas = createCanvas(container);
+    }
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to get 2D context");
+    }
+    this.ctx = ctx;
+    this.handleResize = this.handleResize.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleTouchMove = this.handleTouchMove.bind(this);
+    this.animate = this.animate.bind(this);
+    window.addEventListener("resize", this.handleResize);
+  }
+  handleResize() {
+    resizeCanvas(this.canvas);
+  }
+  handleMouseMove(e) {
+    if (!this.effect) return;
+    const now = Date.now();
+    const dx = e.clientX - this.lastMouseX;
+    const dy = e.clientY - this.lastMouseY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    const throttle = this.effect.throttle ?? this.particleThrottle;
+    const minDist = this.effect.minMoveDistance ?? this.minMoveDistance;
+    if (now - this.lastParticleTime >= throttle && distance >= minDist) {
+      this.lastParticleTime = now;
+      this.lastMouseX = e.clientX;
+      this.lastMouseY = e.clientY;
+      const particles = this.effect.onMouseMove(e.clientX, e.clientY);
+      this.addParticles(particles);
+    }
+  }
+  handleTouchMove(e) {
+    if (!this.effect || e.touches.length === 0) return;
+    const now = Date.now();
+    const touch = e.touches[0];
+    const dx = touch.clientX - this.lastMouseX;
+    const dy = touch.clientY - this.lastMouseY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    const throttle = this.effect.throttle ?? this.particleThrottle;
+    const minDist = this.effect.minMoveDistance ?? this.minMoveDistance;
+    if (now - this.lastParticleTime >= throttle && distance >= minDist) {
+      this.lastParticleTime = now;
+      this.lastMouseX = touch.clientX;
+      this.lastMouseY = touch.clientY;
+      const particles = this.effect.onMouseMove(touch.clientX, touch.clientY);
+      this.addParticles(particles);
+    }
+  }
+  addParticle(particle) {
+    if (this.particles.length < this.maxParticles) {
+      this.particles.push(particle);
+    }
+  }
+  addParticles(particles) {
+    const availableSlots = this.maxParticles - this.particles.length;
+    if (availableSlots > 0) {
+      this.particles.push(...particles.slice(0, availableSlots));
+    }
+  }
+  update() {
+    this.particles.forEach((particle) => particle.update());
+    this.particles = this.particles.filter((particle) => !particle.isDead());
+  }
+  draw() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.particles.forEach((particle) => particle.draw(this.ctx));
+  }
+  animate() {
+    this.update();
+    this.draw();
+    this.animationId = requestAnimationFrame(this.animate);
+  }
+  start(effect) {
+    if (this.animationId === null) {
+      this.effect = effect;
+      this.animationId = requestAnimationFrame(this.animate);
+      document.addEventListener("mousemove", this.handleMouseMove);
+      document.addEventListener("touchmove", this.handleTouchMove, { passive: true });
+    }
+  }
+  stop() {
+    if (this.animationId !== null) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = null;
+      document.removeEventListener("mousemove", this.handleMouseMove);
+      document.removeEventListener("touchmove", this.handleTouchMove);
+    }
+  }
+  clear() {
+    this.particles = [];
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+  destroy() {
+    this.stop();
+    this.clear();
+    window.removeEventListener("resize", this.handleResize);
+    if (this.canvas.parentElement) {
+      this.canvas.parentElement.removeChild(this.canvas);
+    }
+  }
+};
+
+// src/core/particle.ts
+var Particle = class {
+  constructor(config) {
+    this.x = config.x;
+    this.y = config.y;
+    this.vx = config.vx ?? (Math.random() - 0.5) * 4;
+    this.vy = config.vy ?? (Math.random() - 0.5) * 4;
+    this.size = config.size ?? 3;
+    this.color = config.color ?? "#ffffff";
+    this.maxLife = config.maxLife ?? 40;
+    this.life = 0;
+    this.gravity = config.gravity ?? 0.1;
+    this.opacity = 1;
+    this.rotation = config.rotation ?? 0;
+    this.rotationSpeed = config.rotationSpeed ?? 0;
+    this.shape = config.shape ?? "star";
+    this.wobbleAmplitude = config.wobbleAmplitude ?? 0;
+    this.wobbleSpeed = config.wobbleSpeed ?? 0;
+    this.wobblePhase = Math.random() * Math.PI * 2;
+    this.windDrift = config.windDrift ?? 0;
+    this.image = config.image;
+    this.initialScale = config.initialScale ?? 1;
+    this.scaleUpDuration = config.scaleUpDuration ?? 0;
+    this.scale = this.initialScale;
+  }
+  update() {
+    this.life++;
+    this.vy += this.gravity;
+    if (this.scaleUpDuration > 0 && this.life < this.scaleUpDuration) {
+      const progress = this.life / this.scaleUpDuration;
+      const easedProgress = 1 - Math.pow(1 - progress, 3);
+      this.scale = this.initialScale + (1 - this.initialScale) * easedProgress;
+    } else {
+      this.scale = 1;
+    }
+    if (this.wobbleAmplitude > 0) {
+      this.wobblePhase += this.wobbleSpeed;
+      this.x += this.vx + Math.sin(this.wobblePhase) * this.wobbleAmplitude;
+    } else {
+      this.x += this.vx;
+    }
+    if (this.windDrift > 0) {
+      const drift = Math.sin(this.life * 0.05) * this.windDrift * 0.3 + Math.sin(this.life * 0.02) * this.windDrift * 0.7;
+      this.x += drift;
+    }
+    this.y += this.vy;
+    this.rotation += this.rotationSpeed;
+    this.opacity = 1 - this.life / this.maxLife;
+  }
+  isDead() {
+    return this.life >= this.maxLife;
+  }
+  draw(ctx) {
+    ctx.save();
+    ctx.globalAlpha = this.opacity;
+    ctx.translate(this.x, this.y);
+    ctx.scale(this.scale, this.scale);
+    ctx.translate(-this.x, -this.y);
+    if (this.image && this.image.complete) {
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = "high";
+      const imgSize = this.size * 2.5;
+      ctx.translate(this.x, this.y);
+      if (this.rotation !== 0) {
+        ctx.rotate(this.rotation);
+      }
+      ctx.drawImage(
+        this.image,
+        -imgSize / 2,
+        -imgSize / 2,
+        imgSize,
+        imgSize
+      );
+      ctx.restore();
+      return;
+    }
+    ctx.fillStyle = this.color;
+    switch (this.shape) {
+      case "rectangle":
+        if (this.rotation !== 0) {
+          ctx.translate(this.x, this.y);
+          ctx.rotate(this.rotation);
+          ctx.translate(-this.x, -this.y);
+        }
+        drawRectangle(ctx, this.x, this.y, this.size, this.size * 1.5);
+        break;
+      case "circle":
+        ctx.shadowBlur = 15;
+        ctx.shadowColor = this.color;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        ctx.fill();
+        break;
+      case "snowflake":
+        ctx.strokeStyle = this.color;
+        ctx.lineWidth = 1.5;
+        drawSnowflake(ctx, this.x, this.y, this.size, this.rotation);
+        break;
+      case "bubble":
+        drawBubble(ctx, this.x, this.y, this.size);
+        break;
+      case "cross":
+        ctx.shadowBlur = 18;
+        ctx.shadowColor = this.color;
+        drawCross(ctx, this.x, this.y, this.size);
+        break;
+      case "oval":
+        ctx.shadowBlur = 12;
+        ctx.shadowColor = this.color;
+        drawOval(ctx, this.x, this.y, this.size * 2, this.size);
+        break;
+      default:
+        drawStar(ctx, this.x, this.y, this.size, 5);
+        break;
+    }
+    ctx.restore();
+  }
+};
+
+// src/core/imageLoader.ts
+var ImageLoader = class {
+  static async loadImage(src) {
+    if (this.images.has(src)) {
+      return this.images.get(src);
+    }
+    if (this.loading.has(src)) {
+      return this.loading.get(src);
+    }
+    const loadPromise = new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        this.images.set(src, img);
+        this.loading.delete(src);
+        resolve(img);
+      };
+      img.onerror = () => {
+        this.loading.delete(src);
+        reject(new Error(`Failed to load image: ${src}`));
+      };
+      img.src = src;
+    });
+    this.loading.set(src, loadPromise);
+    return loadPromise;
+  }
+  static async loadBubbles(basePath = "/bubbles") {
+    const bubblePaths = [
+      `${basePath}/soap_bubbles_1.png`,
+      `${basePath}/soap_bubble_2.png`,
+      `${basePath}/soap_bubble_3.png`
+    ];
+    try {
+      return await Promise.all(bubblePaths.map((path) => this.loadImage(path)));
+    } catch (error) {
+      console.warn("Failed to load some bubble images, falling back to canvas rendering", error);
+      return [];
+    }
+  }
+  static async loadSnowflakes(basePath = "/snowflakes") {
+    const snowflakePaths = [
+      // `${basePath}/snowflake.png`,
+      `${basePath}/snow_flake_1.png`,
+      `${basePath}/snow_flake_2.png`
+    ];
+    try {
+      return await Promise.all(snowflakePaths.map((path) => this.loadImage(path)));
+    } catch (error) {
+      console.warn("Failed to load some snowflake images, falling back to canvas rendering", error);
+      return [];
+    }
+  }
+  static getRandomBubble() {
+    const bubbleImages = Array.from(this.images.entries()).filter(([key]) => key.includes("bubble")).map(([, img]) => img);
+    if (bubbleImages.length === 0) return null;
+    return bubbleImages[Math.floor(Math.random() * bubbleImages.length)];
+  }
+  static getRandomSnowflake() {
+    const snowflakeImages = Array.from(this.images.entries()).filter(([key]) => key.includes("snow")).map(([, img]) => img);
+    if (snowflakeImages.length === 0) return null;
+    return snowflakeImages[Math.floor(Math.random() * snowflakeImages.length)];
+  }
+  static isLoaded() {
+    return this.images.size > 0;
+  }
+  static clear() {
+    this.images.clear();
+    this.loading.clear();
+  }
+};
+ImageLoader.images = /* @__PURE__ */ new Map();
+ImageLoader.loading = /* @__PURE__ */ new Map();
+
+// src/core/effects/fairyDust.ts
+var DEFAULT_COLORS = [
+  "#FFD700",
+  // Gold
+  "#FFC700",
+  // Golden Yellow
+  "#FFB700",
+  // Amber
+  "#FFED4E",
+  // Light Gold
+  "#F4E04D"
+  // Pale Gold
+];
+function createFairyDustEffect(options = {}) {
+  const {
+    colors = DEFAULT_COLORS,
+    particleCount = 2,
+    particleSize = 6,
+    // Increased from 4 for better visibility
+    gravity = -0.05,
+    // Slight upward float for magical feel
+    maxLife = 40,
+    velocity = 3
+  } = options;
+  return {
+    onMouseMove(x, y) {
+      const particles = [];
+      for (let i = 0; i < particleCount; i++) {
+        particles.push(
+          new Particle({
+            x: x + (Math.random() - 0.5) * 15,
+            y: y + (Math.random() - 0.5) * 15,
+            vx: (Math.random() - 0.5) * velocity,
+            vy: (Math.random() - 0.5) * velocity - 1,
+            // Slight upward bias
+            size: Math.random() * particleSize + 3,
+            // Increased from 2 (now 3-9px)
+            color: randomColor(colors),
+            maxLife: maxLife + Math.random() * 20,
+            gravity,
+            shape: "cross"
+          })
+        );
+      }
+      return particles;
+    }
+  };
+}
+
+// src/core/effects/sparkle.ts
+var DEFAULT_COLORS2 = [
+  "#FFD700",
+  // Gold
+  "#FF69B4",
+  // Hot Pink
+  "#00CED1",
+  // Dark Turquoise
+  "#9370DB"
+  // Medium Purple
+];
+function createSparkleEffect(options = {}) {
+  const {
+    colors = DEFAULT_COLORS2,
+    particleCount = 1,
+    // Reduced for better performance
+    particleSize = 6,
+    // Increased from 3 for better visibility
+    gravity = 0.1,
+    maxLife = 20,
+    // Further reduced for faster cleanup
+    velocity = 4
+  } = options;
+  return {
+    onMouseMove(x, y) {
+      const particles = [];
+      for (let i = 0; i < particleCount; i++) {
+        particles.push(
+          new Particle({
+            x: x + (Math.random() - 0.5) * 10,
+            y: y + (Math.random() - 0.5) * 10,
+            vx: (Math.random() - 0.5) * velocity,
+            vy: (Math.random() - 0.5) * velocity,
+            size: Math.random() * particleSize + 3,
+            // Increased from 2 (now 3-9px)
+            color: randomColor(colors),
+            maxLife: maxLife + Math.random() * 10,
+            // Reduced random variation
+            gravity
+          })
+        );
+      }
+      return particles;
+    }
+  };
+}
+
+// src/core/effects/confetti.ts
+var DEFAULT_COLORS3 = [
+  "#FF6B6B",
+  // Red
+  "#4ECDC4",
+  // Turquoise
+  "#FFE66D",
+  // Yellow
+  "#95E1D3",
+  // Mint
+  "#F38181",
+  // Pink
+  "#AA96DA",
+  // Purple
+  "#FCBAD3",
+  // Light Pink
+  "#A8D8EA"
+  // Sky Blue
+];
+function createConfettiEffect(options = {}) {
+  const {
+    colors = DEFAULT_COLORS3,
+    particleCount = 3,
+    particleSize = 4,
+    gravity = 0.3,
+    // Stronger gravity for falling effect
+    maxLife = 60,
+    // Longer lifetime for confetti
+    velocity = 6
+  } = options;
+  return {
+    onMouseMove(x, y) {
+      const particles = [];
+      for (let i = 0; i < particleCount; i++) {
+        particles.push(
+          new Particle({
+            x: x + (Math.random() - 0.5) * 20,
+            y: y + (Math.random() - 0.5) * 20,
+            vx: (Math.random() - 0.5) * velocity,
+            vy: (Math.random() - 1) * velocity * 0.5,
+            // Bias upward initially
+            size: Math.random() * particleSize + 3,
+            color: randomColor(colors),
+            maxLife: maxLife + Math.random() * 20,
+            gravity,
+            rotation: Math.random() * Math.PI * 2,
+            // Random initial rotation
+            rotationSpeed: (Math.random() - 0.5) * 0.2,
+            // Rotation speed
+            shape: "rectangle"
+          })
+        );
+      }
+      return particles;
+    }
+  };
+}
+
+// src/core/effects/retroCRT.ts
+var DEFAULT_COLORS4 = [
+  "#00FF00",
+  // Classic phosphor green
+  "#33FF33",
+  // Bright phosphor green
+  "#00CC00",
+  // Medium phosphor green
+  "#00DD00"
+  // Light phosphor green
+];
+function createRetroCRTEffect(options = {}) {
+  const {
+    colors = DEFAULT_COLORS4,
+    particleCount = 3,
+    particleSize = 4,
+    // Slightly larger for better visibility
+    gravity = 0,
+    // No gravity - phosphor glows in place
+    maxLife = 60,
+    // Longer persistence like real phosphor
+    velocity = 1
+    // Very slow movement for authentic glow
+  } = options;
+  return {
+    onMouseMove(x, y) {
+      const particles = [];
+      for (let i = 0; i < particleCount; i++) {
+        particles.push(
+          new Particle({
+            x: x + (Math.random() - 0.5) * 8,
+            y: y + (Math.random() - 0.5) * 8,
+            vx: (Math.random() - 0.5) * velocity,
+            vy: (Math.random() - 0.5) * velocity,
+            size: Math.random() * particleSize + 2,
+            color: randomColor(colors),
+            maxLife: maxLife + Math.random() * 15,
+            gravity,
+            shape: "circle"
+            // Back to circles with strong glow
+          })
+        );
+      }
+      return particles;
+    }
+  };
+}
+
+// src/core/effects/snow.ts
+var DEFAULT_COLORS5 = [
+  "#FFFFFF",
+  // Pure white
+  "#F0F8FF",
+  // Alice blue
+  "#E6F3FF",
+  // Light blue white
+  "#F5F5F5"
+  // White smoke
+];
+function createSnowEffect(options = {}) {
+  const {
+    colors = DEFAULT_COLORS5,
+    particleCount = 1,
+    // One snowflake at a time
+    particleSize = 7,
+    // Bigger for better visibility
+    gravity = 0.12,
+    // Faster falling
+    maxLife = 150,
+    // Shorter lifetime for faster fall
+    velocity = 0.4,
+    // Slightly more drift
+    throttle = 120,
+    // Spawn every 120ms - less frequent
+    minMoveDistance = 12
+    // Only spawn when cursor moves 12px
+  } = options;
+  return {
+    throttle,
+    minMoveDistance,
+    onMouseMove(x, y) {
+      const particles = [];
+      for (let i = 0; i < particleCount; i++) {
+        const snowflakeImage = ImageLoader.getRandomSnowflake() ;
+        particles.push(
+          new Particle({
+            x: x + (Math.random() - 0.5) * 30,
+            y: y + (Math.random() - 0.5) * 15,
+            vx: (Math.random() - 0.5) * velocity,
+            vy: Math.random() * 0.2 + 0.1,
+            // Slightly faster downward initial velocity
+            size: Math.random() * particleSize + 3,
+            // Variable sizes (3-10px for canvas, base for images)
+            color: randomColor(colors),
+            maxLife: maxLife + Math.random() * 60,
+            gravity,
+            rotation: Math.random() * Math.PI * 2,
+            // Random initial rotation
+            rotationSpeed: (Math.random() - 0.5) * 0.03,
+            // More visible rotation
+            shape: "snowflake",
+            windDrift: 0.8,
+            // Gentle wind drift/sway
+            image: snowflakeImage || void 0
+            // Use image if flag is true and images loaded
+          })
+        );
+      }
+      return particles;
+    }
+  };
+}
+
+// src/core/effects/bubble.ts
+var DEFAULT_COLORS6 = [
+  "rgba(173, 216, 230, 0.4)",
+  // Light blue - transparent
+  "rgba(135, 206, 235, 0.4)",
+  // Sky blue - transparent
+  "rgba(176, 224, 230, 0.4)",
+  // Powder blue - transparent
+  "rgba(175, 238, 238, 0.4)",
+  // Pale turquoise - transparent
+  "rgba(224, 255, 255, 0.4)"
+  // Light cyan - transparent
+];
+function createBubbleEffect(options = {}) {
+  const {
+    colors = DEFAULT_COLORS6,
+    particleCount = 1,
+    // Spawn one bubble at a time
+    gravity = -0.02,
+    // Gentle upward buoyancy
+    maxLife = 180,
+    // Longer lifetime for slow rise
+    velocity = 0.2,
+    // Minimal base horizontal drift
+    throttle = 150,
+    // Spawn every 150ms - much less frequent
+    minMoveDistance = 15
+    // Only spawn when cursor moves 15px
+  } = options;
+  return {
+    throttle,
+    minMoveDistance,
+    onMouseMove(x, y) {
+      const particles = [];
+      for (let i = 0; i < particleCount; i++) {
+        const bubbleImage = ImageLoader.getRandomBubble();
+        const baseSize = 15 + Math.random() * 30;
+        particles.push(
+          new Particle({
+            x: x + (Math.random() - 0.5) * 10,
+            // Spawn closer to pointer
+            y: y + (Math.random() - 0.5) * 10,
+            vx: (Math.random() - 0.5) * velocity,
+            vy: -Math.random() * 0.15 - 0.1,
+            // Very slow, consistent upward
+            size: baseSize,
+            // Wide size variation (15-45)
+            color: randomColor(colors),
+            maxLife: maxLife + Math.random() * 60,
+            gravity,
+            shape: "bubble",
+            wobbleAmplitude: 0.3,
+            // Gentle horizontal wobble
+            wobbleSpeed: 0.05,
+            // Slow wobble oscillation
+            image: bubbleImage || void 0,
+            // Use image if loaded, fallback to canvas
+            initialScale: 0.3,
+            // Start at 30% size for pop-up effect
+            scaleUpDuration: 15
+            // Grow to full size over 15 frames (~250ms)
+          })
+        );
+      }
+      return particles;
+    }
+  };
+}
+
+// src/react/index.tsx
+function useCursorFX(options = {}) {
+  const {
+    enabled = true,
+    effect = "fairyDust",
+    colors,
+    particleCount,
+    particleSize,
+    gravity,
+    maxLife,
+    velocity
+  } = options;
+  const engineRef = react.useRef(null);
+  const memoizedColors = react.useMemo(() => colors, [colors ? JSON.stringify(colors) : void 0]);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!enabled) return;
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion) return;
+    const engine = new CursorFXEngine();
+    const optimizedOptions = {
+      particleCount: 2,
+      // Reduced from default 3
+      ...memoizedColors && { colors: memoizedColors },
+      ...particleCount !== void 0 && { particleCount },
+      ...particleSize !== void 0 && { particleSize },
+      ...gravity !== void 0 && { gravity },
+      ...maxLife !== void 0 && { maxLife },
+      ...velocity !== void 0 && { velocity }
+    };
+    const selectedEffect = effect === "confetti" ? createConfettiEffect(optimizedOptions) : effect === "sparkle" ? createSparkleEffect(optimizedOptions) : effect === "retroCRT" ? createRetroCRTEffect(optimizedOptions) : effect === "snow" ? createSnowEffect(optimizedOptions) : effect === "bubble" ? createBubbleEffect(optimizedOptions) : createFairyDustEffect(optimizedOptions);
+    engine.start(selectedEffect);
+    engineRef.current = engine;
+    return () => {
+      engine.destroy();
+      engineRef.current = null;
+    };
+  }, [enabled, effect, memoizedColors, particleCount, particleSize, gravity, maxLife, velocity]);
+  return engineRef.current;
+}
+function CursorFX(props) {
+  useCursorFX(props);
+  return null;
+}
+
+exports.CursorFX = CursorFX;
+exports.useCursorFX = useCursorFX;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map