feat: clean up RotatingWord component styles

components/content/RotatingWord.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type RotatingWordProps = {
+  items: string[];
+  intervalSeconds?: number;
+};
+
+export default function RotatingWord({
+  items,
+  intervalSeconds = 2.5,
+}: RotatingWordProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  useEffect(() => {
+    if (items.length <= 1) return;
+    const id = setInterval(() => {
+      setActiveIndex((i) => (i + 1) % items.length);
+    }, intervalSeconds * 1000);
+    return () => clearInterval(id);
+  }, [items.length, intervalSeconds]);
+
+  return (
+    <span className="relative inline-block align-baseline">
+      {items.map((word, i) => (
+        <span
+          key={word}
+          aria-hidden={i !== activeIndex}
+          className={`transition-all ease-out ${
+            i === activeIndex
+              ? "opacity-100 translate-y-0 scale-100 duration-1200"
+              : "absolute top-0 left-0 opacity-0 pointer-events-none duration-0"
+          }`}
+        >
+          {word}
+        </span>
+      ))}
+    </span>
+  );
+}