Scroll Arcs

"use client";
import { useEffect, useRef, useState } from "react";

export default function ScrollArcs() {
  const ref = useRef<HTMLDivElement>(null);
  const [rotation, setRotation] = useState(0);

  useEffect(() => {
    let raf: number;
    const loop = () => {
      const el = ref.current;
      if (el) {
        const rect = el.getBoundingClientRect();
        const progress = Math.max(0, Math.min(1,
          (window.innerHeight - rect.top) / (window.innerHeight + rect.height)
        ));
        setRotation(progress * 360);
      }
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  // Chaque arc SVG avec son propre speed multiplier
  return (
    <svg viewBox="0 0 300 300">
      {arcs.map((arc, i) => (
        <path key={i}
          d={describeArc(150, 150, arc.radius, arc.startAngle + rotation * arc.speed, arc.startAngle + rotation * arc.speed + arc.arcLength)}
          stroke={arc.color} strokeWidth={arc.strokeWidth}
          fill="none" strokeLinecap="round" />
      ))}
    </svg>
  );
}