Sparkle text

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

type Sparkle = { id: number; x: number; y: number; size: number };

const LIFE_MS = 1000;
const SPAWN_MS = 200;
// Shown instead of the animation when reduced motion is on.
const STILL: Sparkle[] = [
  { id: -1, x: 0, y: 10, size: 0.35 },
  { id: -2, x: 60, y: -20, size: 0.25 },
  { id: -3, x: 100, y: 80, size: 0.3 }
];
const STAR =
  'M12 0c.7 6.5 5.5 11.3 12 12-6.5.7-11.3 5.5-12 12-.7-6.5-5.5-11.3-12-12C6.5 11.3 11.3 6.5 12 0Z';

export function SparkleText({ children }: { children: string }) {
  const reduceMotion = useReducedMotion();
  const [sparkles, setSparkles] = useState<Sparkle[]>([]);

  useEffect(() => {
    if (reduceMotion) return;
    let id = 0;
    // Random spots are picked in the browser, after hydration.
    const timer = setInterval(() => {
      const sparkle = {
        id: id++,
        x: Math.random() * 110 - 5, // % of the word box, with overhang
        y: Math.random() * 140 - 20,
        size: 0.15 + Math.random() * 0.25 // em, so it scales with the text
      };
      // Each sparkle lives one second, so keep only the last few.
      setSparkles((list) => [...list.slice(-(LIFE_MS / SPAWN_MS)), sparkle]);
    }, SPAWN_MS);
    return () => clearInterval(timer);
  }, [reduceMotion]);

  return (
    <span className='relative inline-block'>
      {children}
      <span aria-hidden className='pointer-events-none absolute inset-0'>
        {(reduceMotion ? STILL : sparkles).map((s) => (
          <motion.svg
            key={s.id}
            viewBox='0 0 24 24'
            className='absolute -translate-1/2 fill-amber-500'
            style={{ left: `${s.x}%`, top: `${s.y}%`, width: `${s.size}em`, height: `${s.size}em` }}
            initial={reduceMotion ? false : { scale: 0, rotate: -30 }}
            animate={reduceMotion ? undefined : { scale: [0, 1, 0], rotate: [-30, 20, 75] }}
            transition={{ duration: LIFE_MS / 1000, ease: 'easeInOut' }}
          >
            <path d={STAR} />
          </motion.svg>
        ))}
      </span>
    </span>
  );
}