The WOW Effect in 5 Minutes: Particles, Neon & a Magnetic Cursor — No Plugins Needed

<style>
  .particles-here {
    position: relative !important;
    overflow: hidden !important;
  }

  .particles-here .ep-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  .particles-here > *:not(.ep-canvas),
  .particles-here > .e-con-inner > * {
    position: relative;
    z-index: 1;
  }
</style>

<script>
(function() {
  const containers = document.querySelectorAll('.particles-here');
  if (!containers.length) return;

  containers.forEach(container => {
    const target = container.querySelector('.e-con-inner') || container;
    const canvas = document.createElement('canvas');
    canvas.className = 'ep-canvas';
    target.insertBefore(canvas, target.firstChild);

    const ctx = canvas.getContext('2d');
    let W = 0, H = 0, points = [], waves = [];
    let lastWaveTime = 0;

    const CFG = {
      spacing: 40,           // шаг сетки
      waveAmp: 12,           // амплитуда волны
      waveDecay: 0.014,      // затухание волны во времени
      waveFreq: 0.22,        // частота колец
      waveSpeed: 0.14,       // скорость распространения фазы
      pointEase: 0.10,       // плавность точек (меньше = вязче)
      maxWaves: 12           // лимит одновременных волн
    };

    function resize() {
      const rect = target.getBoundingClientRect();
      W = rect.width;
      H = rect.height;
      const dpr = window.devicePixelRatio || 1;
      canvas.width = W * dpr;
      canvas.height = H * dpr;
      canvas.style.width = W + 'px';
      canvas.style.height = H + 'px';
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      return W > 0 && H > 0;
    }

    function initGrid() {
      points = [];
      const cols = Math.ceil(W / CFG.spacing) + 1;
      const rows = Math.ceil(H / CFG.spacing) + 1;
      const offX = (W - (cols - 1) * CFG.spacing) / 2;
      const offY = (H - (rows - 1) * CFG.spacing) / 2;

      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          points.push({
            bx: offX + c * CFG.spacing,
            by: offY + r * CFG.spacing,
            x: 0, y: 0,
            brightness: 0
          });
        }
      }
      points.rows = rows;
      points.cols = cols;
    }

    function spawnWave(x, y) {
      const now = performance.now();
      if (now - lastWaveTime < 50) return;
      lastWaveTime = now;

      waves.push({
        x, y,
        age: 0,
        amp: CFG.waveAmp * (0.9 + Math.random() * 0.3)
      });
      if (waves.length > CFG.maxWaves) waves.shift();
    }

    function update() {
      // Удаляем старые волны
      for (let i = waves.length - 1; i >= 0; i--) {
        waves[i].age++;
        if (waves[i].age > 280) waves.splice(i, 1);
      }

      const rows = points.rows;
      const cols = points.cols;

      // Обновляем каждую точку
      for (let i = 0; i < points.length; i++) {
        const p = points[i];
        let targetX = p.bx;
        let targetY = p.by;
        let maxB = 0;

        for (const w of waves) {
          const dist = Math.hypot(p.bx - w.x, p.by - w.y);
          const phase = dist * CFG.waveFreq - w.age * CFG.waveSpeed;
          const envelope = Math.exp(-w.age * CFG.waveDecay) * Math.exp(-dist * 0.005);

          if (envelope > 0.001) {
            const displacement = Math.sin(phase) * w.amp * envelope;
            targetY += displacement;

            // Лёгкое радиальное смещение для объёма
            const angle = Math.atan2(p.by - w.y, p.bx - w.x);
            targetX += Math.cos(angle) * displacement * 0.25;

            maxB = Math.max(maxB, Math.abs(displacement));
          }
        }

        // Плавное следование цели
        p.x += (targetX - p.x) * CFG.pointEase;
        p.y += (targetY - p.y) * CFG.pointEase;
        p.brightness = maxB;
      }
    }

    function draw() {
      ctx.clearRect(0, 0, W, H);
      const rows = points.rows;
      const cols = points.cols;

      // Сетка (нити)
      ctx.lineCap = 'round';
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          const i = r * cols + c;
          const p = points[i];
          if (!p) continue;

          // Вправо
          if (c < cols - 1) {
            const n = points[i + 1];
            const dist = Math.hypot(p.x - n.x, p.y - n.y);
            const stretch = Math.abs(dist - CFG.spacing);
            const alpha = 0.035 + Math.min(1, stretch / 8) * 0.11;

            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(n.x, n.y);
            ctx.strokeStyle = `rgba(95, 130, 170, ${alpha})`;
            ctx.lineWidth = 0.6;
            ctx.stroke();
          }

          // Вниз
          if (r < rows - 1) {
            const n = points[i + cols];
            const dist = Math.hypot(p.x - n.x, p.y - n.y);
            const stretch = Math.abs(dist - CFG.spacing);
            const alpha = 0.035 + Math.min(1, stretch / 8) * 0.11;

            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(n.x, n.y);
            ctx.strokeStyle = `rgba(95, 130, 170, ${alpha})`;
            ctx.lineWidth = 0.6;
            ctx.stroke();
          }
        }
      }

      // Буйки (точки)
      for (const p of points) {
        const b = Math.min(1, p.brightness * 0.12);
        const size = 1.0 + b * 1.8;

        ctx.beginPath();
        ctx.arc(p.x, p.y, size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(130, 170, 210, ${0.22 + b * 0.55})`;
        ctx.fill();
      }
    }

    function animate() {
      if (!W || !H) { requestAnimationFrame(animate); return; }
      update();
      draw();
      requestAnimationFrame(animate);
    }

    target.addEventListener('mousemove', e => {
      const r = target.getBoundingClientRect();
      const mx = e.clientX - r.left;
      const my = e.clientY - r.top;
      spawnWave(mx, my);
    });

    target.addEventListener('mouseleave', () => {});

    window.addEventListener('resize', () => {
      resize();
      initGrid();
    });

    if (document.readyState === 'complete') {
      resize();
      initGrid();
      requestAnimationFrame(animate);
    } else {
      window.addEventListener('load', () => {
        resize();
        initGrid();
        requestAnimationFrame(animate);
      });
    }
  });
})();
</script>