Pls

package.json

@@ -14,7 +14,6 @@
     "@fontsource-variable/roboto-slab": "^5.2.8",
     "@tailwindcss/vite": "^4.2.1",
     "astro": "6.0.0-beta.15",
-    "motion-v": "2.0.0",
     "nodemailer": "^8.0.1",
     "tailwindcss": "^4.2.1",
     "vue": "^3.5.29"

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/RotatingText.vue

@@ -0,0 +1,33 @@
+<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.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}", "")