Pulse animation

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

// One shared rhythm for the ring and the badge beat.
const BEAT = { duration: 1.6, repeat: Infinity };

export function StreamHeader({
  title,
  unread
}: {
  title: string;
  unread: number;
}) {
  const reduceMotion = useReducedMotion();

  return (
    <header className='flex items-center justify-between gap-4'>
      <h2 className='flex items-center gap-2 font-medium'>
        <span className='relative flex size-2'>
          {/* A ring grows out of the dot and fades: transform and opacity only. */}
          {!reduceMotion && (
            <motion.span
              aria-hidden
              animate={{ scale: [1, 2.5], opacity: [0.5, 0] }}
              transition={{ ...BEAT, ease: 'easeOut' }}
              className='absolute inset-0 rounded-full bg-emerald-500'
            />
          )}
          <span className='relative size-2 rounded-full bg-emerald-500' />
        </span>
        {title}
        <span className='text-xs font-normal text-emerald-600'>Live</span>
      </h2>
      <button
        type='button'
        className='relative rounded-full border px-3 py-1.5 text-sm'
      >
        Notifications
        {unread > 0 && (
          <motion.span
            // A quick swell at the start of each beat, then rest.
            animate={reduceMotion ? undefined : { scale: [1, 1.15, 1, 1] }}
            transition={{ ...BEAT, times: [0, 0.1, 0.25, 1] }}
            className='absolute -top-1.5 -right-1.5 grid min-w-5 place-items-center rounded-full bg-red-500 px-1 text-xs font-medium text-white'
          >
            {unread}
          </motion.span>
        )}
      </button>
    </header>
  );
}