[ REFACT ] : CircularText Text Animation

package.json

@@ -31,7 +31,7 @@
     "lucide-vue-next": "^0.548.0",
     "mathjs": "^14.6.0",
     "matter-js": "^0.20.0",
-    "motion-v": "^1.5.0",
+    "motion-v": "^1.10.2",
     "ogl": "^1.0.11",
     "postprocessing": "^6.37.6",
     "primeicons": "^7.0.0",

src/content/TextAnimations/CircularText/CircularText.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect, onUnmounted } from 'vue';
-import { Motion } from 'motion-v';
+import { animate, Motion, MotionValue, useMotionValue } from 'motion-v';
+import { computed, onMounted, watch } from 'vue';
 
 interface CircularTextProps {
   text: string;
@@ -10,87 +10,59 @@ interface CircularTextProps {
 }
 
 const props = withDefaults(defineProps<CircularTextProps>(), {
-  text: '',
   spinDuration: 20,
   onHover: 'speedUp',
   className: ''
 });
 
 const letters = computed(() => Array.from(props.text));
-const isHovered = ref(false);
+const rotation: MotionValue<number> = useMotionValue(0);
 
-const currentRotation = ref(0);
-const animationId = ref<number | null>(null);
-const lastTime = ref<number>(Date.now());
-const rotationSpeed = ref<number>(0);
+let currentAnimation: ReturnType<typeof animate> | null = null;
 
-const getCurrentSpeed = () => {
-  if (isHovered.value && props.onHover === 'pause') return 0;
+const startRotation = (duration: number) => {
+  currentAnimation?.stop();
+  const start = rotation.get();
 
-  const baseDuration = props.spinDuration;
-  const baseSpeed = 360 / baseDuration;
+  currentAnimation = animate(rotation, start + 360, {
+    duration,
+    ease: 'linear',
+    repeat: Infinity
+  });
+};
 
-  if (!isHovered.value) return baseSpeed;
+onMounted(() => {
+  startRotation(props.spinDuration);
+});
+
+watch(
+  () => [props.spinDuration, props.text],
+  () => {
+    startRotation(props.spinDuration);
+  }
+);
+
+const handleHoverStart = () => {
+  if (!props.onHover) return;
 
   switch (props.onHover) {
     case 'slowDown':
-      return baseSpeed / 2;
+      startRotation(props.spinDuration * 2);
+      break;
     case 'speedUp':
-      return baseSpeed * 4;
+      startRotation(props.spinDuration / 4);
+      break;
+    case 'pause':
+      currentAnimation?.stop();
+      break;
     case 'goBonkers':
-      return baseSpeed * 20;
-    default:
-      return baseSpeed;
+      startRotation(props.spinDuration / 20);
+      break;
   }
 };
 
-const getCurrentScale = () => {
-  return isHovered.value && props.onHover === 'goBonkers' ? 0.8 : 1;
-};
-
-const animate = () => {
-  const now = Date.now();
-  const deltaTime = (now - lastTime.value) / 1000;
-  lastTime.value = now;
-
-  const targetSpeed = getCurrentSpeed();
-
-  const speedDiff = targetSpeed - rotationSpeed.value;
-  const smoothingFactor = Math.min(1, deltaTime * 5);
-  rotationSpeed.value += speedDiff * smoothingFactor;
-
-  currentRotation.value = (currentRotation.value + rotationSpeed.value * deltaTime) % 360;
-
-  animationId.value = requestAnimationFrame(animate);
-};
-
-const startAnimation = () => {
-  if (animationId.value) {
-    cancelAnimationFrame(animationId.value);
-  }
-  lastTime.value = Date.now();
-  rotationSpeed.value = getCurrentSpeed();
-  animate();
-};
-
-watchEffect(() => {
-  startAnimation();
-});
-
-startAnimation();
-
-onUnmounted(() => {
-  if (animationId.value) {
-    cancelAnimationFrame(animationId.value);
-  }
-});
-
-const handleHoverStart = () => {
-  isHovered.value = true;
-};
-
 const handleHoverEnd = () => {
-  isHovered.value = false;
+  startRotation(props.spinDuration);
 };
 
 const getLetterTransform = (index: number) => {
@@ -104,28 +76,24 @@ const getLetterTransform = (index: number) => {
 
 <template>
   <Motion
-    :animate="{
-      rotate: currentRotation,
-      scale: getCurrentScale()
+    tag="div"
+    :class="[
+      'm-0 mx-auto rounded-full w-[200px] h-[200px] relative font-black text-white text-center cursor-pointer origin-center',
+      className
+    ]"
+    :style="{
+      rotate: rotation
     }"
-    :transition="{
-      rotate: {
-        duration: 0
-      },
-      scale: {
-        type: 'spring',
-        damping: 20,
-        stiffness: 300
-      }
+    :initial="{
+      rotate: 0
     }"
-    :class="`m-0 mx-auto rounded-full w-[200px] h-[200px] relative font-black text-white text-center cursor-pointer origin-center ${props.className}`"
     @mouseenter="handleHoverStart"
     @mouseleave="handleHoverEnd"
   >
     <span
       v-for="(letter, i) in letters"
       :key="i"
-      class="absolute inline-block inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]"
+      class="inline-block absolute inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]"
       :style="{
         transform: getLetterTransform(i),
         WebkitTransform: getLetterTransform(i)

src/demo/TextAnimations/CircularTextDemo.vue

@@ -1,28 +1,14 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container h-[400px] overflow-hidden">
-        <CircularText
-          :key="rerenderKey"
-          text="VUE * BITS * IS * AWESOME * "
-          :spin-duration="spinDuration"
-          :on-hover="onHover"
-          class-name="text-blue-500"
-        />
+      <div class="h-[400px] overflow-hidden demo-container">
+        <CircularText :key="rerenderKey" :text="text" :spin-duration="spinDuration" :on-hover="onHover" />
       </div>
 
       <Customize>
-        <div class="flex gap-4 flex-wrap">
-          <button
-            class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
-            @click="toggleOnHover"
-          >
-            On Hover:
-            <span class="text-[#a1a1aa]">&nbsp;{{ onHover }}</span>
-          </button>
-        </div>
-
-        <PreviewSlider title="Spin Duration (s)" v-model="spinDuration" :min="1" :max="50" :step="1" />
+        <PreviewText title="Text" v-model="text" />
+        <PreviewSelect title="On Hover" v-model="onHover" :options="hoverOptions" />
+        <PreviewSlider title="Spin Duration (s)" v-model="spinDuration" :min="1" :max="60" :step="1" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -41,45 +27,58 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
-import Customize from '../../components/common/Customize.vue';
-import PreviewSlider from '../../components/common/PreviewSlider.vue';
-import CircularText from '../../content/TextAnimations/CircularText/CircularText.vue';
-import { circularText } from '@/constants/code/TextAnimations/circularTextCode';
+import CliInstallation from '@/components/code/CliInstallation.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
+import Dependencies from '@/components/code/Dependencies.vue';
+import Customize from '@/components/common/Customize.vue';
+import PreviewSelect from '@/components/common/PreviewSelect.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PreviewText from '@/components/common/PreviewText.vue';
+import PropTable from '@/components/common/PropTable.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
 import { useForceRerender } from '@/composables/useForceRerender';
+import { circularText } from '@/constants/code/TextAnimations/circularTextCode';
+import CircularText from '@/content/TextAnimations/CircularText/CircularText.vue';
+import { ref } from 'vue';
 
+const { rerenderKey } = useForceRerender();
+
+const text = ref('VUE*BITS*COMPONENTS*');
 const onHover = ref<'slowDown' | 'speedUp' | 'pause' | 'goBonkers'>('speedUp');
 const spinDuration = ref(20);
-const { rerenderKey, forceRerender } = useForceRerender();
 
-const hoverOptions: Array<'slowDown' | 'speedUp' | 'pause' | 'goBonkers'> = [
-  'slowDown',
-  'speedUp',
-  'pause',
-  'goBonkers'
+const hoverOptions = [
+  { label: 'Slow Down', value: 'slowDown' },
+  { label: 'Speed Up', value: 'speedUp' },
+  { label: 'Pause', value: 'pause' },
+  { label: 'Go Bonkers', value: 'goBonkers' }
 ];
 
-const toggleOnHover = () => {
-  const currentIndex = hoverOptions.indexOf(onHover.value);
-  const nextIndex = (currentIndex + 1) % hoverOptions.length;
-  onHover.value = hoverOptions[nextIndex];
-  forceRerender();
-};
-
 const propData = [
-  { name: 'text', type: 'string', default: '""', description: 'The text content to display in a circular pattern.' },
-  { name: 'spinDuration', type: 'number', default: '20', description: 'Duration of one full rotation in seconds.' },
+  {
+    name: 'text',
+    type: 'string',
+    default: "''",
+    description: 'The text to display in a circular layout.'
+  },
+  {
+    name: 'spinDuration',
+    type: 'number',
+    default: '20',
+    description: 'The duration (in seconds) for one full rotation.'
+  },
   {
     name: 'onHover',
-    type: 'string',
-    default: '"speedUp"',
-    description: 'Hover behavior: "slowDown", "speedUp", "pause", or "goBonkers".'
+    type: "'slowDown' | 'speedUp' | 'pause' | 'goBonkers'",
+    default: 'undefined',
+    description:
+      "Specifies the hover behavior variant. Options include 'slowDown', 'speedUp', 'pause', and 'goBonkers'."
   },
-  { name: 'className', type: 'string', default: '""', description: 'Additional class names to style the component.' }
+  {
+    name: 'className',
+    type: 'string',
+    default: "''",
+    description: 'Optional additional CSS classes to apply to the component.'
+  }
 ];
 </script>