Initial open-source self-hosted Songs2YT edition

components/SectionScrollTitle.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useState, type RefObject } from "react";
+
+type Props = {
+  sectionRef: RefObject<HTMLElement | null>;
+  title: string;
+  offset?: number;
+};
+
+export function SectionScrollTitle({ sectionRef, title, offset = 350 }: Props) {
+  const [offsetX, setOffsetX] = useState(0);
+
+  useEffect(() => {
+    const section = sectionRef.current;
+    if (!section) return;
+
+    const update = () => {
+      const rect = section.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const progress = Math.min(
+        1,
+        Math.max(0, (viewportHeight - rect.top) / (viewportHeight + rect.height * 0.5)),
+      );
+      setOffsetX(progress * offset);
+    };
+
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [sectionRef, offset]);
+
+  return (
+    <span
+      className="pointer-events-none absolute bottom-0 left-1/2 z-0 select-none whitespace-nowrap text-7xl font-bold leading-none text-white/[0.04] sm:text-8xl lg:text-9xl"
+      style={{ transform: `translateX(calc(-50% + ${offsetX}px))` }}
+      aria-hidden="true"
+    >
+      {title}
+    </span>
+  );
+}