button-particles.js

// Particle burst effect on button hover
(function() {
  'use strict';

  const button = document.getElementById('openFlipbook');
  const canvas = document.getElementById('buttonParticles');
  
  if (!button || !canvas) return;

  // Check for reduced motion preference
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (prefersReducedMotion) return;

  const ctx = canvas.getContext('2d');
  let particles = [];
  let animationId = null;
  let isHovering = false;

  // Particle configuration
  const config = {
    colors: [
      'rgba(139, 92, 246, 0.8)',   // Violet
      'rgba(196, 181, 253, 0.7)',  // Light violet
      'rgba(124, 58, 237, 0.75)',  // Darker violet
      'rgba(221, 214, 254, 0.6)'   // Very light violet
    ],
    minSize: 2,
    maxSize: 5,
    speed: 2,
    spawnRate: 3
  };

  // Position canvas over button (relative to .button-container parent)
  function positionCanvas() {
    const rect = button.getBoundingClientRect();

    // Canvas is inside .button-container, so position relative to it
    canvas.style.left = '0';
    canvas.style.top = '0';
    canvas.width = rect.width;
    canvas.height = rect.height;
  }

  // Create a particle
  function createParticle() {
    const angle = Math.random() * Math.PI * 2;
    const speed = Math.random() * config.speed + 1;
    
    return {
      x: canvas.width / 2,
      y: canvas.height / 2,
      vx: Math.cos(angle) * speed,
      vy: Math.sin(angle) * speed,
      size: Math.random() * (config.maxSize - config.minSize) + config.minSize,
      color: config.colors[Math.floor(Math.random() * config.colors.length)],
      life: 1,
      decay: Math.random() * 0.015 + 0.01
    };
  }

  // Update particle
  function updateParticle(p) {
    p.x += p.vx;
    p.y += p.vy;
    p.life -= p.decay;
    
    // Add slight gravity
    p.vy += 0.05;
  }

  // Draw particle
  function drawParticle(p) {
    ctx.save();
    ctx.globalAlpha = p.life;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
    ctx.fillStyle = p.color;
    ctx.fill();
    ctx.restore();
  }

  // Animation loop
  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Spawn new particles while hovering
    if (isHovering) {
      for (let i = 0; i < config.spawnRate; i++) {
        particles.push(createParticle());
      }
    }

    // Update and draw particles
    particles = particles.filter(p => {
      updateParticle(p);
      drawParticle(p);
      return p.life > 0 && 
             p.x > -10 && p.x < canvas.width + 10 && 
             p.y > -10 && p.y < canvas.height + 10;
    });

    // Continue animation if particles exist or hovering
    if (particles.length > 0 || isHovering) {
      animationId = requestAnimationFrame(animate);
    } else {
      animationId = null;
    }
  }

  // Start animation
  function startAnimation() {
    isHovering = true;
    if (!animationId) {
      animate();
    }
  }

  // Stop spawning new particles
  function stopAnimation() {
    isHovering = false;
  }

  // Event listeners
  button.addEventListener('mouseenter', () => {
    positionCanvas();
    startAnimation();
  });

  button.addEventListener('mouseleave', stopAnimation);

  // Reposition on resize
  window.addEventListener('resize', () => {
    if (isHovering) {
      positionCanvas();
    }
  });

  // Initial position
  positionCanvas();
})();