Line shadow text

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

// Two thin lines per square tile. At 45° the pattern repeats every half
// diagonal, so the tiles join seamlessly.
const STRIPES =
  'linear-gradient(135deg, #2563eb 0 16%, transparent 16% 50%, #2563eb 50% 66%, transparent 66%)';
const TILE = '0.075em'; // in em, so the stripes scale with the type

export function LineShadowHeading({ children }: { children: string }) {
  const reduceMotion = useReducedMotion();

  return (
    <h1 className='relative text-8xl leading-none font-black tracking-tighter'>
      {/* The shadow: an offset copy filled with stripes, hidden from screen readers. */}
      <motion.span
        aria-hidden
        className='absolute inset-0 translate-[0.06em] bg-clip-text text-transparent select-none'
        style={{ backgroundImage: STRIPES, backgroundSize: `${TILE} ${TILE}` }}
        // Sliding exactly one tile width loops with no visible jump.
        animate={
          reduceMotion
            ? undefined
            : { backgroundPosition: ['0em 0em', `${TILE} 0em`] }
        }
        transition={{ duration: 0.7, ease: 'linear', repeat: Infinity }}
      >
        {children}
      </motion.span>
      <span className='relative'>{children}</span>
    </h1>
  );
}