ITStudioMainSite/assets/js/hero-waves.js

(() => {
  const main = document.querySelector('.site-main');
  const heroSection = document.querySelector('.hero-section');
  const servicesSection = document.querySelector('.services-section');
  const canvas = document.querySelector('.hero-waves');
  if (!main || !canvas) return;

  const ctx = canvas.getContext('2d');
  if (!ctx) return;

  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
  let width = 0;
  let height = 0;
  let dpr = 1;
  let rafId = null;

  const waveDefs = [
    { yRatio: 0.3, amplitude: 22, wavelength: 940, speed: 0.5, alpha: 0.98 },
    { yRatio: 0.45, amplitude: 16, wavelength: 1020, speed: 0.58, alpha: 0.92 },
    { yRatio: 0.65, amplitude: 14, wavelength: 1160, speed: 0.6, alpha: 0.9 },
  ];

  const palettes = {
    light: {
      gradient: ['#e8f3ff', '#cfe6fb', '#558ec1', '#2476af', '#2b6fb3'],
      waves: ['rgba(170, 215, 245, 0.91)', 'rgba(120, 185, 230, 0.93)', 'rgba(80, 155, 210, 0.95)'],
    },
    dark: {
      gradient: ['#0d1117', '#111d2b', '#14334d', '#17507a', '#1b6aa6'],
      waves: ['rgba(90, 165, 225, 0.9)', 'rgba(65, 140, 210, 0.88)', 'rgba(50, 120, 190, 0.86)'],
    },
  };

  const getTheme = () => (document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light');

  const getCoverageHeight = () => {
    if (servicesSection) {
      const coverage = servicesSection.offsetTop + servicesSection.offsetHeight * 0.5;
      return Math.min(coverage, main.scrollHeight);
    }
    if (heroSection) {
      return heroSection.offsetHeight;
    }
    return main.scrollHeight;
  };

  const resize = () => {
    dpr = window.devicePixelRatio || 1;
    width = main.clientWidth;
    height = Math.max(1, Math.round(getCoverageHeight()));
    canvas.width = Math.floor(width * dpr);
    canvas.height = Math.floor(height * dpr);
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  };

  const drawBackground = (palette) => {
    const gradient = ctx.createLinearGradient(0, 0, 0, height);
    gradient.addColorStop(0, palette.gradient[0]);
    gradient.addColorStop(0.35, palette.gradient[1]);
    gradient.addColorStop(0.55, palette.gradient[2]);
    gradient.addColorStop(0.75, palette.gradient[3]);
    gradient.addColorStop(1, palette.gradient[4]);
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);
  };

  const drawWave = (palette, wave, time, index) => {
    const yBase = height * wave.yRatio;
    const phase = time * wave.speed;
    const prevAlpha = ctx.globalAlpha;
    ctx.globalAlpha = wave.alpha ?? 1;
    ctx.beginPath();
    ctx.moveTo(0, height);
    for (let x = 0; x <= width; x += 18) {
      const theta = (x / wave.wavelength) * Math.PI * 2 + phase;
      const y = yBase + Math.sin(theta) * wave.amplitude;
      ctx.lineTo(x, y);
    }
    ctx.lineTo(width, height);
    ctx.closePath();
    ctx.fillStyle = palette.waves[index % palette.waves.length];
    ctx.fill();
    ctx.globalAlpha = prevAlpha;
  };

  const render = (timestamp) => {
    const palette = palettes[getTheme()];
    const time = timestamp * 0.001;
    ctx.clearRect(0, 0, width, height);
    drawBackground(palette);
    waveDefs.forEach((wave, index) => drawWave(palette, wave, time, index));
    rafId = requestAnimationFrame(render);
  };

  const stop = () => {
    if (rafId) {
      cancelAnimationFrame(rafId);
      rafId = null;
    }
  };

  const drawStatic = () => {
    const palette = palettes[getTheme()];
    ctx.clearRect(0, 0, width, height);
    drawBackground(palette);
    waveDefs.forEach((wave, index) => drawWave(palette, wave, 0, index));
  };

  const start = () => {
    stop();
    resize();
    if (prefersReduced.matches) {
      drawStatic();
      return;
    }
    rafId = requestAnimationFrame(render);
  };

  const onResize = () => {
    resize();
    if (prefersReduced.matches) {
      drawStatic();
    }
  };

  const themeObserver = new MutationObserver(() => {
    if (prefersReduced.matches) {
      drawStatic();
    }
  });

  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
  prefersReduced.addEventListener('change', start);
  window.addEventListener('resize', onResize);
  window.addEventListener('load', onResize);

  start();
})();