Tweening

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

const IMAGE = '/products/stoneware-mug.jpg';
type Flight = Record<'id' | 'left' | 'top' | 'width' | 'dx' | 'dy', number>;

export function ProductCard() {
  const imageRef = useRef<HTMLImageElement>(null);
  const cartRef = useRef<HTMLSpanElement>(null);
  const [count, setCount] = useState(0);
  const [flight, setFlight] = useState<Flight | null>(null);
  const reduceMotion = useReducedMotion();

  function addToCart() {
    setCount((n) => n + 1);
    const from = imageRef.current?.getBoundingClientRect();
    const to = cartRef.current?.getBoundingClientRect();
    if (reduceMotion || !from || !to) return;
    const { left, top, width } = from;
    // Fly from the image's center to the cart's center.
    const dx = to.x + to.width / 2 - (left + width / 2);
    const dy = to.y + to.height / 2 - (top + from.height / 2);
    setFlight({ id: Date.now(), left, top, width, dx, dy });
  }

  return (
    <div className='flex w-72 flex-col gap-4'>
      <span ref={cartRef} className='self-end text-sm font-medium'>
        Cart ({count})
      </span>
      <img
        ref={imageRef}
        src={IMAGE}
        alt='Stoneware mug'
        className='aspect-square rounded-xl object-cover'
      />
      <button
        type='button'
        onClick={addToCart}
        className='rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground'
      >
        Add to cart
      </button>
      {flight && (
        <motion.img
          key={flight.id}
          src={IMAGE}
          alt=''
          // A tween: start, end, a fixed 500ms, and one easing curve.
          initial={{ x: 0, y: 0, scale: 1 }}
          animate={{ x: flight.dx, y: flight.dy, scale: 0.3 }}
          transition={{ type: 'tween', duration: 0.5, ease: 'easeInOut' }}
          onAnimationComplete={() => setFlight(null)}
          style={{ left: flight.left, top: flight.top, width: flight.width }}
          className='pointer-events-none fixed aspect-square rounded-xl object-cover'
        />
      )}
    </div>
  );
}