Rubber-banding

import { motion } from 'motion/react';

const messages = [
  { from: 'Maya Chen', subject: 'Launch checklist' },
  { from: 'Leo Park', subject: 'Pricing page copy' },
  { from: 'Ava Ruiz', subject: 'Q3 roadmap review' }
];

export function MessageList() {
  return (
    // overscroll-none keeps the browser's own bounce from doubling up.
    <div className='h-72 w-80 overflow-hidden overscroll-none rounded-2xl border bg-muted'>
      <motion.ul
        drag='y'
        // The list fits, so any pull goes past an edge.
        dragConstraints={{ top: 0, bottom: 0 }}
        // Past the edge, the list moves a third of the drag distance.
        dragElastic={0.33}
        // On release, it springs back with this stiffness and damping.
        dragTransition={{ bounceStiffness: 400, bounceDamping: 30 }}
        className='cursor-grab touch-none bg-background active:cursor-grabbing'
      >
        {messages.map((message) => (
          <li key={message.subject} className='border-b px-4 py-3'>
            <p className='text-sm font-medium'>{message.from}</p>
            <p className='text-sm text-muted-foreground'>{message.subject}</p>
          </li>
        ))}
      </motion.ul>
    </div>
  );
}