AI Shape Morph

<div class="fx-0411-root">
  <div class="ai-shape-morph-container">
    <canvas class="ai-shape-canvas"></canvas>
  </div>
</div>

.fx-0411-root,
.fx-0411-root *,
.fx-0411-root *::before,
.fx-0411-root *::after {
  box-sizing: border-box
}

.fx-0411-root {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.ai-shape-morph-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-shape-morph-container .ai-shape-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

(function() {
  // ============================================
  // AI & Intelligence Effects
  // ============================================

  // 1. AI Shape Morph
  // One instance per .fx-0411-root block: several copies can live on one page
  document.querySelectorAll('.fx-0411-root').forEach(function(root) {
    const canvas = root.querySelector('.ai-shape-canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    // Reduced motion requested: a still star, no loop
    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    let W = 0,
      H = 0;

    // Internal size = displayed size × devicePixelRatio (sharp on Retina screens);
    // drawing stays in CSS pixels thanks to setTransform.
    function resize() {
      const dpr = window.devicePixelRatio || 1;
      W = canvas.clientWidth;
      H = canvas.clientHeight;
      canvas.width = Math.round(W * dpr);
      canvas.height = Math.round(H * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      if (reduceMotion) draw();
    }

    const shapes = [
      // Circle points
      Array.from({
        length: 12
      }, (_, i) => {
        const a = (i / 12) * Math.PI * 2;
        return {
          x: Math.cos(a) * 0.35,
          y: Math.sin(a) * 0.35
        };
      }),
      // Star points
      Array.from({
        length: 12
      }, (_, i) => {
        const a = (i / 12) * Math.PI * 2;
        const r = i % 2 === 0 ? 0.4 : 0.2;
        return {
          x: Math.cos(a) * r,
          y: Math.sin(a) * r
        };
      }),
      // Square points
      Array.from({
        length: 12
      }, (_, i) => {
        const t = i / 12;
        const side = Math.floor(t * 4);
        const p = (t * 4) % 1;
        const coords = [{
            x: -0.3 + p * 0.6,
            y: -0.3
          },
          {
            x: 0.3,
            y: -0.3 + p * 0.6
          },
          {
            x: 0.3 - p * 0.6,
            y: 0.3
          },
          {
            x: -0.3,
            y: 0.3 - p * 0.6
          }
        ];
        return coords[side];
      })
    ];

    let currentShape = reduceMotion ? 1 : 0;
    let progress = 0;
    let morphPoints = shapes[currentShape].map(p => ({
      ...p
    }));
    let raf = 0;
    let visible = true;

    function draw() {
      const nextShape = (currentShape + 1) % shapes.length;
      const eased = 0.5 - 0.5 * Math.cos(progress * Math.PI);

      for (let i = 0; i < morphPoints.length; i++) {
        morphPoints[i].x = shapes[currentShape][i].x + (shapes[nextShape][i].x - shapes[currentShape][i].x) * eased;
        morphPoints[i].y = shapes[currentShape][i].y + (shapes[nextShape][i].y - shapes[currentShape][i].y) * eased;
      }

      ctx.clearRect(0, 0, W, H);
      const cx = W / 2;
      const cy = H / 2;
      const scale = Math.min(W, H);

      // Gradient scaled to the shape: ±80 px for a 250 px tall frame
      const g = scale * 0.32;
      const gradient = ctx.createLinearGradient(cx - g, cy - g, cx + g, cy + g);
      gradient.addColorStop(0, '#6366f1');
      gradient.addColorStop(0.5, '#a855f7');
      gradient.addColorStop(1, '#ec4899');

      // Start halfway along the last side: all 12 points act as control points,
      // so the shape closes without a straight edge
      const n = morphPoints.length;
      ctx.beginPath();
      ctx.moveTo(cx + (morphPoints[n - 1].x + morphPoints[0].x) / 2 * scale, cy + (morphPoints[n - 1].y + morphPoints[0].y) / 2 * scale);
      for (let i = 0; i < n; i++) {
        const curr = morphPoints[i];
        const next = morphPoints[(i + 1) % n];
        const cpx = cx + (curr.x + next.x) / 2 * scale;
        const cpy = cy + (curr.y + next.y) / 2 * scale;
        ctx.quadraticCurveTo(cx + curr.x * scale, cy + curr.y * scale, cpx, cpy);
      }
      ctx.closePath();
      ctx.fillStyle = gradient;
      ctx.fill();
    }

    function animate() {
      progress += 0.008;
      if (progress >= 1) {
        progress = 0;
        currentShape = (currentShape + 1) % shapes.length;
      }
      draw();
      // Off screen, the loop stops; the IntersectionObserver restarts it on return
      raf = visible ? requestAnimationFrame(animate) : 0;
    }

    resize();
    if ('ResizeObserver' in window) new ResizeObserver(resize).observe(canvas);
    else window.addEventListener('resize', resize);

    if (!reduceMotion) {
      if ('IntersectionObserver' in window) {
        new IntersectionObserver(function(entries) {
          visible = entries[0].isIntersecting;
          if (visible && !raf) raf = requestAnimationFrame(animate);
        }).observe(canvas);
      }
      raf = requestAnimationFrame(animate);
    }
  });
})();