Aurora text

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

// Soft blobs over a solid base, so no letter is ever left empty.
const BLOBS = ['#9333ea', '#14b8a6', '#ec4899', '#1d4ed8'];
const BASE = '#2563eb';
// Each blob drifts on its own slow path: [x speed, y speed] in radians/s.
const SPEEDS: [number, number][] = [
  [0.31, 0.47],
  [0.43, 0.29],
  [0.23, 0.53],
  [0.37, 0.41]
];

export function AuroraText({ children }: { children: string }) {
  const ref = useRef<HTMLSpanElement>(null);
  const inView = useInView(ref);
  const reduceMotion = useReducedMotion();

  useEffect(() => {
    const element = ref.current;
    if (!element || !inView || reduceMotion) return;
    let frame = 0;
    const tick = (now: number) => {
      const t = now / 1000;
      element.style.backgroundPosition = [
        ...SPEEDS.map(
          ([fx, fy], i) =>
            `${50 + 60 * Math.sin(t * fx + i * 1.7)}% ${50 + 50 * Math.sin(t * fy + i)}%`
        ),
        '0 0'
      ].join(', ');
      frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [inView, reduceMotion]);

  return (
    <span
      ref={ref}
      className='bg-clip-text pb-[0.1em] font-bold text-transparent'
      style={{
        backgroundImage: [
          ...BLOBS.map((c) => `radial-gradient(closest-side, ${c}, transparent)`),
          `linear-gradient(${BASE}, ${BASE})`
        ].join(', '),
        backgroundSize: '55% 160%, 50% 150%, 45% 170%, 60% 140%, 100% 100%',
        backgroundRepeat: 'no-repeat',
        // The still frame, used until the loop starts and for reduced motion.
        backgroundPosition: '15% 60%, 85% 20%, 45% 90%, 70% 40%, 0 0'
      }}
    >
      {children}
    </span>
  );
}