Text morph

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

const SPRING = { type: 'spring', duration: 0.4, bounce: 0 } as const;

// Key each letter by the letter plus how many times it has appeared,
// so the shared letters in "Deploy" and "Deployed" keep their identity.
function toLetters(label: string) {
  const seen: Record<string, number> = {};
  return [...label].map((char) => {
    seen[char] = (seen[char] ?? 0) + 1;
    return { char, key: `${char}-${seen[char]}` };
  });
}

export function DeployButton({ deploy }: { deploy: () => Promise<void> }) {
  const [label, setLabel] = useState('Deploy');
  const reduceMotion = useReducedMotion();
  const transition = reduceMotion ? { duration: 0 } : SPRING;

  async function onClick() {
    setLabel('Deploying');
    await deploy();
    setLabel('Deployed');
  }

  return (
    <button
      type='button'
      onClick={onClick}
      disabled={label === 'Deploying'}
      className='w-36 rounded-full bg-primary py-2.5 text-sm font-medium text-primary-foreground'
    >
      <span className='sr-only'>{label}</span>
      <span aria-hidden className='relative inline-flex'>
        <AnimatePresence mode='popLayout' initial={false}>
          {toLetters(label).map(({ char, key }) => (
            <motion.span
              key={key}
              layout='position'
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={transition}
            >
              {char}
            </motion.span>
          ))}
        </AnimatePresence>
      </span>
    </button>
  );
}