Marker highlight

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

// Shapes drawn in a 100×40 box, scaled to each phrase's real size.
const MARKS = {
  highlight: { d: 'M1 23 C 22 21.5, 52 24, 99 21.5', width: '0.95em', color: '#fde047' },
  underline: { d: 'M2 34 C 30 28, 64 28, 98 31', width: '0.09em', color: '#2563eb' },
  circle: {
    d: 'M84 4 C 58 -2, 14 1, 4 15 C -4 28, 30 38, 58 37 C 88 36, 102 22, 92 10 C 88 5, 78 2, 66 3',
    width: '0.075em',
    color: '#db2777'
  }
};

// Scales every x,y pair. Scaling the path, instead of stretching the SVG,
// keeps the stroke even and pathLength accurate.
function scalePath(d: string, sx: number, sy: number) {
  let i = 0;
  return d.replace(/-?\d*\.?\d+/g, (n) => String(Number(n) * (i++ % 2 ? sy : sx)));
}

type MarkerProps = { kind: keyof typeof MARKS; delay?: number; children: ReactNode };

// Use inside an `isolate` paragraph, so the highlight sits behind the words.
export function Marker({ kind, delay = 0, children }: MarkerProps) {
  const reduceMotion = useReducedMotion();
  const box = useRef<HTMLSpanElement>(null);
  const [size, setSize] = useState({ w: 0, h: 0 });
  const { d, width, color } = MARKS[kind];

  useEffect(() => {
    const el = box.current!;
    const observer = new ResizeObserver(() =>
      setSize({ w: el.offsetWidth, h: el.offsetHeight })
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return (
    // nowrap: the mark cannot follow the words onto a second line.
    <span className='relative whitespace-nowrap'>
      {children}
      <span
        ref={box}
        aria-hidden
        className={`pointer-events-none absolute -inset-x-[0.3em] -inset-y-[0.2em] ${kind === 'highlight' ? '-z-10' : ''}`}
      >
        {size.w > 0 && (
          <svg viewBox={`0 0 ${size.w} ${size.h}`} className='block size-full overflow-visible'>
            <motion.path
              d={scalePath(d, size.w / 100, size.h / 40)}
              fill='none'
              stroke={color}
              strokeWidth={width}
              strokeLinecap='round'
              initial={reduceMotion ? false : { pathLength: 0 }}
              whileInView={{ pathLength: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay, ease: [0.65, 0, 0.35, 1] }}
            />
          </svg>
        )}
      </span>
    </span>
  );
}