JS vue was better for this. the pure CSS animation kinda sucks.

src/components/RotatingText.astro

@@ -1,27 +0,0 @@
----
-interface Props {
-    items: Array<{
-        text: string;
-        className: string;
-    }>;
-}
-
-const { items } = Astro.props;
----
-
-<span class="text-rotate duration-9000">
-    <span>
-        {
-            items.map((item) => (
-                <span
-                    class:list={[
-                        "mx-auto text-center pointer-events-none",
-                        item.className,
-                    ]}
-                >
-                    {item.text}
-                </span>
-            ))
-        }
-    </span>
-</span>

src/components/sections/HeroSection.astro

@@ -2,7 +2,7 @@
 import { siteConfig } from "../../config/site";
 import Icon from "../Icon.astro";
 import Section from "../Section.astro";
-import RotatingText from "../RotatingText.astro";
+import RotatingText from "../RotatingText.vue";
 import StatusIndicator from "../StatusIndicator.vue";
 
 const rotatingText = (siteConfig.hero as any).rotatingText as
@@ -30,7 +30,7 @@ const rotatingText = (siteConfig.hero as any).rotatingText as
                 {
                     rotatingText ? (
                         <>
-                            <RotatingText items={rotatingText} />
+                            <RotatingText items={rotatingText} client:idle />
                             <span class="block">
                                 {siteConfig.hero.mainTitle
                                     .replace("{rotating}", "")