Glare hover

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

export function GlareButton({ children }: { children: ReactNode }) {
  // A new key on every entry restarts the sweep, so it plays once per hover
  // and never runs backward when the pointer leaves.
  const [sweep, setSweep] = useState(0);
  const reduceMotion = useReducedMotion();
  const replay = () => setSweep((count) => count + 1);

  return (
    <button
      type='button'
      onPointerEnter={(event) => {
        if (event.pointerType === 'mouse') replay();
      }}
      onFocus={replay}
      className='relative isolate overflow-hidden rounded-full bg-blue-600 px-6 py-3 text-sm font-semibold text-white'
    >
      {children}
      {sweep > 0 ? (
        <motion.span
          key={sweep}
          aria-hidden
          className='pointer-events-none absolute -inset-y-1/2 left-0 w-2/5 bg-linear-to-r from-transparent via-white/55 to-transparent'
          // Motion writes translateX before rotate, so the band slides
          // straight across while staying tilted.
          style={{ rotate: 20 }}
          // Just past one edge to just past the other, for a pill this shape.
          initial={reduceMotion ? { x: '75%', opacity: 0 } : { x: '-130%' }}
          animate={reduceMotion ? { opacity: [0, 0.6, 0] } : { x: '280%' }}
          transition={{ duration: 0.75, ease: 'easeInOut' }}
        />
      ) : null}
    </button>
  );
}