Rotating Words

"use client";

import { useEffect, useState } from "react";

const WORDS = ["websites", "dashboards", "stores", "products"];

export function RotatingWords() {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const id = window.setInterval(
      () => setIndex((i) => (i + 1) % WORDS.length),
      2000,
    );
    return () => window.clearInterval(id);
  }, []);

  return (
    <p className="text-2xl font-semibold">
      We build{" "}
      <span className="relative inline-block h-8 w-40 overflow-hidden align-bottom">
        {WORDS.map((word, i) => (
          <span
            key={word}
            className={
              "absolute inset-x-0 text-amber-500 transition-all duration-500 ease-out " +
              (i === index ? "translate-y-0 opacity-100" : "translate-y-7 opacity-0")
            }
          >
            {word}
          </span>
        ))}
      </span>
    </p>
  );
}