personal-site/components/AnimatedName.js

import { useState, useEffect } from 'react';
import { profile } from '../data/profile';

const names = profile.handles;

export default function AnimatedName() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isAnimating, setIsAnimating] = useState(false);

  useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    let timeout;
    const interval = setInterval(() => {
      setIsAnimating(true);
      timeout = setTimeout(() => {
        setCurrentIndex((prevIndex) => (prevIndex + 1) % names.length);
        setIsAnimating(false);
      }, 350);
    }, 3000);

    return () => {
      clearInterval(interval);
      clearTimeout(timeout);
    };
  }, []);

  return (
    <span className="animated-name" aria-label={names[0]}>
      <span aria-hidden="true" className={isAnimating ? 'is-leaving' : 'is-entering'}>
        {names[currentIndex]}
      </span>
    </span>
  );
}