Momentum

import { animate, motion, useMotionValue } from 'motion/react';

const SLIDE_WIDTH = 320;
const SNAP = { type: 'spring', stiffness: 300, damping: 35 } as const;
const photos = [
  { src: '/photos/lisbon.jpg', alt: 'A yellow tram on a hill in Lisbon' },
  { src: '/photos/kyoto.jpg', alt: 'A temple path in Kyoto' },
  { src: '/photos/oaxaca.jpg', alt: 'A colorful street in Oaxaca' }
];

export function PhotoCarousel() {
  const x = useMotionValue(0);

  function step(direction: 1 | -1) {
    const index = Math.round(-x.get() / SLIDE_WIDTH) + direction;
    const clamped = Math.min(Math.max(index, 0), photos.length - 1);
    animate(x, -clamped * SLIDE_WIDTH, SNAP);
  }

  return (
    <div
      tabIndex={0}
      role='region'
      aria-roledescription='carousel'
      aria-label='Trip photos'
      onKeyDown={(event) => {
        if (event.key === 'ArrowRight') step(1);
        if (event.key === 'ArrowLeft') step(-1);
      }}
      className='w-80 overflow-hidden rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ring'
    >
      <motion.div
        drag='x'
        style={{ x }}
        dragConstraints={{ left: -(photos.length - 1) * SLIDE_WIDTH, right: 0 }}
        dragElastic={0.2}
        dragTransition={{
          power: 0.3, // how far a flick carries
          timeConstant: 300, // how long the glide lasts, in ms
          // Glide toward the nearest slide instead of stopping between two.
          modifyTarget: (target) =>
            Math.round(target / SLIDE_WIDTH) * SLIDE_WIDTH
        }}
        className='flex cursor-grab touch-pan-y active:cursor-grabbing'
      >
        {photos.map((photo) => (
          <img
            key={photo.src}
            src={photo.src}
            alt={photo.alt}
            draggable={false}
            className='h-56 w-80 shrink-0 object-cover'
          />
        ))}
      </motion.div>
    </div>
  );
}