Expletives.jsx

function Expletives({ children }) {
  let [letters, setLetters] = useState(children);

  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      return;
    }
    
    let interval = setInterval(() => {
      let newLetters = children.split("").map((letter, index) => {
        let color = Math.round(Math.random() * 360);
        let char =
          Math.random() < 0.75 ? letter.toLowerCase() : letter.toUpperCase();

        return (
          <span style={{ color: `hsl(${color}, 30%, 50%)` }} key={index}>
            {char}
          </span>
        );
      })
      
      setLetters(newLetters);
    });
    
    return () => clearInterval(interval);
  }, []);

  return <b>{letters}</b>;
}