Horizontal scroll section

import { useRef } from 'react';
import { motion, useScroll, useTransform } from 'motion/react';

const caseStudies = [
  { name: 'Northwind', result: 'Cut checkout time by 38%' },
  { name: 'Fieldnote', result: 'Shipped a mobile app in two weeks' },
  { name: 'Harbor', result: 'Moved 12 internal tools online' },
  { name: 'Parcel', result: 'Doubled weekly signups' },
  { name: 'Lumen', result: 'Replaced six spreadsheets with one app' }
];

export function CaseStudyScroller() {
  const track = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: track,
    offset: ['start start', 'end end']
  });
  // Slide the row left by its overflow: its own width (100%) minus the viewport's.
  const x = useTransform(
    scrollYProgress,
    (p) => `calc(${-p} * (100% - 100vw))`
  );

  // Tabbing to an off-screen card scrolls the page to the point where it's in view.
  function reveal(index: number) {
    const { top, height } = track.current!.getBoundingClientRect();
    const progress = index / (caseStudies.length - 1);
    window.scrollTo({ top: scrollY + top + progress * (height - innerHeight) });
  }

  return (
    // About as tall as the row is wide, so the row moves at a natural scrolling speed.
    <div ref={track} className='relative h-[300vh]'>
      <div className='sticky top-0 flex h-screen flex-col justify-center gap-8 overflow-clip'>
        <motion.ul style={{ x }} className='flex w-max gap-6 px-6'>
          {caseStudies.map((study, index) => (
            <li key={study.name}>
              <a
                href={`/customers/${study.name.toLowerCase()}`}
                onFocus={(event) =>
                  event.currentTarget.matches(':focus-visible') && reveal(index)
                }
                className='flex h-80 w-90 flex-col justify-end gap-1 rounded-3xl bg-muted p-6'
              >
                <span className='text-muted-foreground'>{study.name}</span>
                <span className='text-xl font-semibold'>{study.result}</span>
              </a>
            </li>
          ))}
        </motion.ul>
        <motion.div
          aria-hidden='true'
          style={{ scaleX: scrollYProgress }}
          className='mx-6 h-1 origin-left rounded-full bg-foreground'
        />
      </div>
    </div>
  );
}