Gradient border

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

// The first color repeats at the end, so the tiles join without a seam.
const RAINBOW =
  'bg-[linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7,#ec4899,#ef4444)] bg-size-[50%_100%]';

function Flow() {
  const reduceMotion = useReducedMotion();
  return (
    // Two gradient tiles wide; sliding by half (one tile) loops seamlessly.
    <motion.span
      aria-hidden
      animate={reduceMotion ? undefined : { x: ['0%', '-50%'] }}
      transition={{ duration: 4, ease: 'linear', repeat: Infinity }}
      className={`absolute inset-y-0 left-0 w-[200%] ${RAINBOW}`}
    />
  );
}

export function RainbowButton({ children }: { children: ReactNode }) {
  return (
    <button type='button' className='relative rounded-full'>
      {/* The glow: a blurred copy of the strip, clipped to the button's shape. */}
      <span
        aria-hidden
        className='absolute inset-x-3 -bottom-2 h-3/4 overflow-hidden rounded-full opacity-60 blur-[14px]'
      >
        <Flow />
      </span>
      {/* 2px of padding is the border; the strip shows only in that gap. */}
      <span className='relative block overflow-hidden rounded-full p-[2px]'>
        <Flow />
        <span className='relative flex h-12 items-center rounded-full bg-neutral-950 px-7 font-semibold text-white'>
          {children}
        </span>
      </span>
    </button>
  );
}