Bounce

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

// 0 glides in, 0.2 to 0.3 adds a lively settle, 0.6 and up feels cartoonish.
const BOUNCE = 0.35;
// When it appears to arrive; the wobble plays out after this.
const VISUAL_DURATION = 0.4;

export function AddToCartButton() {
  const [count, setCount] = useState(0);
  const reduceMotion = useReducedMotion();

  return (
    <div className='flex items-center gap-3'>
      <button
        type='button'
        onClick={() => setCount(count + 1)}
        className='rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground'
      >
        Add to cart
      </button>
      <span role='status'>
        {count > 0 && (
          <motion.span
            // A new key replays the pop on every add.
            key={count}
            initial={{ opacity: 0, scale: reduceMotion ? 1 : 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={
              reduceMotion
                ? { duration: 0.15 }
                : {
                    type: 'spring',
                    visualDuration: VISUAL_DURATION,
                    bounce: BOUNCE
                  }
            }
            className='inline-block rounded-full bg-emerald-500/15 px-2.5 py-1 text-xs font-medium text-emerald-600'
          >
            Added · {count} in cart
          </motion.span>
        )}
      </span>
    </div>
  );
}