Scrollytelling

import { useState } from 'react';
import { motion } from 'motion/react';

const releases = { 2021: 40, 2022: 65, 2023: 90, 2024: 140 };
const MAX = 140;
const steps = [
  'In 2021 the team shipped 40 releases, about one every nine days.',
  'Automated tests in 2022 pushed that to 65.',
  'Preview deploys made every pull request testable: 90 releases in 2023.',
  'By 2024 the team shipped 140 times, nearly every other day.'
];

export function ReleaseStory() {
  const [active, setActive] = useState(0);

  return (
    <section className='grid gap-8 md:grid-cols-2'>
      {/* Pinned to the top half on phones, beside the text from md up. */}
      <div className='sticky top-0 z-10 flex h-[50vh] gap-4 bg-background p-6 md:top-[15vh] md:order-last md:h-[70vh]'>
        {Object.entries(releases).map(([year, count], index) => (
          <div
            key={year}
            className='flex flex-1 flex-col gap-2 text-center text-sm'
          >
            <div className='flex flex-1 items-end'>
              <div
                className={`w-full origin-bottom rounded-t-lg transition-[scale,background-color] duration-400 ease-out motion-reduce:transition-none ${index === active ? 'bg-blue-600' : 'bg-muted'}`}
                style={{
                  height: `${(count / MAX) * 100}%`,
                  scale: index <= active ? '1 1' : '1 0'
                }}
              />
            </div>
            {year}
          </div>
        ))}
      </div>
      <div>
        {steps.map((text, index) => (
          <motion.p
            key={text}
            // A thin band across the middle of the viewport picks the active step.
            viewport={{ margin: '-45% 0px -45% 0px' }}
            onViewportEnter={() => setActive(index)}
            className='flex min-h-[70vh] items-center text-lg'
          >
            {text}
          </motion.p>
        ))}
      </div>
    </section>
  );
}