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

astro.config.mjs

@@ -8,13 +8,10 @@ const isDev = process.env.NODE_ENV === "development";
 
 export default defineConfig({
   output: "server",
-  prefetch: true,
   build: {
     inlineStylesheets: "auto",
   },
-  integrations: [
-    vue(),
-  ],
+  integrations: [vue()],
 
   security: {
     checkOrigin: true,
@@ -24,10 +21,7 @@ export default defineConfig({
       : {
           algorithm: "SHA-512",
           scriptDirective: {
-            resources: [
-              "'self'",
-              "https://analytics.atri.dad",
-            ],
+            resources: ["'self'", "https://analytics.atri.dad"],
           },
           directives: [
             "connect-src 'self' https://analytics.atri.dad",

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