Anticipation

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

// The wind-up: a small step back before the real move.
const WIND_UP = { x: -6, duration: 0.15 };
const FLIGHT = { x: 28, y: -28, duration: 0.35 };

export function SendButton({ onSend }: { onSend: () => void }) {
  const [scope, animate] = useAnimate<HTMLSpanElement>();
  const reduceMotion = useReducedMotion();

  async function send() {
    onSend();
    const plane = scope.current;
    if (reduceMotion) {
      await animate(plane, { opacity: [1, 0.4, 1] }, { duration: 0.3 });
      return;
    }
    await animate(
      plane,
      { x: WIND_UP.x },
      { duration: WIND_UP.duration, ease: 'easeOut' }
    );
    await animate(
      plane,
      { x: FLIGHT.x, y: FLIGHT.y, opacity: 0 },
      { duration: FLIGHT.duration, ease: 'easeIn' }
    );
    // Reset out of sight, then fade back in at the start.
    await animate(plane, { x: 0, y: 0 }, { duration: 0 });
    await animate(plane, { opacity: 1 }, { duration: 0.2 });
  }

  return (
    <button
      type='button'
      onClick={send}
      className='flex items-center gap-2 overflow-hidden rounded-full bg-blue-600 px-5 py-2.5 text-sm font-medium text-white'
    >
      Send
      <span ref={scope} aria-hidden className='inline-block'>
        <svg
          viewBox='0 0 24 24'
          className='size-4 fill-none stroke-current stroke-2'
        >
          <path
            d='M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z'
            strokeLinejoin='round'
          />
        </svg>
      </span>
    </button>
  );
}