Icon Swap

/* Markup: <button class="icon-button" type="button" aria-label="Copy">
     <svg class="icon icon-a">…</svg>  <!-- copy, in flow -->
     <svg class="icon icon-b">…</svg>  <!-- check, layered over it -->
   </button>. On click, set data-on="true", announce Copied in a role="status"
   region and revert after 1.5s (a second click restarts the timer); the
   name stays Copy. Both icons stay mounted, so a click mid-swap turns back
   from where it is. */
.icon-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px; /* the hit area, whatever the icon size */
  height: 44px;
}
.icon-b {
  position: absolute;
  inset: 0;
  margin: auto;
}
.icon {
  width: 16px;
  height: 16px;
  transition-property: opacity, transform, filter;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0, 1); /* a firm ease-out, standing in for the spring */
}
/* The hidden icon. scale(0.3), not 0.8: a deep scale reads as a swap, a timid one as a glitch. */
.icon-b,
.icon-button[data-on="true"] .icon-a {
  opacity: 0;
  transform: scale(0.3);
  filter: blur(3px);
}
.icon-button[data-on="true"] .icon-b {
  opacity: 1;
  transform: none;
  filter: blur(0px);
}

/* Reduced motion: the fade stays, the scale and blur go. The state selectors
   are repeated so this outranks them. */
@media (prefers-reduced-motion: reduce) {
  .icon-b,
  .icon-button[data-on="true"] .icon-a {
    transform: none;
    filter: none;
  }
}

import { Copy, Check } from 'lucide-react'
import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
import { useEffect, useRef, useState } from 'react'

// Bounce 0: an icon is not a toy.
const swap = { type: 'spring', duration: 0.35, bounce: 0 } as const
// A 44px grid box (the hit area): popLayout places the leaving icon against it,
// so the two icons coincide and the layout never shifts.
const box = { position: 'relative', display: 'grid', placeItems: 'center', inlineSize: 44, blockSize: 44 } as const
const hiddenText = { position: 'absolute', inlineSize: 1, blockSize: 1, overflow: 'hidden', clipPath: 'inset(50%)', whiteSpace: 'nowrap' } as const

export function CopyButton() {
  const [copied, setCopied] = useState(false)
  // Not a toggle: the check reverts on a timer; the name stays and the status region announces.
  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
  useEffect(() => () => clearTimeout(timer.current), [])
  const copy = () => {
    setCopied(true)
    clearTimeout(timer.current)
    timer.current = setTimeout(() => setCopied(false), 1500)
  }
  // Reduced motion: opacity only, same duration.
  const reduced = useReducedMotion()
  const hidden = reduced ? { opacity: 0 } : { opacity: 0, scale: 0.3, filter: 'blur(3px)' }
  const shown = reduced ? { opacity: 1 } : { opacity: 1, scale: 1, filter: 'blur(0px)' }
  return (
    <>
      <button
        type="button"
        style={box}
        aria-label="Copy"
        onClick={copy}
      >
        {/* initial={false}: no swap on page load; the first icon is painted at rest. */}
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.span
            key={copied ? 'check' : 'copy'}
            style={{ display: 'grid' }}
            initial={hidden}
            animate={shown}
            exit={hidden}
            transition={swap}
          >
            {copied ? <Check size={16} aria-hidden /> : <Copy size={16} aria-hidden />}
          </motion.span>
        </AnimatePresence>
      </button>
      <span role="status" style={hiddenText}>{copied ? 'Copied' : ''}</span>
    </>
  )
}