Expletives.jsx

function Expletives({ children }) {
  let [, forceUpdate] = useState();
  let mounted = useRef(false);

  useEffect(() => {
    mounted.current = true;

    // don't want to cause any seizures.
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      return;
    }
    let timeout = setTimeout(() => {
      forceUpdate({});
    }, 200);
    return () => clearTimeout(timeout);
  });

  let letters =
    // don't do these tricks intially so server/client hydration matches
    mounted.current === false
      ? children
      : 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>
          );
        });

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

Nice thing watching for reduced motion