I guess DaisyUI has rotating text now... awesome!

src/components/RotatingText.astro

@@ -0,0 +1,22 @@
+---
+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", item.className]}>
+                    {item.text}
+                </span>
+            ))
+        }
+    </span>
+</span>

src/components/RotatingText.vue

@@ -1,33 +0,0 @@
-<template>
-    <span class="block w-full my-2">
-        <span class="text-rotate">
-            <span class="justify-items-center">
-                <span
-                    v-for="(item, index) in items"
-                    :key="index"
-                    :class="item.className"
-                >
-                    {{ item.text }}
-                </span>
-            </span>
-        </span>
-    </span>
-</template>
-
-<script setup lang="ts">
-interface RotatingTextItem {
-    text: string;
-    className: string;
-}
-
-defineProps<{
-    items: RotatingTextItem[];
-}>();
-</script>
-
-<style scoped>
-.text-rotate:hover,
-.text-rotate:hover * {
-    animation-play-state: running !important;
-}
-</style>

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.vue";
+import RotatingText from "../RotatingText.astro";
 import StatusIndicator from "../StatusIndicator.vue";
 
 const rotatingText = (siteConfig.hero as any).rotatingText as