Snap Scroll Headlines

"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { motion, useMotionValue, useSpring } from "motion/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  SnapScrollHeadlines                                                     */
/* ------------------------------------------------------------------ */

interface SnapScrollHeadlinesProps {
  items: string[];
  /** Fixed word before the snapping list [Optional, default: "We Design"] */
  prefix?: string;
  /** Row height in px (auto-derived from font size at 80) [Optional] */
  itemHeight?: number;
  gap?: number;
  /** Keep faded neighbours visible above/below the active word [Optional] */
  showNeighbors?: boolean;
  stiffness?: number;
  damping?: number;
  className?: string;
}

/**
 * A fixed prefix followed by a scroll-snapped word carousel: an invisible
 * scroller drives a spring-tracked column so the active word snaps to center
 * while its neighbours fade by distance. Font size, row height, and gap all
 * scale from the container width so it reads from a hero down to a card.
 * @param {string[]} items - Words to cycle through [Required]
 * @param {string} prefix - Fixed leading word [Optional, default: "We Design"]
 */
export function SnapScrollHeadlines({
  items,
  prefix = "We Design",
  itemHeight = 80,
  gap = 32,
  showNeighbors = true,
  stiffness = 280,
  damping = 30,
  className,
}: SnapScrollHeadlinesProps) {
  const scrollerRef = useRef<HTMLDivElement>(null);
  const [active, setActive] = useState(0);
  const [progress, setProgress] = useState(0);
  const [height, setHeight] = useState(0);
  const [width, setWidth] = useState(0);

  const fontSize = width > 0 ? Math.min(Math.max(width * 0.075, 24), 96) : 48;
  const rowHeight = itemHeight === 80 ? Math.round(fontSize * 1.6) : itemHeight;
  const rowGap = Math.min(gap, width * 0.04);

  const y = useMotionValue(0);
  const springY = useSpring(y, { stiffness, damping, mass: 0.8 });

  useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    const measure = () => {
      setHeight(el.clientHeight);
      setWidth(el.clientWidth);
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  const onScroll = useCallback(() => {
    const el = scrollerRef.current;
    if (!el || el.clientHeight === 0) return;
    const raw = Math.min(Math.max(el.scrollTop / el.clientHeight, 0), items.length - 1);
    const rounded = Math.round(raw);
    setProgress(raw);
    setActive(rounded);
    y.set(-rounded * rowHeight);
  }, [items.length, rowHeight, y]);

  return (
    <div className={cn("relative h-full w-full", className)}>
      <div
        ref={scrollerRef}
        className="absolute inset-0 z-10 overflow-y-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
        style={{ scrollSnapType: "y mandatory" }}
        onScroll={onScroll}
      >
        {height > 0 &&
          items.map((_, i) => (
            <div key={i} style={{ height, scrollSnapAlign: "start" }} />
          ))}
      </div>

      <div className="pointer-events-none absolute inset-0 z-0 flex items-center justify-center overflow-hidden">
        <div className="flex items-center" style={{ gap: rowGap }}>
          <span
            className="select-none whitespace-nowrap font-semibold leading-none tracking-tight text-zinc-900 dark:text-zinc-100"
            style={{ fontSize }}
          >
            {prefix}
          </span>
          <div className={showNeighbors ? undefined : "overflow-hidden"} style={{ height: rowHeight }}>
            <motion.div style={{ y: springY }}>
              {items.map((item, i) => {
                const isActive = i === active;
                const opacity = Math.max(0.15, 1 - 0.82 * Math.abs(i - progress));
                return (
                  <div
                    key={i}
                    className="flex items-center whitespace-nowrap"
                    style={{ height: rowHeight, opacity }}
                  >
                    <span
                      className="select-none font-semibold leading-none tracking-tight"
                      style={{
                        fontSize,
                        color: isActive
                          ? "hsl(var(--foreground))"
                          : "hsl(var(--foreground) / 0.35)",
                        transition: "color 150ms ease",
                      }}
                    >
                      {item}
                    </span>
                  </div>
                );
              })}
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  );
}