Comic text

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

const SPRING = { type: 'spring', duration: 0.45, bounce: 0.5 } as const;
const BURST =
  '100,0 117,58 171,29 142,83 200,100 142,117 171,171 117,142 100,200 83,142 29,171 58,117 0,100 58,83 29,29 83,58';
// Print-style dots on the panel behind the word.
const HALFTONE = {
  backgroundImage: 'radial-gradient(rgb(0 0 0 / 0.2) 28%, transparent 30%)',
  backgroundSize: '11px 11px'
};

export function ComicBurst({ word = 'Shipped!' }: { word?: string }) {
  const reduceMotion = useReducedMotion();

  return (
    <div
      className='relative grid h-64 w-[28rem] place-items-center overflow-hidden border-4 border-black bg-pink-500'
      style={HALFTONE}
    >
      <motion.svg
        aria-hidden
        viewBox='0 0 200 200'
        className='absolute w-80'
        initial={reduceMotion ? false : { scale: 0, rotate: -24 }}
        animate={{ scale: 1, rotate: -4 }}
        transition={SPRING}
      >
        <polygon points={BURST} fill='#facc15' stroke='black' strokeWidth='5' strokeLinejoin='round' />
      </motion.svg>
      <motion.h2
        className='relative text-7xl font-black text-white uppercase italic'
        style={{
          // The stroke paints under the fill, so the outline sits outside
          // the letters. drop-shadow traces the outlined shape.
          WebkitTextStroke: '8px black',
          paintOrder: 'stroke fill',
          filter: 'drop-shadow(5px 5px 0 black)'
        }}
        initial={reduceMotion ? false : { scale: 2.4, rotate: -12, opacity: 0 }}
        animate={{ scale: 1, rotate: -6, opacity: 1 }}
        transition={{ ...SPRING, delay: 0.12 }}
      >
        {word}
      </motion.h2>
    </div>
  );
}