From d312302823236ee62c46b4bc7cf4d7f8d2eb8b59 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sat, 31 Jan 2026 16:35:17 +0530
Subject: [PATCH 1/9] [ REFACT ] : SplitText Text Animation

---
 .../TextAnimations/SplitText/SplitText.vue    | 253 ++++++++----------
 src/demo/TextAnimations/SplitTextDemo.vue     | 109 +++++---
 2 files changed, 196 insertions(+), 166 deletions(-)

diff --git a/src/content/TextAnimations/SplitText/SplitText.vue b/src/content/TextAnimations/SplitText/SplitText.vue
index c116f52..0fac6a4 100644
--- a/src/content/TextAnimations/SplitText/SplitText.vue
+++ b/src/content/TextAnimations/SplitText/SplitText.vue
@@ -1,18 +1,11 @@
 <template>
-  <p
-    ref="textRef"
-    :class="`split-parent overflow-hidden inline-block whitespace-normal ${className}`"
-    :style="{
-      textAlign,
-      wordWrap: 'break-word'
-    }"
-  >
+  <component :is="tag" ref="elRef" :style="styles" :class="classes">
     {{ text }}
-  </p>
+  </component>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
+import { ref, onMounted, watch, type CSSProperties, onBeforeUnmount, computed } from 'vue';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { SplitText as GSAPSplitText } from 'gsap/SplitText';
@@ -25,25 +18,27 @@ export interface SplitTextProps {
   delay?: number;
   duration?: number;
   ease?: string | ((t: number) => number);
-  splitType?: 'chars' | 'words' | 'lines' | 'words, chars';
+  splitType?: 'chars' | 'words' | 'lines';
   from?: gsap.TweenVars;
   to?: gsap.TweenVars;
   threshold?: number;
   rootMargin?: string;
-  textAlign?: 'left' | 'center' | 'right' | 'justify';
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+  textAlign?: CSSProperties['textAlign'];
   onLetterAnimationComplete?: () => void;
 }
 
 const props = withDefaults(defineProps<SplitTextProps>(), {
   className: '',
-  delay: 100,
-  duration: 0.6,
+  delay: 50,
+  duration: 1.25,
   ease: 'power3.out',
   splitType: 'chars',
   from: () => ({ opacity: 0, y: 40 }),
   to: () => ({ opacity: 1, y: 0 }),
   threshold: 0.1,
   rootMargin: '-100px',
+  tag: 'p',
   textAlign: 'center'
 });
 
@@ -51,144 +46,134 @@ const emit = defineEmits<{
   'animation-complete': [];
 }>();
 
-const textRef = useTemplateRef<HTMLParagraphElement>('textRef');
-const animationCompletedRef = ref(false);
-const scrollTriggerRef = ref<ScrollTrigger | null>(null);
-const timelineRef = ref<gsap.core.Timeline | null>(null);
-const splitterRef = ref<GSAPSplitText | null>(null);
+const elRef = ref<HTMLElement | null>(null);
+const fontsLoaded = ref(false);
+const animationCompleted = ref(false);
 
-const initializeAnimation = async () => {
-  if (typeof window === 'undefined' || !textRef.value || !props.text) return;
+let splitInstance: GSAPSplitText | null = null;
 
-  await nextTick();
-
-  const el = textRef.value;
-
-  animationCompletedRef.value = false;
-
-  const absoluteLines = props.splitType === 'lines';
-  if (absoluteLines) el.style.position = 'relative';
-
-  let splitter: GSAPSplitText;
-  try {
-    splitter = new GSAPSplitText(el, {
-      type: props.splitType,
-      absolute: absoluteLines,
-      linesClass: 'split-line'
+onMounted(() => {
+  if (document.fonts.status === 'loaded') {
+    fontsLoaded.value = true;
+  } else {
+    document.fonts.ready.then(() => {
+      fontsLoaded.value = true;
     });
-    splitterRef.value = splitter;
-  } catch (error) {
-    console.error('Failed to create SplitText:', error);
-    return;
   }
+});
 
-  let targets: Element[];
-  switch (props.splitType) {
-    case 'lines':
-      targets = splitter.lines;
-      break;
-    case 'words':
-      targets = splitter.words;
-      break;
-    case 'chars':
-      targets = splitter.chars;
-      break;
-    default:
-      targets = splitter.chars;
+const runAnimation = () => {
+  if (!elRef.value || !props.text || !fontsLoaded.value) return;
+  if (animationCompleted.value) return;
+
+  const el = elRef.value as HTMLElement & {
+    _rbsplitInstance?: GSAPSplitText;
+  };
+
+  // cleanup previous
+  if (el._rbsplitInstance) {
+    try {
+      el._rbsplitInstance.revert();
+    } catch {}
+    el._rbsplitInstance = undefined;
   }
 
-  if (!targets || targets.length === 0) {
-    console.warn('No targets found for SplitText animation');
-    splitter.revert();
-    return;
-  }
-
-  targets.forEach(t => {
-    (t as HTMLElement).style.willChange = 'transform, opacity';
-  });
-
   const startPct = (1 - props.threshold) * 100;
   const marginMatch = /^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(props.rootMargin);
   const marginValue = marginMatch ? parseFloat(marginMatch[1]) : 0;
-  const marginUnit = marginMatch ? marginMatch[2] || 'px' : 'px';
-  const sign = marginValue < 0 ? `-=${Math.abs(marginValue)}${marginUnit}` : `+=${marginValue}${marginUnit}`;
+  const marginUnit = marginMatch?.[2] || 'px';
+
+  const sign =
+    marginValue === 0
+      ? ''
+      : marginValue < 0
+        ? `-=${Math.abs(marginValue)}${marginUnit}`
+        : `+=${marginValue}${marginUnit}`;
+
   const start = `top ${startPct}%${sign}`;
 
-  const tl = gsap.timeline({
-    scrollTrigger: {
-      trigger: el,
-      start,
-      toggleActions: 'play none none none',
-      once: true,
-      onToggle: self => {
-        scrollTriggerRef.value = self;
-      }
-    },
-    smoothChildTiming: true,
-    onComplete: () => {
-      animationCompletedRef.value = true;
-      gsap.set(targets, {
-        ...props.to,
-        clearProps: 'willChange',
-        immediateRender: true
-      });
-      props.onLetterAnimationComplete?.();
-      emit('animation-complete');
+  let targets: Element[] = [];
+
+  const assignTargets = (self: GSAPSplitText) => {
+    if (props.splitType.includes('chars') && self.chars?.length) targets = self.chars;
+    if (!targets.length && props.splitType.includes('words') && self.words?.length) targets = self.words;
+    if (!targets.length && props.splitType.includes('lines') && self.lines?.length) targets = self.lines;
+    if (!targets.length) targets = self.chars || self.words || self.lines;
+  };
+
+  splitInstance = new GSAPSplitText(el, {
+    type: props.splitType,
+    smartWrap: true,
+    autoSplit: props.splitType === 'lines',
+    linesClass: 'split-line',
+    wordsClass: 'split-word',
+    charsClass: 'split-char',
+    reduceWhiteSpace: false,
+    onSplit(self) {
+      assignTargets(self);
+
+      return gsap.fromTo(
+        targets,
+        { ...props.from },
+        {
+          ...props.to,
+          duration: props.duration,
+          ease: props.ease,
+          stagger: props.delay / 1000,
+          scrollTrigger: {
+            trigger: el,
+            start,
+            once: true,
+            fastScrollEnd: true,
+            anticipatePin: 0.4
+          },
+          onComplete() {
+            animationCompleted.value = true;
+            props.onLetterAnimationComplete?.();
+            emit('animation-complete');
+          },
+          willChange: 'transform, opacity',
+          force3D: true
+        }
+      );
     }
   });
 
-  timelineRef.value = tl;
-
-  tl.set(targets, { ...props.from, immediateRender: false, force3D: true });
-  tl.to(targets, {
-    ...props.to,
-    duration: props.duration,
-    ease: props.ease,
-    stagger: props.delay / 1000,
-    force3D: true
-  });
+  el._rbsplitInstance = splitInstance;
 };
 
-const cleanup = () => {
-  if (timelineRef.value) {
-    timelineRef.value.kill();
-    timelineRef.value = null;
-  }
-  if (scrollTriggerRef.value) {
-    scrollTriggerRef.value.kill();
-    scrollTriggerRef.value = null;
-  }
-  if (splitterRef.value) {
-    gsap.killTweensOf(textRef.value);
-    splitterRef.value.revert();
-    splitterRef.value = null;
-  }
-};
-
-onMounted(() => {
-  initializeAnimation();
-});
-
-onUnmounted(() => {
-  cleanup();
-});
-
 watch(
-  [
-    () => props.text,
-    () => props.delay,
-    () => props.duration,
-    () => props.ease,
-    () => props.splitType,
-    () => props.from,
-    () => props.to,
-    () => props.threshold,
-    () => props.rootMargin,
-    () => props.onLetterAnimationComplete
+  () => [
+    props.text,
+    props.delay,
+    props.duration,
+    props.ease,
+    props.splitType,
+    JSON.stringify(props.from),
+    JSON.stringify(props.to),
+    props.threshold,
+    props.rootMargin,
+    fontsLoaded.value
   ],
-  () => {
-    cleanup();
-    initializeAnimation();
-  }
+  runAnimation,
+  { deep: true }
 );
+
+onBeforeUnmount(() => {
+  ScrollTrigger.getAll().forEach(st => {
+    if (st.trigger === elRef.value) st.kill();
+  });
+
+  try {
+    splitInstance?.revert();
+  } catch {}
+});
+
+const styles = computed(() => ({
+  textAlign: props.textAlign,
+  wordWrap: 'break-word',
+  willChange: 'transform, opacity'
+}));
+
+const classes = computed(() => `split-parent overflow-hidden inline-block whitespace-normal ${props.className}`);
 </script>
diff --git a/src/demo/TextAnimations/SplitTextDemo.vue b/src/demo/TextAnimations/SplitTextDemo.vue
index e0396d8..da9c6ad 100644
--- a/src/demo/TextAnimations/SplitTextDemo.vue
+++ b/src/demo/TextAnimations/SplitTextDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container h-[400px]">
+      <div class="h-[400px] demo-container">
         <RefreshButton @refresh="forceRerender" />
 
         <SplitText
@@ -11,8 +11,7 @@
           :duration="duration"
           :ease="ease"
           :split-type="splitType"
-          :threshold="threshold"
-          class="split-text-demo"
+          class-name="split-text-demo"
           @animation-complete="
             () => {
               showCallback && showToast();
@@ -22,13 +21,27 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
+        <div class="flex flex-wrap gap-4">
+          <button
+            class="bg-[#0b0b0b] hover:bg-[#222] px-3 border border-[#333] rounded-[10px] h-8 text-white text-xs transition-colors cursor-pointer"
+            @click="toggleSplitType"
+          >
+            Split Type:
+            <span class="text-[#a1a1aa]">&nbsp;{{ splitType }}</span>
+          </button>
+
+          <button
+            class="bg-[#0b0b0b] hover:bg-[#222] px-3 border border-[#333] rounded-[10px] h-8 text-white text-xs transition-colors cursor-pointer"
+            @click="toggleEase"
+          >
+            Ease:
+            <span class="text-[#a1a1aa]">&nbsp;{{ ease }}</span>
+          </button>
+        </div>
 
         <PreviewSlider title="Stagger Delay (ms)" v-model="delay" :min="10" :max="500" :step="10" />
-
-        <PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="3" :step="0.1" />
-
-        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
+        <PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="2" :step="0.1" />
+        <PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -47,29 +60,40 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import RefreshButton from '../../components/common/RefreshButton.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 PreviewSwitch from '../../components/common/PreviewSwitch.vue';
-import PreviewSlider from '../../components/common/PreviewSlider.vue';
-import SplitText from '../../content/TextAnimations/SplitText/SplitText.vue';
-import { splitText } from '@/constants/code/TextAnimations/splitTextCode';
-import { useToast } from 'primevue/usetoast';
+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 PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
+import PropTable from '@/components/common/PropTable.vue';
+import RefreshButton from '@/components/common/RefreshButton.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
 import { useForceRerender } from '@/composables/useForceRerender';
+import { splitText } from '@/constants/code/TextAnimations/splitTextCode';
+import SplitText from '@/content/TextAnimations/SplitText/SplitText.vue';
+import { useToast } from 'primevue/usetoast';
+import { ref, watch } from 'vue';
 
-const delay = ref(10);
-const duration = ref(3);
-const ease = ref('elastic.out(1, 0.3)');
-const splitType = ref<'chars' | 'words' | 'lines' | 'words, chars'>('chars');
-const threshold = ref(0.1);
-const showCallback = ref(true);
-const toast = useToast();
 const { rerenderKey, forceRerender } = useForceRerender();
+const toast = useToast();
+
+const delay = ref(50);
+const duration = ref(1.25);
+const ease = ref<'power3.out' | 'bounce.out' | 'elastic.out(1, 0.3)'>('power3.out');
+const splitType = ref<'chars' | 'words' | 'lines'>('chars');
+const showCallback = ref(true);
+
+const toggleSplitType = () => {
+  splitType.value = splitType.value === 'chars' ? 'words' : splitType.value === 'words' ? 'lines' : 'chars';
+  forceRerender();
+};
+
+const toggleEase = () => {
+  ease.value =
+    ease.value === 'power3.out' ? 'bounce.out' : ease.value === 'bounce.out' ? 'elastic.out(1, 0.3)' : 'power3.out';
+  forceRerender();
+};
 
 const showToast = () => {
   toast.add({
@@ -80,10 +104,31 @@ const showToast = () => {
 };
 
 const propData = [
+  {
+    name: 'tag',
+    type: 'string',
+    default: '"p"',
+    description: 'HTML tag to render: "h1", "h2", "h3", "h4", "h5", "h6", "p",'
+  },
   { name: 'text', type: 'string', default: '""', description: 'The text content to animate.' },
-  { name: 'className', type: 'string', default: '""', description: 'Additional class names to style the component.' },
-  { name: 'delay', type: 'number', default: '100', description: 'Delay between animations for each letter (in ms).' },
-  { name: 'duration', type: 'number', default: '0.6', description: 'Duration of each letter animation (in seconds).' },
+  {
+    name: 'className',
+    type: 'string',
+    default: '""',
+    description: 'Additional class names to style the component.'
+  },
+  {
+    name: 'delay',
+    type: 'number',
+    default: '50',
+    description: 'Delay between animations for each letter (in ms).'
+  },
+  {
+    name: 'duration',
+    type: 'number',
+    default: '1.25',
+    description: 'Duration of each letter animation (in seconds).'
+  },
   { name: 'ease', type: 'string', default: '"power3.out"', description: 'GSAP easing function for the animation.' },
   {
     name: 'splitType',
@@ -114,7 +159,7 @@ const propData = [
     name: 'textAlign',
     type: 'string',
     default: '"center"',
-    description: 'Text alignment: "left", "center", "right", etc.'
+    description: "Text alignment: 'left', 'center', 'right', etc."
   },
   {
     name: 'onLetterAnimationComplete',

From 101dde4c6dfae179994f32e78d063ff1b4e3aa3e Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sat, 31 Jan 2026 22:58:03 +0530
Subject: [PATCH 2/9] [ REFACT ] : BlurText Text Animation

---
 .../code/TextAnimations/blurTextCode.ts       |   9 +-
 .../TextAnimations/BlurText/BlurText.vue      | 160 +++++++-----------
 src/demo/TextAnimations/BlurTextDemo.vue      |  94 +++++-----
 3 files changed, 110 insertions(+), 153 deletions(-)

diff --git a/src/constants/code/TextAnimations/blurTextCode.ts b/src/constants/code/TextAnimations/blurTextCode.ts
index c4e998c..f7536e7 100644
--- a/src/constants/code/TextAnimations/blurTextCode.ts
+++ b/src/constants/code/TextAnimations/blurTextCode.ts
@@ -1,18 +1,15 @@
-import code from '@content/TextAnimations/BlurText/BlurText.vue?raw';
 import { createCodeObject } from '@/types/code';
+import code from '@content/TextAnimations/BlurText/BlurText.vue?raw';
 
 export const blurText = createCodeObject(code, 'TextAnimations/BlurText', {
   installation: `npm install motion-v`,
   usage: `<template>
   <BlurText
     text="Isn't this so cool?!"
-    :delay="200"
-    class-name="text-2xl font-semibold text-center"
     animate-by="words"
     direction="top"
-    :threshold="0.1"
-    root-margin="0px"
-    :step-duration="0.35"
+    :delay="200"
+    class-name="text-2xl font-semibold text-center"
     @animation-complete="handleAnimationComplete"
   />
 </template>
diff --git a/src/content/TextAnimations/BlurText/BlurText.vue b/src/content/TextAnimations/BlurText/BlurText.vue
index d21d1b0..420d15c 100644
--- a/src/content/TextAnimations/BlurText/BlurText.vue
+++ b/src/content/TextAnimations/BlurText/BlurText.vue
@@ -1,81 +1,99 @@
 <template>
-  <p ref="rootRef" :class="['blur-text', className, 'flex', 'flex-wrap']">
+  <p ref="rootRef" class="flex flex-wrap blur-text" :class="className">
     <Motion
       v-for="(segment, index) in elements"
-      :key="`${animationKey}-${index}`"
+      :key="index"
       tag="span"
       :initial="fromSnapshot"
-      :animate="inView ? getAnimateKeyframes() : fromSnapshot"
+      :animate="inView ? buildKeyframes(fromSnapshot, toSnapshots) : fromSnapshot"
       :transition="getTransition(index)"
-      :style="{
-        display: 'inline-block',
-        willChange: 'transform, filter, opacity'
-      }"
-      @animation-complete="() => handleAnimationComplete(index)"
+      @animation-complete="handleAnimationComplete(index)"
+      style="display: inline-block; will-change: transform, filter, opacity"
     >
-      {{ segment === ' ' ? '\u00A0' : segment
-      }}{{ animateBy === 'words' && index < elements.length - 1 ? '\u00A0' : '' }}
+      {{ segment === ' ' ? '\u00A0' : segment }}
+      <template v-if="animateBy === 'words' && index < elements.length - 1">&nbsp;</template>
     </Motion>
   </p>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
-import { Motion } from 'motion-v';
+import { Motion, type Transition } from 'motion-v';
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
 
-type AnimateBy = 'words' | 'letters';
-type Direction = 'top' | 'bottom';
-type AnimationSnapshot = Record<string, string | number>;
-
-interface BlurTextProps {
+type BlurTextProps = {
   text?: string;
   delay?: number;
   className?: string;
-  animateBy?: AnimateBy;
-  direction?: Direction;
+  animateBy?: 'words' | 'letters';
+  direction?: 'top' | 'bottom';
   threshold?: number;
   rootMargin?: string;
-  animationFrom?: AnimationSnapshot;
-  animationTo?: AnimationSnapshot[];
+  animationFrom?: Record<string, string | number>;
+  animationTo?: Array<Record<string, string | number>>;
   easing?: (t: number) => number;
   onAnimationComplete?: () => void;
   stepDuration?: number;
-}
+};
+
+const buildKeyframes = (
+  from: Record<string, string | number>,
+  steps: Array<Record<string, string | number>>
+): Record<string, Array<string | number>> => {
+  const keys = new Set<string>([...Object.keys(from), ...steps.flatMap(s => Object.keys(s))]);
+
+  const keyframes: Record<string, Array<string | number>> = {};
+  keys.forEach(k => {
+    keyframes[k] = [from[k], ...steps.map(s => s[k])];
+  });
+  return keyframes;
+};
 
 const props = withDefaults(defineProps<BlurTextProps>(), {
   text: '',
   delay: 200,
   className: '',
-  animateBy: 'words' as AnimateBy,
-  direction: 'top' as Direction,
+  animateBy: 'words',
+  direction: 'top',
   threshold: 0.1,
   rootMargin: '0px',
   easing: (t: number) => t,
   stepDuration: 0.35
 });
 
-const buildKeyframes = (
-  from: AnimationSnapshot,
-  steps: AnimationSnapshot[]
-): Record<string, Array<string | number>> => {
-  const keys = new Set<string>([...Object.keys(from), ...steps.flatMap(step => Object.keys(step))]);
+const inView = ref(false);
+const rootRef = useTemplateRef<HTMLParagraphElement>('rootRef');
+let observer: IntersectionObserver | null = null;
 
-  const keyframes: Record<string, Array<string | number>> = {};
+onMounted(() => {
+  if (!rootRef.value) return;
 
-  for (const key of keys) {
-    keyframes[key] = [from[key], ...steps.map(step => step[key])];
-  }
+  observer = new IntersectionObserver(
+    ([entry]) => {
+      if (entry.isIntersecting) {
+        inView.value = true;
+        observer?.unobserve(rootRef.value as Element);
+      }
+    },
+    {
+      threshold: props.threshold,
+      rootMargin: props.rootMargin
+    }
+  );
 
-  return keyframes;
-};
+  observer.observe(rootRef.value);
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+});
 
 const elements = computed(() => (props.animateBy === 'words' ? props.text.split(' ') : props.text.split('')));
 
-const defaultFrom = computed<AnimationSnapshot>(() =>
+const defaultFrom = computed(() =>
   props.direction === 'top' ? { filter: 'blur(10px)', opacity: 0, y: -50 } : { filter: 'blur(10px)', opacity: 0, y: 50 }
 );
 
-const defaultTo = computed<AnimationSnapshot[]>(() => [
+const defaultTo = computed(() => [
   {
     filter: 'blur(5px)',
     opacity: 0.5,
@@ -93,71 +111,21 @@ const toSnapshots = computed(() => props.animationTo ?? defaultTo.value);
 
 const stepCount = computed(() => toSnapshots.value.length + 1);
 const totalDuration = computed(() => props.stepDuration * (stepCount.value - 1));
+
 const times = computed(() =>
   Array.from({ length: stepCount.value }, (_, i) => (stepCount.value === 1 ? 0 : i / (stepCount.value - 1)))
 );
 
-const inView = ref(false);
-const animationKey = ref(0);
-const completionFired = ref(false);
-const rootRef = useTemplateRef<HTMLParagraphElement>('rootRef');
-
-let observer: IntersectionObserver | null = null;
-
-const setupObserver = () => {
-  if (!rootRef.value) return;
-
-  observer = new IntersectionObserver(
-    ([entry]) => {
-      if (entry.isIntersecting) {
-        inView.value = true;
-        observer?.unobserve(rootRef.value as Element);
-      }
-    },
-    {
-      threshold: props.threshold,
-      rootMargin: props.rootMargin
-    }
-  );
-
-  observer.observe(rootRef.value);
-};
-
-const getAnimateKeyframes = () => {
-  return buildKeyframes(fromSnapshot.value, toSnapshots.value);
-};
-
-const getTransition = (index: number) => {
-  return {
-    duration: totalDuration.value,
-    times: times.value,
-    delay: (index * props.delay) / 1000,
-    ease: props.easing
-  };
-};
+const getTransition = (index: number): Transition => ({
+  duration: totalDuration.value,
+  times: times.value,
+  delay: (index * props.delay) / 1000,
+  ease: props.easing
+});
 
 const handleAnimationComplete = (index: number) => {
-  if (index === elements.value.length - 1 && !completionFired.value && props.onAnimationComplete) {
-    completionFired.value = true;
-    props.onAnimationComplete();
+  if (index === elements.value.length - 1) {
+    props.onAnimationComplete?.();
   }
 };
-
-onMounted(() => {
-  setupObserver();
-});
-
-onUnmounted(() => {
-  observer?.disconnect();
-});
-
-watch([() => props.threshold, () => props.rootMargin], () => {
-  observer?.disconnect();
-  setupObserver();
-});
-
-watch([() => props.delay, () => props.stepDuration, () => props.animateBy, () => props.direction], () => {
-  animationKey.value++;
-  completionFired.value = false;
-});
 </script>
diff --git a/src/demo/TextAnimations/BlurTextDemo.vue b/src/demo/TextAnimations/BlurTextDemo.vue
index 045f27a..1ef466c 100644
--- a/src/demo/TextAnimations/BlurTextDemo.vue
+++ b/src/demo/TextAnimations/BlurTextDemo.vue
@@ -1,33 +1,24 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container h-[400px] overflow-hidden">
+      <div class="h-[400px] overflow-hidden demo-container">
         <RefreshButton @refresh="forceRerender" />
 
         <BlurText
           :key="rerenderKey"
           text="Isn't this so cool?!"
-          :delay="delay"
-          class-name="blur-text-demo"
           :animate-by="animateBy"
           :direction="direction"
-          :threshold="threshold"
-          :root-margin="rootMargin"
-          :step-duration="stepDuration"
-          @animation-complete="
-            () => {
-              showCallback && showToast();
-            }
-          "
+          :delay="delay"
+          class-name="blur-text-demo"
+          @animation-complete="showToast"
         />
       </div>
 
       <Customize>
-        <PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
-
-        <div class="flex gap-4 flex-wrap">
+        <div class="flex flex-wrap gap-4">
           <button
-            class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-8 px-3 transition-colors cursor-pointer"
+            class="bg-[#0b0b0b] hover:bg-[#222] px-3 border border-[#333] rounded-[10px] h-8 text-white text-xs transition-colors cursor-pointer"
             @click="toggleAnimateBy"
           >
             Animate By:
@@ -35,7 +26,7 @@
           </button>
 
           <button
-            class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-8 px-3 transition-colors cursor-pointer"
+            class="bg-[#0b0b0b] hover:bg-[#222] px-3 border border-[#333] rounded-[10px] h-8 text-white text-xs transition-colors cursor-pointer"
             @click="toggleDirection"
           >
             Direction:
@@ -43,11 +34,15 @@
           </button>
         </div>
 
-        <PreviewSlider title="Delay (ms)" v-model="delay" :min="50" :max="500" :step="10" />
-
-        <PreviewSlider title="Step Duration (s)" v-model="stepDuration" :min="0.1" :max="1" :step="0.05" />
-
-        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
+        <PreviewSlider
+          title="Delay"
+          v-model="delay"
+          :min="50"
+          :max="500"
+          :step="10"
+          value-unit="ms"
+          @update:model-value="forceRerender"
+        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -66,30 +61,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import RefreshButton from '../../components/common/RefreshButton.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 PreviewSwitch from '../../components/common/PreviewSwitch.vue';
-import PreviewSlider from '../../components/common/PreviewSlider.vue';
-import BlurText from '../../content/TextAnimations/BlurText/BlurText.vue';
-import { blurText } from '@/constants/code/TextAnimations/blurTextCode';
-import { useToast } from 'primevue/usetoast';
+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 PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PropTable from '@/components/common/PropTable.vue';
+import RefreshButton from '@/components/common/RefreshButton.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
 import { useForceRerender } from '@/composables/useForceRerender';
+import { blurText } from '@/constants/code/TextAnimations/blurTextCode';
+import BlurText from '@/content/TextAnimations/BlurText/BlurText.vue';
+import { useToast } from 'primevue/usetoast';
+import { ref } from 'vue';
+
+const { rerenderKey, forceRerender } = useForceRerender();
+const toast = useToast();
 
 const animateBy = ref<'words' | 'letters'>('words');
 const direction = ref<'top' | 'bottom'>('top');
 const delay = ref(200);
-const stepDuration = ref(0.35);
-const threshold = ref(0.1);
-const rootMargin = ref('0px');
-const showCallback = ref(true);
-const toast = useToast();
-const { rerenderKey, forceRerender } = useForceRerender();
 
 const toggleAnimateBy = () => {
   animateBy.value = animateBy.value === 'words' ? 'letters' : 'words';
@@ -110,18 +101,23 @@ const showToast = () => {
 };
 
 const propData = [
-  { name: 'text', type: 'string', default: '""', description: 'The text content to animate.' },
+  {
+    name: 'text',
+    type: 'string',
+    default: '""',
+    description: 'The text content to animate.'
+  },
   {
     name: 'animateBy',
     type: 'string',
     default: '"words"',
-    description: 'Determines whether to animate by "words" or "letters".'
+    description: "Determines whether to animate by 'words' or 'letters'."
   },
   {
     name: 'direction',
     type: 'string',
     default: '"top"',
-    description: 'Direction from which the words/letters appear ("top" or "bottom").'
+    description: "Direction from which the words/letters appear ('top' or 'bottom')."
   },
   {
     name: 'delay',
@@ -141,16 +137,12 @@ const propData = [
     default: '0.1',
     description: 'Intersection threshold for triggering the animation.'
   },
-  { name: 'rootMargin', type: 'string', default: '"0px"', description: 'Root margin for the intersection observer.' },
-  { name: 'className', type: 'string', default: '""', description: 'Additional class names to style the component.' },
-  { name: 'animationFrom', type: 'object', default: 'undefined', description: 'Custom initial animation properties.' },
   {
-    name: 'animationTo',
-    type: 'array',
-    default: 'undefined',
-    description: 'Custom target animation properties array.'
+    name: 'rootMargin',
+    type: 'string',
+    default: '"0px"',
+    description: 'Root margin for the intersection observer.'
   },
-  { name: 'easing', type: 'function', default: '(t) => t', description: 'Custom easing function for the animation.' },
   {
     name: 'onAnimationComplete',
     type: 'function',

From 2e39338725b8f3c3098c0d932118ca0149135a0d Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sun, 1 Feb 2026 12:59:28 +0530
Subject: [PATCH 3/9] [ REFACT ] : CircularText Text Animation

---
 package.json                                  |   2 +-
 .../CircularText/CircularText.vue             | 124 +++++++-----------
 src/demo/TextAnimations/CircularTextDemo.vue  |  95 +++++++-------
 3 files changed, 94 insertions(+), 127 deletions(-)

diff --git a/package.json b/package.json
index 11b9f7f..3f5dcfc 100644
--- a/package.json
+++ b/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",
diff --git a/src/content/TextAnimations/CircularText/CircularText.vue b/src/content/TextAnimations/CircularText/CircularText.vue
index 5daea6e..8ae8160 100644
--- a/src/content/TextAnimations/CircularText/CircularText.vue
+++ b/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)
diff --git a/src/demo/TextAnimations/CircularTextDemo.vue b/src/demo/TextAnimations/CircularTextDemo.vue
index 8a8bf23..e70b53f 100644
--- a/src/demo/TextAnimations/CircularTextDemo.vue
+++ b/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>

From f95fef0de072e1dc3a13e6d238f220229e9b8c81 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sun, 1 Feb 2026 13:03:03 +0530
Subject: [PATCH 4/9] [ FIX ] : TextType Text Animation

---
 src/demo/TextAnimations/TextTypeDemo.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/demo/TextAnimations/TextTypeDemo.vue b/src/demo/TextAnimations/TextTypeDemo.vue
index cf4a9c3..8b85d90 100644
--- a/src/demo/TextAnimations/TextTypeDemo.vue
+++ b/src/demo/TextAnimations/TextTypeDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container py-[64px] h-[350px]">
+      <div class="py-[64px] h-[350px] demo-container">
         <TextType
           :key="key"
           :text="texts"
@@ -45,6 +45,7 @@
           :max="150"
           :step="5"
           value-unit="ms"
+          :disabled="!variableSpeedEnabled"
         />
         <PreviewSlider
           v-model="variableSpeedMax"
@@ -53,6 +54,7 @@
           :max="300"
           :step="5"
           value-unit="ms"
+          :disabled="!variableSpeedEnabled"
         />
       </Customize>
 

From 7d1e9b00756fffd5d44439961dad86e785bd61ab Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sun, 1 Feb 2026 13:23:13 +0530
Subject: [PATCH 5/9] [ REFACT ] : ShinyText Text Animation

---
 .../code/TextAnimations/shinyTextCode.ts      |  17 +-
 .../TextAnimations/ShinyText/ShinyText.vue    | 148 ++++++++++++++----
 src/demo/TextAnimations/ShinyTextDemo.vue     | 128 ++++++++++-----
 3 files changed, 221 insertions(+), 72 deletions(-)

diff --git a/src/constants/code/TextAnimations/shinyTextCode.ts b/src/constants/code/TextAnimations/shinyTextCode.ts
index a2952a4..8014f84 100644
--- a/src/constants/code/TextAnimations/shinyTextCode.ts
+++ b/src/constants/code/TextAnimations/shinyTextCode.ts
@@ -1,13 +1,20 @@
-import code from '@content/TextAnimations/ShinyText/ShinyText.vue?raw';
 import { createCodeObject } from '@/types/code';
+import code from '@content/TextAnimations/ShinyText/ShinyText.vue?raw';
 
 export const shinyText = createCodeObject(code, 'TextAnimations/ShinyText', {
+  installation: `npm install motion-v`,
   usage: `<template>
   <ShinyText 
-    text="Just some shiny text!" 
-    :disabled="false" 
-    :speed="3" 
-    class-name="your-custom-class"
+    text="✨ Shiny Text Effect"
+    :speed="2"
+    :delay="0.5"
+    :disabled="false"
+    :color="'#b5b5b5'"
+    :shine-color="'#ffffff'"
+    :spread="120"
+    :direction="'left'"
+    :yoyo="false"
+    :pause-on-hover="false"
   />
 </template>
 
diff --git a/src/content/TextAnimations/ShinyText/ShinyText.vue b/src/content/TextAnimations/ShinyText/ShinyText.vue
index 2545abb..e7c0c30 100644
--- a/src/content/TextAnimations/ShinyText/ShinyText.vue
+++ b/src/content/TextAnimations/ShinyText/ShinyText.vue
@@ -1,49 +1,135 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { Motion, useAnimationFrame, useMotionValue, useTransform } from 'motion-v';
+import { computed, ref, watch } from 'vue';
 
 interface ShinyTextProps {
   text: string;
   disabled?: boolean;
   speed?: number;
   className?: string;
+  color?: string;
+  shineColor?: string;
+  spread?: number;
+  yoyo?: boolean;
+  pauseOnHover?: boolean;
+  direction?: 'left' | 'right';
+  delay?: number;
 }
 
 const props = withDefaults(defineProps<ShinyTextProps>(), {
-  text: '',
   disabled: false,
-  speed: 5,
-  className: ''
+  speed: 2,
+  className: '',
+  color: '#b5b5b5',
+  shineColor: '#ffffff',
+  spread: 120,
+  yoyo: false,
+  pauseOnHover: false,
+  direction: 'left',
+  delay: 0
 });
 
-const animationDuration = computed(() => `${props.speed}s`);
+const isPaused = ref(false);
+const progress = useMotionValue(0);
+const elapsedRef = ref(0);
+const lastTimeRef = ref<number | null>(null);
+const directionRef = ref(props.direction === 'left' ? 1 : -1);
+
+const animationDuration = computed(() => props.speed * 1000);
+const delayDuration = computed(() => props.delay * 1000);
+
+useAnimationFrame(time => {
+  if (props.disabled || isPaused.value) {
+    lastTimeRef.value = null;
+    return;
+  }
+
+  if (lastTimeRef.value === null) {
+    lastTimeRef.value = time;
+    return;
+  }
+
+  const deltaTime = time - lastTimeRef.value;
+  lastTimeRef.value = time;
+
+  elapsedRef.value += deltaTime;
+
+  // Animation goes from 0 to 100
+  if (props.yoyo) {
+    const cycleDuration = animationDuration.value + delayDuration.value;
+    const fullCycle = cycleDuration * 2;
+    const cycleTime = elapsedRef.value % fullCycle;
+
+    if (cycleTime < animationDuration.value) {
+      // Forward animation: 0 -> 100
+      const p = (cycleTime / animationDuration.value) * 100;
+      progress.set(directionRef.value === 1 ? p : 100 - p);
+    } else if (cycleTime < cycleDuration) {
+      // Delay at end
+      progress.set(directionRef.value === 1 ? 100 : 0);
+    } else if (cycleTime < cycleDuration + animationDuration.value) {
+      // Reverse animation: 100 -> 0
+      const reverseTime = cycleTime - cycleDuration;
+      const p = 100 - (reverseTime / animationDuration.value) * 100;
+      progress.set(directionRef.value === 1 ? p : 100 - p);
+    } else {
+      // Delay at start
+      progress.set(directionRef.value === 1 ? 0 : 100);
+    }
+  } else {
+    const cycleDuration = animationDuration.value + delayDuration.value;
+    const cycleTime = elapsedRef.value % cycleDuration;
+
+    if (cycleTime < animationDuration.value) {
+      // Animation phase: 0 -> 100
+      const p = (cycleTime / animationDuration.value) * 100;
+      progress.set(directionRef.value === 1 ? p : 100 - p);
+    } else {
+      // Delay phase - hold at end (shine off-screen)
+      progress.set(directionRef.value === 1 ? 100 : 0);
+    }
+  }
+});
+
+watch(
+  () => props.direction,
+  () => {
+    directionRef.value = props.direction === 'left' ? 1 : -1;
+    elapsedRef.value = 0;
+    progress.set(0);
+  },
+  {
+    immediate: true
+  }
+);
+
+const backgroundPosition = useTransform(progress, p => `${150 - p * 2}% center`);
+
+const handleMouseEnter = () => {
+  if (props.pauseOnHover) isPaused.value = true;
+};
+
+const handleMouseLeave = () => {
+  if (props.pauseOnHover) isPaused.value = false;
+};
+
+const gradientStyle = computed(() => ({
+  backgroundImage: `linear-gradient(${props.spread}deg, ${props.color} 0%, ${props.color} 35%, ${props.shineColor} 50%, ${props.color} 65%, ${props.color} 100%)`,
+  backgroundSize: '200% auto',
+  WebkitBackgroundClip: 'text',
+  backgroundClip: 'text',
+  WebkitTextFillColor: 'transparent'
+}));
 </script>
 
 <template>
-  <div
-    :class="`text-[#b5b5b5a4] bg-clip-text inline-block ${!props.disabled ? 'animate-shine' : ''} ${props.className}`"
-    :style="{
-      backgroundImage:
-        'linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 60%)',
-      backgroundSize: '200% 100%',
-      WebkitBackgroundClip: 'text',
-      animationDuration: animationDuration
-    }"
+  <Motion
+    tag="span"
+    :class="['inline-block', className]"
+    :style="{ ...gradientStyle, backgroundPosition }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
-    {{ props.text }}
-  </div>
+    {{ text }}
+  </Motion>
 </template>
-
-<style scoped>
-@keyframes shine {
-  0% {
-    background-position: 100%;
-  }
-  100% {
-    background-position: -100%;
-  }
-}
-
-.animate-shine {
-  animation: shine 5s linear infinite;
-}
-</style>
diff --git a/src/demo/TextAnimations/ShinyTextDemo.vue b/src/demo/TextAnimations/ShinyTextDemo.vue
index 90ab624..e87205f 100644
--- a/src/demo/TextAnimations/ShinyTextDemo.vue
+++ b/src/demo/TextAnimations/ShinyTextDemo.vue
@@ -1,33 +1,31 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <h2 class="demo-title-extra">Basic</h2>
-
-      <div class="demo-container h-[200px]">
-        <ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" />
-      </div>
-
-      <h2 class="demo-title-extra">Button Text</h2>
-
-      <div class="demo-container h-[200px]">
-        <div class="shiny-button">
-          <ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
-        </div>
-      </div>
-
-      <h2 class="demo-title-extra">Configurable Speed</h2>
-
-      <div class="demo-container h-[200px]">
+      <div class="h-[400px] text-3xl demo-container">
         <ShinyText
-          :text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
-          :disabled="false"
+          text="✨ Shiny Text Effect"
+          :delay="delay"
           :speed="speed"
-          class-name="shiny-text-demo"
+          :color="color"
+          :shine-color="shineColor"
+          :spread="spread"
+          :direction="direction"
+          :yoyo="yoyo"
+          :pause-on-hover="pauseOnHover"
+          :disabled="disabled"
         />
       </div>
 
       <Customize>
-        <PreviewSlider title="Animation Duration" v-model="speed" :min="1" :max="5" :step="0.1" value-unit="s" />
+        <PreviewSlider title="Speed" v-model="speed" :min="0.5" :max="5" :step="0.1" value-unit="s" />
+        <PreviewSlider title="Delay" v-model="delay" :min="0" :max="3" :step="0.1" value-unit="s" />
+        <PreviewSlider title="Spread" v-model="spread" :min="0" :max="180" :step="5" value-unit="deg" />
+        <PreviewColor title="Color" v-model="color" class="mb-2" />
+        <PreviewColor title="Shine Color" v-model="shineColor" class="mb-2" />
+        <PreviewSelect title="Direction" v-model="direction" :options="directionOptions" />
+        <PreviewSwitch title="Yoyo Mode" v-model="yoyo" />
+        <PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
+        <PreviewSwitch title="Disabled" v-model="disabled" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -44,17 +42,33 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.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 ShinyText from '../../content/TextAnimations/ShinyText/ShinyText.vue';
+import CliInstallation from '@/components/code/CliInstallation.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
+import Customize from '@/components/common/Customize.vue';
+import PreviewColor from '@/components/common/PreviewColor.vue';
+import PreviewSelect from '@/components/common/PreviewSelect.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
+import PropTable from '@/components/common/PropTable.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
 import { shinyText } from '@/constants/code/TextAnimations/shinyTextCode';
+import ShinyText from '@/content/TextAnimations/ShinyText/ShinyText.vue';
+import { ref } from 'vue';
 
-const speed = ref(3);
+const speed = ref(2);
+const delay = ref(0);
+const color = ref('#b5b5b5');
+const shineColor = ref('#ffffff');
+const spread = ref(120);
+const direction = ref<'left' | 'right'>('left');
+const yoyo = ref(false);
+const pauseOnHover = ref(false);
+const disabled = ref(false);
+
+const directionOptions = [
+  { value: 'left', label: 'Left' },
+  { value: 'right', label: 'Right' }
+];
 
 const propData = [
   {
@@ -64,16 +78,58 @@ const propData = [
     description: 'The text to be displayed with the shiny effect.'
   },
   {
-    name: 'disabled',
-    type: 'boolean',
-    default: 'false',
-    description: 'Disables the shiny effect when set to true.'
+    name: 'color',
+    type: 'string',
+    default: '"#b5b5b5"',
+    description: 'The base color of the text.'
+  },
+  {
+    name: 'shineColor',
+    type: 'string',
+    default: '"#ffffff"',
+    description: 'The color of the shine/highlight effect.'
   },
   {
     name: 'speed',
     type: 'number',
-    default: '5',
-    description: 'Specifies the duration of the animation in seconds.'
+    default: '2',
+    description: 'Duration of one animation cycle in seconds.'
+  },
+  {
+    name: 'delay',
+    type: 'number',
+    default: '0',
+    description: 'Pause duration (in seconds) between animation cycles.'
+  },
+  {
+    name: 'spread',
+    type: 'number',
+    default: '120',
+    description: 'The angle (in degrees) of the gradient spread.'
+  },
+  {
+    name: 'yoyo',
+    type: 'boolean',
+    default: 'false',
+    description: 'If true, the animation reverses direction instead of looping.'
+  },
+  {
+    name: 'pauseOnHover',
+    type: 'boolean',
+    default: 'false',
+    description: 'Pauses the animation when the user hovers over the text.'
+  },
+  {
+    name: 'direction',
+    type: "'left' | 'right'",
+    default: '"left"',
+    description: 'The direction the shine moves across the text.'
+  },
+  {
+    name: 'disabled',
+    type: 'boolean',
+    default: 'false',
+    description: 'Disables the shiny effect when set to true.'
   },
   {
     name: 'className',

From dbcaa6f488e6fc1c8ddf1d737bc4a014e2ff2f3e Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sun, 1 Feb 2026 13:47:32 +0530
Subject: [PATCH 6/9] [ REFACT ] : FuzzyText Text Animation

---
 .../code/TextAnimations/fuzzyTextCode.ts      |   9 +-
 .../TextAnimations/FuzzyText/FuzzyText.vue    | 358 ++++++++----------
 src/demo/TextAnimations/FuzzyTextDemo.vue     | 171 +++++++--
 3 files changed, 314 insertions(+), 224 deletions(-)

diff --git a/src/constants/code/TextAnimations/fuzzyTextCode.ts b/src/constants/code/TextAnimations/fuzzyTextCode.ts
index 4a2aa4b..85519d5 100644
--- a/src/constants/code/TextAnimations/fuzzyTextCode.ts
+++ b/src/constants/code/TextAnimations/fuzzyTextCode.ts
@@ -1,17 +1,18 @@
-import code from '@content/TextAnimations/FuzzyText/FuzzyText.vue?raw';
 import { createCodeObject } from '@/types/code';
+import code from '@content/TextAnimations/FuzzyText/FuzzyText.vue?raw';
 
 export const fuzzyText = createCodeObject(code, 'TextAnimations/FuzzyText', {
   usage: `<template>
   <FuzzyText
-    text="404"
     :font-size="140"
-    font-weight="900"
+    :font-weight="900"
     color="#fff"
     :enable-hover="true"
     :base-intensity="0.18"
     :hover-intensity="0.5"
-  />
+  >
+    404
+  </FuzzyText>
 </template>
 
 <script setup lang="ts">
diff --git a/src/content/TextAnimations/FuzzyText/FuzzyText.vue b/src/content/TextAnimations/FuzzyText/FuzzyText.vue
index 6637e4f..5212a36 100644
--- a/src/content/TextAnimations/FuzzyText/FuzzyText.vue
+++ b/src/content/TextAnimations/FuzzyText/FuzzyText.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
+import { computed, onBeforeUnmount, onMounted, useSlots, useTemplateRef, watch } from 'vue';
 
 interface FuzzyTextProps {
-  text: string;
   fontSize?: number | string;
   fontWeight?: string | number;
   fontFamily?: string;
@@ -10,78 +9,52 @@ interface FuzzyTextProps {
   enableHover?: boolean;
   baseIntensity?: number;
   hoverIntensity?: number;
+  fuzzRange?: number;
+  fps?: number;
+  direction?: 'horizontal' | 'vertical' | 'both';
+  transitionDuration?: number;
+  clickEffect?: boolean;
+  glitchMode?: boolean;
+  glitchInterval?: number;
+  glitchDuration?: number;
+  gradient?: string[] | null;
+  letterSpacing?: number;
+  className?: string;
 }
 
 const props = withDefaults(defineProps<FuzzyTextProps>(), {
-  text: '',
   fontSize: 'clamp(2rem, 8vw, 8rem)',
   fontWeight: 900,
   fontFamily: 'inherit',
   color: '#fff',
   enableHover: true,
   baseIntensity: 0.18,
-  hoverIntensity: 0.5
+  hoverIntensity: 0.5,
+  fuzzRange: 30,
+  fps: 60,
+  direction: 'horizontal',
+  transitionDuration: 0,
+  clickEffect: false,
+  glitchMode: false,
+  glitchInterval: 2000,
+  glitchDuration: 200,
+  gradient: null,
+  letterSpacing: 0,
+  className: ''
 });
 
-const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
+const canvasRef = useTemplateRef<HTMLCanvasElement & { cleanupFuzzyText?: () => void }>('canvasRef');
+const slots = useSlots();
+
 let animationFrameId: number;
-let isCancelled = false;
-let cleanup: (() => void) | null = null;
+let glitchTimeoutId: ReturnType<typeof setTimeout>;
+let glitchEndTimeoutId: ReturnType<typeof setTimeout>;
+let clickTimeoutId: ReturnType<typeof setTimeout>;
+let cancelled = false;
 
-const waitForFont = async (fontFamily: string, fontWeight: string | number, fontSize: string): Promise<boolean> => {
-  if (document.fonts?.check) {
-    const fontString = `${fontWeight} ${fontSize} ${fontFamily}`;
-
-    if (document.fonts.check(fontString)) {
-      return true;
-    }
-
-    try {
-      await document.fonts.load(fontString);
-      return document.fonts.check(fontString);
-    } catch (error) {
-      console.warn('Font loading failed:', error);
-      return false;
-    }
-  }
-
-  return new Promise(resolve => {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-      resolve(false);
-      return;
-    }
-
-    ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
-    const testWidth = ctx.measureText('M').width;
-
-    let attempts = 0;
-    const checkFont = () => {
-      ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
-      const newWidth = ctx.measureText('M').width;
-
-      if (newWidth !== testWidth && newWidth > 0) {
-        resolve(true);
-      } else if (attempts < 20) {
-        attempts++;
-        setTimeout(checkFont, 50);
-      } else {
-        resolve(false);
-      }
-    };
-
-    setTimeout(checkFont, 10);
-  });
-};
-
-const initCanvas = async () => {
-  if (document.fonts?.ready) {
-    await document.fonts.ready;
-  }
-
-  if (isCancelled) return;
+const text = computed(() => (slots.default?.() ?? []).map(v => v.children).join(''));
 
+const init = async () => {
   const canvas = canvasRef.value;
   if (!canvas) return;
 
@@ -92,184 +65,185 @@ const initCanvas = async () => {
     props.fontFamily === 'inherit' ? window.getComputedStyle(canvas).fontFamily || 'sans-serif' : props.fontFamily;
 
   const fontSizeStr = typeof props.fontSize === 'number' ? `${props.fontSize}px` : props.fontSize;
-  let numericFontSize: number;
 
+  const fontString = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
+
+  try {
+    await document.fonts.load(fontString);
+  } catch {
+    await document.fonts.ready;
+  }
+
+  if (cancelled) return;
+
+  let numericFontSize: number;
   if (typeof props.fontSize === 'number') {
     numericFontSize = props.fontSize;
   } else {
     const temp = document.createElement('span');
     temp.style.fontSize = props.fontSize;
-    temp.style.fontFamily = computedFontFamily;
     document.body.appendChild(temp);
-    const computedSize = window.getComputedStyle(temp).fontSize;
-    numericFontSize = parseFloat(computedSize);
+    numericFontSize = parseFloat(getComputedStyle(temp).fontSize);
     document.body.removeChild(temp);
   }
 
-  const fontLoaded = await waitForFont(computedFontFamily, props.fontWeight, fontSizeStr);
-  if (!fontLoaded) {
-    console.warn(`Font not loaded: ${computedFontFamily}`);
-  }
-
-  const text = props.text;
-
   const offscreen = document.createElement('canvas');
-  const offCtx = offscreen.getContext('2d');
-  if (!offCtx) return;
-
-  const fontString = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
+  const offCtx = offscreen.getContext('2d')!;
   offCtx.font = fontString;
+  offCtx.textBaseline = 'alphabetic';
 
-  const testMetrics = offCtx.measureText('M');
-  if (testMetrics.width === 0) {
-    setTimeout(() => {
-      if (!isCancelled) {
-        initCanvas();
-      }
-    }, 100);
-    return;
+  let totalWidth = 0;
+  if (props.letterSpacing !== 0) {
+    for (const char of text.value) {
+      totalWidth += offCtx.measureText(char).width + props.letterSpacing;
+    }
+    totalWidth -= props.letterSpacing;
+  } else {
+    totalWidth = offCtx.measureText(text.value).width;
   }
 
+  const metrics = offCtx.measureText(text.value);
+  const ascent = metrics.actualBoundingBoxAscent ?? numericFontSize;
+  const descent = metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2;
+  const height = Math.ceil(ascent + descent);
+
+  offscreen.width = Math.ceil(totalWidth) + 20;
+  offscreen.height = height;
+
+  offCtx.font = fontString;
   offCtx.textBaseline = 'alphabetic';
-  const metrics = offCtx.measureText(text);
 
-  const actualLeft = metrics.actualBoundingBoxLeft ?? 0;
-  const actualRight = metrics.actualBoundingBoxRight ?? metrics.width;
-  const actualAscent = metrics.actualBoundingBoxAscent ?? numericFontSize;
-  const actualDescent = metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2;
+  if (props.gradient && props.gradient.length >= 2) {
+    const grad = offCtx.createLinearGradient(0, 0, offscreen.width, 0);
+    props.gradient.forEach((c, i) => grad.addColorStop(i / (props.gradient!.length - 1), c));
+    offCtx.fillStyle = grad;
+  } else {
+    offCtx.fillStyle = props.color;
+  }
 
-  const textBoundingWidth = Math.ceil(actualLeft + actualRight);
-  const tightHeight = Math.ceil(actualAscent + actualDescent);
+  let x = 10;
+  for (const char of text.value) {
+    offCtx.fillText(char, x, ascent);
+    x += offCtx.measureText(char).width + props.letterSpacing;
+  }
 
-  const extraWidthBuffer = 10;
-  const offscreenWidth = textBoundingWidth + extraWidthBuffer;
+  const marginX = props.fuzzRange + 20;
+  const marginY = props.direction === 'vertical' || props.direction === 'both' ? props.fuzzRange + 10 : 0;
 
-  offscreen.width = offscreenWidth;
-  offscreen.height = tightHeight;
-
-  const xOffset = extraWidthBuffer / 2;
-  offCtx.font = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
-  offCtx.textBaseline = 'alphabetic';
-  offCtx.fillStyle = props.color;
-  offCtx.fillText(text, xOffset - actualLeft, actualAscent);
-
-  const horizontalMargin = 50;
-  const verticalMargin = 0;
-  canvas.width = offscreenWidth + horizontalMargin * 2;
-  canvas.height = tightHeight + verticalMargin * 2;
-  ctx.translate(horizontalMargin, verticalMargin);
-
-  const interactiveLeft = horizontalMargin + xOffset;
-  const interactiveTop = verticalMargin;
-  const interactiveRight = interactiveLeft + textBoundingWidth;
-  const interactiveBottom = interactiveTop + tightHeight;
+  canvas.width = offscreen.width + marginX * 2;
+  canvas.height = offscreen.height + marginY * 2;
+  ctx.translate(marginX, marginY);
 
   let isHovering = false;
-  const fuzzRange = 30;
+  let isClicking = false;
+  let isGlitching = false;
+  let currentIntensity = props.baseIntensity;
+  let targetIntensity = props.baseIntensity;
+  let lastFrameTime = 0;
+  const frameDuration = 1000 / props.fps;
 
-  const run = () => {
-    if (isCancelled) return;
-    ctx.clearRect(-fuzzRange, -fuzzRange, offscreenWidth + 2 * fuzzRange, tightHeight + 2 * fuzzRange);
-    const intensity = isHovering ? props.hoverIntensity : props.baseIntensity;
-    for (let j = 0; j < tightHeight; j++) {
-      const dx = Math.floor(intensity * (Math.random() - 0.5) * fuzzRange);
-      ctx.drawImage(offscreen, 0, j, offscreenWidth, 1, dx, j, offscreenWidth, 1);
+  const startGlitch = () => {
+    if (!props.glitchMode || cancelled) return;
+    glitchTimeoutId = setTimeout(() => {
+      isGlitching = true;
+      glitchEndTimeoutId = setTimeout(() => {
+        isGlitching = false;
+        startGlitch();
+      }, props.glitchDuration);
+    }, props.glitchInterval);
+  };
+
+  if (props.glitchMode) startGlitch();
+
+  const run = (ts: number) => {
+    if (cancelled) return;
+
+    if (ts - lastFrameTime < frameDuration) {
+      animationFrameId = requestAnimationFrame(run);
+      return;
     }
-    animationFrameId = window.requestAnimationFrame(run);
+
+    lastFrameTime = ts;
+    ctx.clearRect(-marginX, -marginY, offscreen.width + marginX * 2, offscreen.height + marginY * 2);
+
+    targetIntensity = isClicking || isGlitching ? 1 : isHovering ? props.hoverIntensity : props.baseIntensity;
+
+    if (props.transitionDuration > 0) {
+      const step = 1 / (props.transitionDuration / frameDuration);
+      currentIntensity += Math.sign(targetIntensity - currentIntensity) * step;
+      currentIntensity = Math.min(
+        Math.max(currentIntensity, Math.min(targetIntensity, currentIntensity)),
+        Math.max(targetIntensity, currentIntensity)
+      );
+    } else {
+      currentIntensity = targetIntensity;
+    }
+
+    for (let y = 0; y < offscreen.height; y++) {
+      const dx = props.direction !== 'vertical' ? (Math.random() - 0.5) * currentIntensity * props.fuzzRange : 0;
+      const dy =
+        props.direction !== 'horizontal' ? (Math.random() - 0.5) * currentIntensity * props.fuzzRange * 0.5 : 0;
+
+      ctx.drawImage(offscreen, 0, y, offscreen.width, 1, dx, y + dy, offscreen.width, 1);
+    }
+
+    animationFrameId = requestAnimationFrame(run);
   };
 
-  run();
+  animationFrameId = requestAnimationFrame(run);
 
-  const isInsideTextArea = (x: number, y: number) =>
-    x >= interactiveLeft && x <= interactiveRight && y >= interactiveTop && y <= interactiveBottom;
+  const rectCheck = (x: number, y: number) =>
+    x >= marginX && x <= marginX + offscreen.width && y >= marginY && y <= marginY + offscreen.height;
 
-  const handleMouseMove = (e: MouseEvent) => {
+  const mouseMove = (e: MouseEvent) => {
     if (!props.enableHover) return;
     const rect = canvas.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    isHovering = isInsideTextArea(x, y);
+    isHovering = rectCheck(e.clientX - rect.left, e.clientY - rect.top);
   };
 
-  const handleMouseLeave = () => {
-    isHovering = false;
-  };
+  const mouseLeave = () => (isHovering = false);
 
-  const handleTouchMove = (e: TouchEvent) => {
-    if (!props.enableHover) return;
-    e.preventDefault();
-    const rect = canvas.getBoundingClientRect();
-    const touch = e.touches[0];
-    const x = touch.clientX - rect.left;
-    const y = touch.clientY - rect.top;
-    isHovering = isInsideTextArea(x, y);
-  };
-
-  const handleTouchEnd = () => {
-    isHovering = false;
+  const click = () => {
+    if (!props.clickEffect) return;
+    isClicking = true;
+    clearTimeout(clickTimeoutId);
+    clickTimeoutId = setTimeout(() => (isClicking = false), 150);
   };
 
   if (props.enableHover) {
-    canvas.addEventListener('mousemove', handleMouseMove);
-    canvas.addEventListener('mouseleave', handleMouseLeave);
-    canvas.addEventListener('touchmove', handleTouchMove, { passive: false });
-    canvas.addEventListener('touchend', handleTouchEnd);
+    canvas.addEventListener('mousemove', mouseMove);
+    canvas.addEventListener('mouseleave', mouseLeave);
   }
 
-  cleanup = () => {
-    window.cancelAnimationFrame(animationFrameId);
-    if (props.enableHover) {
-      canvas.removeEventListener('mousemove', handleMouseMove);
-      canvas.removeEventListener('mouseleave', handleMouseLeave);
-      canvas.removeEventListener('touchmove', handleTouchMove);
-      canvas.removeEventListener('touchend', handleTouchEnd);
-    }
-  };
+  if (props.clickEffect) {
+    canvas.addEventListener('click', click);
+  }
+
+  onBeforeUnmount(() => {
+    cancelled = true;
+    cancelAnimationFrame(animationFrameId);
+    clearTimeout(glitchTimeoutId);
+    clearTimeout(glitchEndTimeoutId);
+    clearTimeout(clickTimeoutId);
+    canvas.removeEventListener('mousemove', mouseMove);
+    canvas.removeEventListener('mouseleave', mouseLeave);
+    canvas.removeEventListener('click', click);
+  });
 };
 
-onMounted(() => {
-  nextTick(() => {
-    initCanvas();
-  });
-});
-
-onUnmounted(() => {
-  isCancelled = true;
-  if (animationFrameId) {
-    window.cancelAnimationFrame(animationFrameId);
-  }
-  if (cleanup) {
-    cleanup();
-  }
-});
+onMounted(init);
 
 watch(
-  [
-    () => props.text,
-    () => props.fontSize,
-    () => props.fontWeight,
-    () => props.fontFamily,
-    () => props.color,
-    () => props.enableHover,
-    () => props.baseIntensity,
-    () => props.hoverIntensity
-  ],
+  () => ({ ...props, text: text.value }),
   () => {
-    isCancelled = true;
-    if (animationFrameId) {
-      window.cancelAnimationFrame(animationFrameId);
-    }
-    if (cleanup) {
-      cleanup();
-    }
-    isCancelled = false;
-    nextTick(() => {
-      initCanvas();
-    });
+    cancelled = true;
+    cancelAnimationFrame(animationFrameId);
+    cancelled = false;
+    init();
   }
 );
 </script>
 
 <template>
-  <canvas ref="canvasRef" />
+  <canvas ref="canvasRef" :class="className" />
 </template>
diff --git a/src/demo/TextAnimations/FuzzyTextDemo.vue b/src/demo/TextAnimations/FuzzyTextDemo.vue
index 72e6e8c..c00ef8b 100644
--- a/src/demo/TextAnimations/FuzzyTextDemo.vue
+++ b/src/demo/TextAnimations/FuzzyTextDemo.vue
@@ -1,37 +1,74 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container h-[500px] overflow-hidden">
-        <div class="flex flex-col items-center justify-center h-full">
+      <div class="h-[500px] overflow-hidden demo-container">
+        <div class="flex flex-col justify-center items-center h-full">
           <FuzzyText
-            :key="`main-${rerenderKey}`"
-            text="404"
             :base-intensity="baseIntensity"
             :hover-intensity="hoverIntensity"
             :enable-hover="enableHover"
+            :fuzz-range="fuzzRange"
+            :fps="fps"
+            :direction="direction"
+            :transition-duration="transitionDuration"
+            :click-effect="clickEffect"
+            :glitch-mode="glitchMode"
+            :glitch-interval="glitchInterval"
+            :glitch-duration="glitchDuration"
+            :letter-spacing="letterSpacing"
             :font-size="140"
-          />
-
+          >
+            404
+          </FuzzyText>
           <div class="my-1" />
-
           <FuzzyText
-            :key="`sub-${rerenderKey}`"
-            text="not found"
             :base-intensity="baseIntensity"
             :hover-intensity="hoverIntensity"
             :enable-hover="enableHover"
+            :fuzz-range="fuzzRange"
+            :fps="fps"
+            :direction="direction"
+            :transition-duration="transitionDuration"
+            :click-effect="clickEffect"
+            :glitch-mode="glitchMode"
+            :glitch-interval="glitchInterval"
+            :glitch-duration="glitchDuration"
+            :letter-spacing="letterSpacing"
             :font-size="70"
             font-family="Gochi Hand"
-          />
+          >
+            not found
+          </FuzzyText>
         </div>
       </div>
 
       <Customize>
         <PreviewSlider title="Base Intensity" v-model="baseIntensity" :min="0" :max="1" :step="0.01" />
-
         <PreviewSlider title="Hover Intensity" v-model="hoverIntensity" :min="0" :max="2" :step="0.01" />
-
+        <PreviewSlider title="Fuzz Range" v-model="fuzzRange" :min="5" :max="100" :step="1" />
+        <PreviewSlider title="FPS" v-model="fps" :min="10" :max="120" :step="5" />
+        <PreviewSlider title="Transition Duration" v-model="transitionDuration" :min="0" :max="60" :step="1" />
+        <PreviewSlider title="Letter Spacing" v-model="letterSpacing" :min="-10" :max="50" :step="1" />
+        <PreviewSelect title="Direction" v-model="direction" :options="directionOptions" />
         <PreviewSwitch title="Enable Hover" v-model="enableHover" />
+        <PreviewSwitch title="Click Effect" v-model="clickEffect" />
+        <PreviewSwitch title="Glitch Mode" v-model="glitchMode" />
+        <PreviewSlider
+          title="Glitch Interval"
+          v-model="glitchInterval"
+          :min="500"
+          :max="5000"
+          :step="100"
+          :disabled="!glitchMode"
+        />
+        <PreviewSlider
+          title="Glitch Duration"
+          v-model="glitchDuration"
+          :min="50"
+          :max="1000"
+          :step="50"
+          :disabled="!glitchMode"
+        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -48,35 +85,47 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.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 PreviewSwitch from '../../components/common/PreviewSwitch.vue';
-import FuzzyText from '../../content/TextAnimations/FuzzyText/FuzzyText.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 PreviewSwitch from '@/components/common/PreviewSwitch.vue';
+import PropTable from '@/components/common/PropTable.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
 import { fuzzyText } from '@/constants/code/TextAnimations/fuzzyTextCode';
-import { useForceRerender } from '@/composables/useForceRerender';
+import FuzzyText from '@/content/TextAnimations/FuzzyText/FuzzyText.vue';
+import { ref } from 'vue';
 
 const baseIntensity = ref(0.2);
 const hoverIntensity = ref(0.5);
 const enableHover = ref(true);
+const fuzzRange = ref(30);
+const fps = ref(60);
+const direction = ref<'horizontal' | 'vertical' | 'both'>('horizontal');
+const transitionDuration = ref(0);
+const clickEffect = ref(false);
+const glitchMode = ref(false);
+const glitchInterval = ref(2000);
+const glitchDuration = ref(200);
+const letterSpacing = ref(0);
 
-const { rerenderKey } = useForceRerender();
+const directionOptions = [
+  { value: 'horizontal', label: 'Horizontal' },
+  { value: 'vertical', label: 'Vertical' },
+  { value: 'both', label: 'Both' }
+];
 
 const propData = [
   {
-    name: 'text',
+    name: 'slot',
     type: 'string',
-    default: '""',
+    default: '',
     description: 'The text content to display inside the fuzzy text component.'
   },
   {
     name: 'fontSize',
     type: 'number | string',
-    default: '"clamp(2rem, 8vw, 8rem)"',
+    default: `"clamp(2rem, 8vw, 8rem)"`,
     description:
       'Specifies the font size of the text. Accepts any valid CSS font-size value or a number (interpreted as pixels).'
   },
@@ -89,8 +138,8 @@ const propData = [
   {
     name: 'fontFamily',
     type: 'string',
-    default: '"inherit"',
-    description: 'Specifies the font family of the text. "inherit" uses the computed style from the parent.'
+    default: `"inherit"`,
+    description: "Specifies the font family of the text. 'inherit' uses the computed style from the parent."
   },
   {
     name: 'color',
@@ -115,6 +164,72 @@ const propData = [
     type: 'number',
     default: '0.5',
     description: 'The fuzz intensity when the text is hovered.'
+  },
+  {
+    name: 'fuzzRange',
+    type: 'number',
+    default: '30',
+    description: 'Maximum pixel displacement for the fuzzy effect.'
+  },
+  {
+    name: 'fps',
+    type: 'number',
+    default: '60',
+    description: 'Frame rate cap for the animation. Lower values reduce CPU usage.'
+  },
+  {
+    name: 'direction',
+    type: `'horizontal' | 'vertical' | 'both'`,
+    default: `'horizontal'`,
+    description: 'The axis/axes for the fuzzy displacement effect.'
+  },
+  {
+    name: 'transitionDuration',
+    type: 'number',
+    default: '0',
+    description: 'Number of frames to ease between intensity states for smooth transitions.'
+  },
+  {
+    name: 'clickEffect',
+    type: 'boolean',
+    default: 'false',
+    description: 'Enables a momentary burst of maximum intensity on click.'
+  },
+  {
+    name: 'glitchMode',
+    type: 'boolean',
+    default: 'false',
+    description: 'Enables periodic random intensity spikes for a glitch effect.'
+  },
+  {
+    name: 'glitchInterval',
+    type: 'number',
+    default: '2000',
+    description: 'Milliseconds between glitch bursts when glitchMode is enabled.'
+  },
+  {
+    name: 'glitchDuration',
+    type: 'number',
+    default: '200',
+    description: 'Milliseconds duration of each glitch burst.'
+  },
+  {
+    name: 'gradient',
+    type: 'string[] | null',
+    default: 'null',
+    description: 'Array of colors to create a gradient text effect (e.g. ["#ff0000", "#00ff00"]).'
+  },
+  {
+    name: 'letterSpacing',
+    type: 'number',
+    default: '0',
+    description: 'Extra pixels between characters.'
+  },
+  {
+    name: 'className',
+    type: 'string',
+    default: `''`,
+    description: 'CSS class for the canvas element.'
   }
 ];
 </script>

From 80c42e7af4bdd41f775f29e8b3a425aca9a52a49 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sun, 1 Feb 2026 17:24:20 +0530
Subject: [PATCH 7/9] [ REFACT ] : GradientText Text Animation

---
 .../code/TextAnimations/gradientTextCode.ts   |  15 +-
 .../GradientText/GradientText.vue             | 161 ++++++++++-----
 src/demo/TextAnimations/GradientTextDemo.vue  | 188 ++++++++++++------
 3 files changed, 244 insertions(+), 120 deletions(-)

diff --git a/src/constants/code/TextAnimations/gradientTextCode.ts b/src/constants/code/TextAnimations/gradientTextCode.ts
index 19fc948..efeadfb 100644
--- a/src/constants/code/TextAnimations/gradientTextCode.ts
+++ b/src/constants/code/TextAnimations/gradientTextCode.ts
@@ -1,15 +1,18 @@
-import code from '@content/TextAnimations/GradientText/GradientText.vue?raw';
 import { createCodeObject } from '@/types/code';
+import code from '@content/TextAnimations/GradientText/GradientText.vue?raw';
 
 export const gradientText = createCodeObject(code, 'TextAnimations/GradientText', {
-  usage: `<template>
+  installation: `npm install motion-v`,
+  usage: `// For a smoother animation, the gradient should start and end with the same color
+<template>
   <GradientText
-    text="Add a splash of color!"
-    :colors="['#ffaa40', '#9c40ff', '#ffaa40']"
-    :animation-speed="8"
+    :colors="['#27FF64', '#27FF64', '#A0FFBC']"
+    :animation-speed="3"
     :show-border="false"
     class-name="your-custom-class"
-  />
+  >
+    Add a splash of color!
+  </GradientText>
 </template>
 
 <script setup lang="ts">
diff --git a/src/content/TextAnimations/GradientText/GradientText.vue b/src/content/TextAnimations/GradientText/GradientText.vue
index 6e19415..2fb1044 100644
--- a/src/content/TextAnimations/GradientText/GradientText.vue
+++ b/src/content/TextAnimations/GradientText/GradientText.vue
@@ -1,75 +1,140 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { Motion, useAnimationFrame, useMotionValue, useTransform } from 'motion-v';
+import { computed, ref, useSlots } from 'vue';
 
 interface GradientTextProps {
-  text: string;
   className?: string;
   colors?: string[];
   animationSpeed?: number;
   showBorder?: boolean;
+  direction?: 'horizontal' | 'vertical' | 'diagonal';
+  pauseOnHover?: boolean;
+  yoyo?: boolean;
 }
 
 const props = withDefaults(defineProps<GradientTextProps>(), {
-  text: '',
   className: '',
-  colors: () => ['#ffaa40', '#9c40ff', '#ffaa40'],
+  colors: () => ['#27FF64', '#27FF64', '#A0FFBC'],
   animationSpeed: 8,
-  showBorder: false
+  showBorder: false,
+  direction: 'horizontal',
+  pauseOnHover: false,
+  yoyo: true
 });
 
+const slots = useSlots();
+const text = computed(() => (slots.default?.() ?? []).map(v => v.children).join(''));
+
+const isPaused = ref(false);
+const progress = useMotionValue(0);
+const elapsedRef = ref(0);
+const lastTimeRef = ref<number | null>(null);
+
+const animationDuration = props.animationSpeed * 1000;
+
+useAnimationFrame(time => {
+  if (isPaused.value) {
+    lastTimeRef.value = null;
+    return;
+  }
+
+  if (lastTimeRef.value === null) {
+    lastTimeRef.value = time;
+    return;
+  }
+
+  const deltaTime = time - lastTimeRef.value;
+  lastTimeRef.value = time;
+  elapsedRef.value += deltaTime;
+
+  if (props.yoyo) {
+    const fullCycle = animationDuration * 2;
+    const cycleTime = elapsedRef.value % fullCycle;
+
+    if (cycleTime < animationDuration) {
+      progress.set((cycleTime / animationDuration) * 100);
+    } else {
+      progress.set(100 - ((cycleTime - animationDuration) / animationDuration) * 100);
+    }
+  } else {
+    // Continuously increase position for seamless looping
+    progress.set((elapsedRef.value / animationDuration) * 100);
+  }
+});
+
+const backgroundPosition = useTransform(progress, p => {
+  if (props.direction === 'horizontal') {
+    return `${p}% 50%`;
+  } else if (props.direction === 'vertical') {
+    return `50% ${p}%`;
+  } else {
+    // For diagonal, move only horizontally to avoid interference patterns
+    return `${p}% 50%`;
+  }
+});
+
+const handleMouseEnter = () => {
+  if (props.pauseOnHover) isPaused.value = true;
+};
+
+const handleMouseLeave = () => {
+  if (props.pauseOnHover) isPaused.value = false;
+};
+
+const gradientAngle = computed(() =>
+  props.direction === 'horizontal' ? 'to right' : props.direction === 'vertical' ? 'to bottom' : 'to bottom right'
+);
+
+// Duplicate first color at the end for seamless looping
+const gradientColors = computed(() => [...props.colors, props.colors[0]].join(', '));
+
 const gradientStyle = computed(() => ({
-  backgroundImage: `linear-gradient(to right, ${props.colors.join(', ')})`,
-  animationDuration: `${props.animationSpeed}s`,
-  backgroundSize: '300% 100%',
-  '--animation-duration': `${props.animationSpeed}s`
-}));
-
-const borderStyle = computed(() => ({
-  ...gradientStyle.value
-}));
-
-const textStyle = computed(() => ({
-  ...gradientStyle.value,
-  backgroundClip: 'text',
-  WebkitBackgroundClip: 'text'
+  backgroundImage: `linear-gradient(${gradientAngle.value}, ${gradientColors.value})`,
+  backgroundSize:
+    props.direction === 'horizontal' ? '300% 100%' : props.direction === 'vertical' ? '100% 300%' : '300% 300%',
+  backgroundRepeat: 'repeat'
 }));
 </script>
 
 <template>
-  <div
-    :class="`relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-[1.25rem] font-medium backdrop-blur transition-shadow duration-500 overflow-hidden cursor-pointer ${className}`"
+  <Motion
+    tag="div"
+    :class="[
+      'relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-[1.25rem] font-medium backdrop-blur transition-shadow duration-500 overflow-hidden cursor-pointer',
+      className,
+      showBorder && 'py-1 px-2'
+    ]"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
-    <div
+    <Motion
+      tag="div"
       v-if="showBorder"
-      class="absolute inset-0 bg-cover z-0 pointer-events-none animate-gradient"
-      :style="borderStyle"
+      class="z-0 absolute inset-0 rounded-[1.25rem] pointer-events-none"
+      :style="{ ...gradientStyle, backgroundPosition }"
     >
       <div
-        class="absolute inset-0 bg-black rounded-[1.25rem] z-[-1]"
-        style="width: calc(100% - 2px); height: calc(100% - 2px); left: 50%; top: 50%; transform: translate(-50%, -50%)"
+        class="z-[-1] absolute bg-black rounded-[1.25rem]"
+        :style="{
+          width: 'calc(100% - 2px)',
+          height: 'calc(100% - 2px)',
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)'
+        }"
       />
-    </div>
+    </Motion>
 
-    <div class="inline-block relative z-2 text-transparent bg-cover animate-gradient" :style="textStyle">
+    <Motion
+      tag="div"
+      class="inline-block z-2 relative bg-clip-text text-transparent"
+      :style="{
+        ...gradientStyle,
+        backgroundPosition,
+        WebkitBackgroundClip: 'text'
+      }"
+    >
       {{ text }}
-    </div>
-  </div>
+    </Motion>
+  </Motion>
 </template>
-
-<style scoped>
-@keyframes gradient {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
-
-.animate-gradient {
-  animation: gradient var(--animation-duration, 8s) linear infinite;
-}
-</style>
diff --git a/src/demo/TextAnimations/GradientTextDemo.vue b/src/demo/TextAnimations/GradientTextDemo.vue
index b1c7083..3abdb63 100644
--- a/src/demo/TextAnimations/GradientTextDemo.vue
+++ b/src/demo/TextAnimations/GradientTextDemo.vue
@@ -2,69 +2,77 @@
   <div class="gradient-text-demo">
     <TabbedLayout>
       <template #preview>
-        <h2 class="demo-title-extra">Default</h2>
-
-        <div class="demo-container h-[200px]">
-          <div class="text-[2rem]">
-            <GradientText
-              text="Add a splash of color!"
-              :colors="gradientPreview"
-              :animation-speed="speed"
-              :show-border="false"
-            />
-          </div>
-        </div>
-
-        <h2 class="demo-title-extra">Border Animation</h2>
-
-        <div class="demo-container h-[200px]">
-          <div class="text-[2rem]">
-            <GradientText
-              text="Now with a cool border!"
-              :colors="gradientPreview"
-              :animation-speed="speed"
-              :show-border="true"
-              class-name="custom-gradient-class"
-            />
-          </div>
+        <div class="relative h-[400px] text-5xl demo-container">
+          <GradientText
+            :colors="colors"
+            :animation-speed="animationSpeed"
+            :direction="direction"
+            :pause-on-hover="pauseOnHover"
+            :yoyo="yoyo"
+            :show-border="showBorder"
+          >
+            Gradient Magic
+          </GradientText>
         </div>
 
         <Customize>
-          <PreviewSlider title="Loop Duration" v-model="speed" :min="1" :max="10" :step="0.5" value-unit="s" />
+          <PreviewSlider
+            title="Animation Speed"
+            v-model="animationSpeed"
+            :min="1"
+            :max="20"
+            :step="0.5"
+            value-unit="s"
+          />
+          <PreviewSelect title="Direction" v-model="direction" :options="directionOptions" />
+          <PreviewSwitch title="Yoyo Mode" v-model="yoyo" />
+          <PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
+          <PreviewSwitch title="Show Border" v-model="showBorder" />
 
           <div class="flex flex-col gap-0">
-            <div class="mb-4">
-              <label class="block text-sm font-medium mb-2">Colors</label>
+            <label class="block mb-2 font-medium text-sm">Colors</label>
 
-              <input
-                v-model="colors"
-                type="text"
-                placeholder="Enter colors separated by commas"
-                maxlength="100"
-                class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
-              />
+            <div class="flex flex-wrap gap-2 px-1 pt-1">
+              <div v-for="(color, index) in colors" :key="index" class="relative w-8 h-8">
+                <div
+                  class="relative border-[#222] border-2 rounded-md w-8 h-8 overflow-hidden"
+                  :style="{ backgroundColor: color }"
+                >
+                  <input
+                    type="color"
+                    :value="color"
+                    @input="updateColor(index, ($event.target as HTMLInputElement).value)"
+                    class="absolute inset-0 opacity-0 w-8 h-8 cursor-pointer"
+                  />
+                </div>
+
+                <button
+                  v-if="colors.length > 2"
+                  @click="removeColor(index)"
+                  class="-top-1.5 -right-1.5 absolute flex justify-center items-center bg-[#170D27] border border-[#222] rounded-full w-4 h-4 cursor-pointer"
+                >
+                  <i class="text-[#8BC79A] text-[8px]! pi pi-times" />
+                </button>
+              </div>
+
+              <button
+                v-if="colors.length < 8"
+                @click="addColor"
+                class="flex justify-center items-center border-[#392e4e] border-2 hover:border-[#27FF64] border-dashed rounded-md w-8 h-8 transition-colors cursor-pointer"
+              >
+                <i class="text-[#8BC79A] text-sm pi pi-plus" />
+              </button>
             </div>
 
             <div
-              class="w-[300px] h-3 rounded-md border border-[#333333]"
+              class="mt-3 border border-[#333333] rounded-md w-[300px] h-3"
               :style="{
-                background: `linear-gradient(to right, ${gradientPreview.join(', ')})`
+                background: `linear-gradient(to right, ${gradientPreview})`
               }"
             />
           </div>
         </Customize>
 
-        <p class="demo-extra-info mt-4 flex items-center gap-2">
-          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-            <path
-              fill-rule="evenodd"
-              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-              clip-rule="evenodd"
-            />
-          </svg>
-          For a smoother animation, the gradient should start and end with the same color.
-        </p>
-
         <PropTable :data="propData" />
       </template>
 
@@ -80,27 +88,57 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.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 GradientText from '../../content/TextAnimations/GradientText/GradientText.vue';
+import CliInstallation from '@/components/code/CliInstallation.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
+import Customize from '@/components/common/Customize.vue';
+import PreviewSelect from '@/components/common/PreviewSelect.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
+import PropTable from '@/components/common/PropTable.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
 import { gradientText } from '@/constants/code/TextAnimations/gradientTextCode';
+import GradientText from '@/content/TextAnimations/GradientText/GradientText.vue';
+import { computed, ref } from 'vue';
 
-const colors = ref('#40ffaa, #4079ff, #40ffaa, #4079ff, #40ffaa');
-const speed = ref(3);
+const colors = ref(['#27FF64', '#27FF64', '#A0FFBC']);
+const animationSpeed = ref(8);
+const direction = ref<'horizontal' | 'vertical' | 'diagonal'>('horizontal');
+const pauseOnHover = ref(false);
+const yoyo = ref(true);
+const showBorder = ref(false);
 
-const gradientPreview = computed(() => colors.value.split(',').map(color => color.trim()));
+const directionOptions = [
+  { value: 'horizontal', label: 'Horizontal' },
+  { value: 'vertical', label: 'Vertical' },
+  { value: 'diagonal', label: 'Diagonal' }
+];
+
+const gradientPreview = computed(() => [...colors.value, colors.value[0]].join(', '));
+
+const updateColor = (index: number, newColor: string) => {
+  const newColors = [...colors.value];
+  newColors[index] = newColor;
+  colors.value = newColors;
+};
+
+const addColor = () => {
+  if (colors.value.length < 8) {
+    colors.value.push('#ffffff');
+  }
+};
+
+const removeColor = (index: number) => {
+  if (colors.value.length > 2) {
+    colors.value.splice(index, 1);
+  }
+};
 
 const propData = [
   {
-    name: 'text',
+    name: 'slot',
     type: 'string',
-    default: '""',
-    description: 'The text content to be displayed with gradient effect.'
+    default: '-',
+    description: 'The content to be displayed inside the gradient text.'
   },
   {
     name: 'className',
@@ -111,20 +149,38 @@ const propData = [
   {
     name: 'colors',
     type: 'string[]',
-    default: '["#ffaa40", "#9c40ff", "#ffaa40"]',
-    description: 'Defines the gradient colors for the text or border.'
+    default: `["#5227FF", "#FF9FFC", "#B19EEF"]`,
+    description: 'Array of colors for the gradient effect.'
   },
   {
     name: 'animationSpeed',
     type: 'number',
     default: '8',
-    description: 'The duration of the gradient animation in seconds.'
+    description: 'Duration of one animation cycle in seconds.'
+  },
+  {
+    name: 'direction',
+    type: `'horizontal' | 'vertical' | 'diagonal'`,
+    default: `'horizontal'`,
+    description: 'Direction of the gradient animation.'
+  },
+  {
+    name: 'pauseOnHover',
+    type: 'boolean',
+    default: 'false',
+    description: 'Pauses the animation when hovering over the text.'
+  },
+  {
+    name: 'yoyo',
+    type: 'boolean',
+    default: 'true',
+    description: 'Reverses animation direction at the end instead of looping.'
   },
   {
     name: 'showBorder',
     type: 'boolean',
     default: 'false',
-    description: 'Determines whether a border with the gradient effect is displayed.'
+    description: 'Displays a gradient border around the text.'
   }
 ];
 </script>

From 509a31cca28def36949926d28e9954d21a95243f Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Mon, 2 Feb 2026 11:38:18 +0530
Subject: [PATCH 8/9] [ REFACT ] : TextAnimations Registry Changes

---
 public/r/BlurText.json     | 2 +-
 public/r/CircularText.json | 2 +-
 public/r/FuzzyText.json    | 2 +-
 public/r/GradientText.json | 2 +-
 public/r/ShinyText.json    | 2 +-
 public/r/SplitText.json    | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/r/BlurText.json b/public/r/BlurText.json
index b2edf33..018ce9a 100644
--- a/public/r/BlurText.json
+++ b/public/r/BlurText.json
@@ -1 +1 @@
-{"name":"BlurText","title":"BlurText","description":"Text starts blurred then crisply resolves for a soft-focus reveal effect.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <p ref=\"rootRef\" :class=\"['blur-text', className, 'flex', 'flex-wrap']\">\n    <Motion\n      v-for=\"(segment, index) in elements\"\n      :key=\"`${animationKey}-${index}`\"\n      tag=\"span\"\n      :initial=\"fromSnapshot\"\n      :animate=\"inView ? getAnimateKeyframes() : fromSnapshot\"\n      :transition=\"getTransition(index)\"\n      :style=\"{\n        display: 'inline-block',\n        willChange: 'transform, filter, opacity'\n      }\"\n      @animation-complete=\"() => handleAnimationComplete(index)\"\n    >\n      {{ segment === ' ' ? '\\u00A0' : segment\n      }}{{ animateBy === 'words' && index < elements.length - 1 ? '\\u00A0' : '' }}\n    </Motion>\n  </p>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\nimport { Motion } from 'motion-v';\n\ntype AnimateBy = 'words' | 'letters';\ntype Direction = 'top' | 'bottom';\ntype AnimationSnapshot = Record<string, string | number>;\n\ninterface BlurTextProps {\n  text?: string;\n  delay?: number;\n  className?: string;\n  animateBy?: AnimateBy;\n  direction?: Direction;\n  threshold?: number;\n  rootMargin?: string;\n  animationFrom?: AnimationSnapshot;\n  animationTo?: AnimationSnapshot[];\n  easing?: (t: number) => number;\n  onAnimationComplete?: () => void;\n  stepDuration?: number;\n}\n\nconst props = withDefaults(defineProps<BlurTextProps>(), {\n  text: '',\n  delay: 200,\n  className: '',\n  animateBy: 'words' as AnimateBy,\n  direction: 'top' as Direction,\n  threshold: 0.1,\n  rootMargin: '0px',\n  easing: (t: number) => t,\n  stepDuration: 0.35\n});\n\nconst buildKeyframes = (\n  from: AnimationSnapshot,\n  steps: AnimationSnapshot[]\n): Record<string, Array<string | number>> => {\n  const keys = new Set<string>([...Object.keys(from), ...steps.flatMap(step => Object.keys(step))]);\n\n  const keyframes: Record<string, Array<string | number>> = {};\n\n  for (const key of keys) {\n    keyframes[key] = [from[key], ...steps.map(step => step[key])];\n  }\n\n  return keyframes;\n};\n\nconst elements = computed(() => (props.animateBy === 'words' ? props.text.split(' ') : props.text.split('')));\n\nconst defaultFrom = computed<AnimationSnapshot>(() =>\n  props.direction === 'top' ? { filter: 'blur(10px)', opacity: 0, y: -50 } : { filter: 'blur(10px)', opacity: 0, y: 50 }\n);\n\nconst defaultTo = computed<AnimationSnapshot[]>(() => [\n  {\n    filter: 'blur(5px)',\n    opacity: 0.5,\n    y: props.direction === 'top' ? 5 : -5\n  },\n  {\n    filter: 'blur(0px)',\n    opacity: 1,\n    y: 0\n  }\n]);\n\nconst fromSnapshot = computed(() => props.animationFrom ?? defaultFrom.value);\nconst toSnapshots = computed(() => props.animationTo ?? defaultTo.value);\n\nconst stepCount = computed(() => toSnapshots.value.length + 1);\nconst totalDuration = computed(() => props.stepDuration * (stepCount.value - 1));\nconst times = computed(() =>\n  Array.from({ length: stepCount.value }, (_, i) => (stepCount.value === 1 ? 0 : i / (stepCount.value - 1)))\n);\n\nconst inView = ref(false);\nconst animationKey = ref(0);\nconst completionFired = ref(false);\nconst rootRef = useTemplateRef<HTMLParagraphElement>('rootRef');\n\nlet observer: IntersectionObserver | null = null;\n\nconst setupObserver = () => {\n  if (!rootRef.value) return;\n\n  observer = new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting) {\n        inView.value = true;\n        observer?.unobserve(rootRef.value as Element);\n      }\n    },\n    {\n      threshold: props.threshold,\n      rootMargin: props.rootMargin\n    }\n  );\n\n  observer.observe(rootRef.value);\n};\n\nconst getAnimateKeyframes = () => {\n  return buildKeyframes(fromSnapshot.value, toSnapshots.value);\n};\n\nconst getTransition = (index: number) => {\n  return {\n    duration: totalDuration.value,\n    times: times.value,\n    delay: (index * props.delay) / 1000,\n    ease: props.easing\n  };\n};\n\nconst handleAnimationComplete = (index: number) => {\n  if (index === elements.value.length - 1 && !completionFired.value && props.onAnimationComplete) {\n    completionFired.value = true;\n    props.onAnimationComplete();\n  }\n};\n\nonMounted(() => {\n  setupObserver();\n});\n\nonUnmounted(() => {\n  observer?.disconnect();\n});\n\nwatch([() => props.threshold, () => props.rootMargin], () => {\n  observer?.disconnect();\n  setupObserver();\n});\n\nwatch([() => props.delay, () => props.stepDuration, () => props.animateBy, () => props.direction], () => {\n  animationKey.value++;\n  completionFired.value = false;\n});\n</script>\n","path":"BlurText/BlurText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
+{"name":"BlurText","title":"BlurText","description":"Text starts blurred then crisply resolves for a soft-focus reveal effect.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <p ref=\"rootRef\" class=\"flex flex-wrap blur-text\" :class=\"className\">\n    <Motion\n      v-for=\"(segment, index) in elements\"\n      :key=\"index\"\n      tag=\"span\"\n      :initial=\"fromSnapshot\"\n      :animate=\"inView ? buildKeyframes(fromSnapshot, toSnapshots) : fromSnapshot\"\n      :transition=\"getTransition(index)\"\n      @animation-complete=\"handleAnimationComplete(index)\"\n      style=\"display: inline-block; will-change: transform, filter, opacity\"\n    >\n      {{ segment === ' ' ? '\\u00A0' : segment }}\n      <template v-if=\"animateBy === 'words' && index < elements.length - 1\">&nbsp;</template>\n    </Motion>\n  </p>\n</template>\n\n<script setup lang=\"ts\">\nimport { Motion, type Transition } from 'motion-v';\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';\n\ntype BlurTextProps = {\n  text?: string;\n  delay?: number;\n  className?: string;\n  animateBy?: 'words' | 'letters';\n  direction?: 'top' | 'bottom';\n  threshold?: number;\n  rootMargin?: string;\n  animationFrom?: Record<string, string | number>;\n  animationTo?: Array<Record<string, string | number>>;\n  easing?: (t: number) => number;\n  onAnimationComplete?: () => void;\n  stepDuration?: number;\n};\n\nconst buildKeyframes = (\n  from: Record<string, string | number>,\n  steps: Array<Record<string, string | number>>\n): Record<string, Array<string | number>> => {\n  const keys = new Set<string>([...Object.keys(from), ...steps.flatMap(s => Object.keys(s))]);\n\n  const keyframes: Record<string, Array<string | number>> = {};\n  keys.forEach(k => {\n    keyframes[k] = [from[k], ...steps.map(s => s[k])];\n  });\n  return keyframes;\n};\n\nconst props = withDefaults(defineProps<BlurTextProps>(), {\n  text: '',\n  delay: 200,\n  className: '',\n  animateBy: 'words',\n  direction: 'top',\n  threshold: 0.1,\n  rootMargin: '0px',\n  easing: (t: number) => t,\n  stepDuration: 0.35\n});\n\nconst inView = ref(false);\nconst rootRef = useTemplateRef<HTMLParagraphElement>('rootRef');\nlet observer: IntersectionObserver | null = null;\n\nonMounted(() => {\n  if (!rootRef.value) return;\n\n  observer = new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting) {\n        inView.value = true;\n        observer?.unobserve(rootRef.value as Element);\n      }\n    },\n    {\n      threshold: props.threshold,\n      rootMargin: props.rootMargin\n    }\n  );\n\n  observer.observe(rootRef.value);\n});\n\nonBeforeUnmount(() => {\n  observer?.disconnect();\n});\n\nconst elements = computed(() => (props.animateBy === 'words' ? props.text.split(' ') : props.text.split('')));\n\nconst defaultFrom = computed(() =>\n  props.direction === 'top' ? { filter: 'blur(10px)', opacity: 0, y: -50 } : { filter: 'blur(10px)', opacity: 0, y: 50 }\n);\n\nconst defaultTo = computed(() => [\n  {\n    filter: 'blur(5px)',\n    opacity: 0.5,\n    y: props.direction === 'top' ? 5 : -5\n  },\n  {\n    filter: 'blur(0px)',\n    opacity: 1,\n    y: 0\n  }\n]);\n\nconst fromSnapshot = computed(() => props.animationFrom ?? defaultFrom.value);\nconst toSnapshots = computed(() => props.animationTo ?? defaultTo.value);\n\nconst stepCount = computed(() => toSnapshots.value.length + 1);\nconst totalDuration = computed(() => props.stepDuration * (stepCount.value - 1));\n\nconst times = computed(() =>\n  Array.from({ length: stepCount.value }, (_, i) => (stepCount.value === 1 ? 0 : i / (stepCount.value - 1)))\n);\n\nconst getTransition = (index: number): Transition => ({\n  duration: totalDuration.value,\n  times: times.value,\n  delay: (index * props.delay) / 1000,\n  ease: props.easing\n});\n\nconst handleAnimationComplete = (index: number) => {\n  if (index === elements.value.length - 1) {\n    props.onAnimationComplete?.();\n  }\n};\n</script>\n","path":"BlurText/BlurText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
diff --git a/public/r/CircularText.json b/public/r/CircularText.json
index 19c1295..8365887 100644
--- a/public/r/CircularText.json
+++ b/public/r/CircularText.json
@@ -1 +1 @@
-{"name":"CircularText","title":"CircularText","description":"Layouts characters around a circle with optional rotation animation.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { computed, ref, watchEffect, onUnmounted } from 'vue';\nimport { Motion } from 'motion-v';\n\ninterface CircularTextProps {\n  text: string;\n  spinDuration?: number;\n  onHover?: 'slowDown' | 'speedUp' | 'pause' | 'goBonkers';\n  className?: string;\n}\n\nconst props = withDefaults(defineProps<CircularTextProps>(), {\n  text: '',\n  spinDuration: 20,\n  onHover: 'speedUp',\n  className: ''\n});\n\nconst letters = computed(() => Array.from(props.text));\nconst isHovered = ref(false);\n\nconst currentRotation = ref(0);\nconst animationId = ref<number | null>(null);\nconst lastTime = ref<number>(Date.now());\nconst rotationSpeed = ref<number>(0);\n\nconst getCurrentSpeed = () => {\n  if (isHovered.value && props.onHover === 'pause') return 0;\n\n  const baseDuration = props.spinDuration;\n  const baseSpeed = 360 / baseDuration;\n\n  if (!isHovered.value) return baseSpeed;\n\n  switch (props.onHover) {\n    case 'slowDown':\n      return baseSpeed / 2;\n    case 'speedUp':\n      return baseSpeed * 4;\n    case 'goBonkers':\n      return baseSpeed * 20;\n    default:\n      return baseSpeed;\n  }\n};\n\nconst getCurrentScale = () => {\n  return isHovered.value && props.onHover === 'goBonkers' ? 0.8 : 1;\n};\n\nconst animate = () => {\n  const now = Date.now();\n  const deltaTime = (now - lastTime.value) / 1000;\n  lastTime.value = now;\n\n  const targetSpeed = getCurrentSpeed();\n\n  const speedDiff = targetSpeed - rotationSpeed.value;\n  const smoothingFactor = Math.min(1, deltaTime * 5);\n  rotationSpeed.value += speedDiff * smoothingFactor;\n\n  currentRotation.value = (currentRotation.value + rotationSpeed.value * deltaTime) % 360;\n\n  animationId.value = requestAnimationFrame(animate);\n};\n\nconst startAnimation = () => {\n  if (animationId.value) {\n    cancelAnimationFrame(animationId.value);\n  }\n  lastTime.value = Date.now();\n  rotationSpeed.value = getCurrentSpeed();\n  animate();\n};\n\nwatchEffect(() => {\n  startAnimation();\n});\n\nstartAnimation();\n\nonUnmounted(() => {\n  if (animationId.value) {\n    cancelAnimationFrame(animationId.value);\n  }\n});\n\nconst handleHoverStart = () => {\n  isHovered.value = true;\n};\n\nconst handleHoverEnd = () => {\n  isHovered.value = false;\n};\n\nconst getLetterTransform = (index: number) => {\n  const rotationDeg = (360 / letters.value.length) * index;\n  const factor = Math.PI / letters.value.length;\n  const x = factor * index;\n  const y = factor * index;\n  return `rotateZ(${rotationDeg}deg) translate3d(${x}px, ${y}px, 0)`;\n};\n</script>\n\n<template>\n  <Motion\n    :animate=\"{\n      rotate: currentRotation,\n      scale: getCurrentScale()\n    }\"\n    :transition=\"{\n      rotate: {\n        duration: 0\n      },\n      scale: {\n        type: 'spring',\n        damping: 20,\n        stiffness: 300\n      }\n    }\"\n    :class=\"`m-0 mx-auto rounded-full w-[200px] h-[200px] relative font-black text-white text-center cursor-pointer origin-center ${props.className}`\"\n    @mouseenter=\"handleHoverStart\"\n    @mouseleave=\"handleHoverEnd\"\n  >\n    <span\n      v-for=\"(letter, i) in letters\"\n      :key=\"i\"\n      class=\"absolute inline-block inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]\"\n      :style=\"{\n        transform: getLetterTransform(i),\n        WebkitTransform: getLetterTransform(i)\n      }\"\n    >\n      {{ letter }}\n    </span>\n  </Motion>\n</template>\n","path":"CircularText/CircularText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
+{"name":"CircularText","title":"CircularText","description":"Layouts characters around a circle with optional rotation animation.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { animate, Motion, MotionValue, useMotionValue } from 'motion-v';\nimport { computed, onMounted, watch } from 'vue';\n\ninterface CircularTextProps {\n  text: string;\n  spinDuration?: number;\n  onHover?: 'slowDown' | 'speedUp' | 'pause' | 'goBonkers';\n  className?: string;\n}\n\nconst props = withDefaults(defineProps<CircularTextProps>(), {\n  spinDuration: 20,\n  onHover: 'speedUp',\n  className: ''\n});\n\nconst letters = computed(() => Array.from(props.text));\nconst rotation: MotionValue<number> = useMotionValue(0);\n\nlet currentAnimation: ReturnType<typeof animate> | null = null;\n\nconst startRotation = (duration: number) => {\n  currentAnimation?.stop();\n  const start = rotation.get();\n\n  currentAnimation = animate(rotation, start + 360, {\n    duration,\n    ease: 'linear',\n    repeat: Infinity\n  });\n};\n\nonMounted(() => {\n  startRotation(props.spinDuration);\n});\n\nwatch(\n  () => [props.spinDuration, props.text],\n  () => {\n    startRotation(props.spinDuration);\n  }\n);\n\nconst handleHoverStart = () => {\n  if (!props.onHover) return;\n\n  switch (props.onHover) {\n    case 'slowDown':\n      startRotation(props.spinDuration * 2);\n      break;\n    case 'speedUp':\n      startRotation(props.spinDuration / 4);\n      break;\n    case 'pause':\n      currentAnimation?.stop();\n      break;\n    case 'goBonkers':\n      startRotation(props.spinDuration / 20);\n      break;\n  }\n};\n\nconst handleHoverEnd = () => {\n  startRotation(props.spinDuration);\n};\n\nconst getLetterTransform = (index: number) => {\n  const rotationDeg = (360 / letters.value.length) * index;\n  const factor = Math.PI / letters.value.length;\n  const x = factor * index;\n  const y = factor * index;\n  return `rotateZ(${rotationDeg}deg) translate3d(${x}px, ${y}px, 0)`;\n};\n</script>\n\n<template>\n  <Motion\n    tag=\"div\"\n    :class=\"[\n      'm-0 mx-auto rounded-full w-[200px] h-[200px] relative font-black text-white text-center cursor-pointer origin-center',\n      className\n    ]\"\n    :style=\"{\n      rotate: rotation\n    }\"\n    :initial=\"{\n      rotate: 0\n    }\"\n    @mouseenter=\"handleHoverStart\"\n    @mouseleave=\"handleHoverEnd\"\n  >\n    <span\n      v-for=\"(letter, i) in letters\"\n      :key=\"i\"\n      class=\"inline-block absolute inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]\"\n      :style=\"{\n        transform: getLetterTransform(i),\n        WebkitTransform: getLetterTransform(i)\n      }\"\n    >\n      {{ letter }}\n    </span>\n  </Motion>\n</template>\n","path":"CircularText/CircularText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
diff --git a/public/r/FuzzyText.json b/public/r/FuzzyText.json
index 6df7479..0268e76 100644
--- a/public/r/FuzzyText.json
+++ b/public/r/FuzzyText.json
@@ -1 +1 @@
-{"name":"FuzzyText","title":"FuzzyText","description":"Vibrating fuzzy text with controllable hover intensity.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';\n\ninterface FuzzyTextProps {\n  text: string;\n  fontSize?: number | string;\n  fontWeight?: string | number;\n  fontFamily?: string;\n  color?: string;\n  enableHover?: boolean;\n  baseIntensity?: number;\n  hoverIntensity?: number;\n}\n\nconst props = withDefaults(defineProps<FuzzyTextProps>(), {\n  text: '',\n  fontSize: 'clamp(2rem, 8vw, 8rem)',\n  fontWeight: 900,\n  fontFamily: 'inherit',\n  color: '#fff',\n  enableHover: true,\n  baseIntensity: 0.18,\n  hoverIntensity: 0.5\n});\n\nconst canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');\nlet animationFrameId: number;\nlet isCancelled = false;\nlet cleanup: (() => void) | null = null;\n\nconst waitForFont = async (fontFamily: string, fontWeight: string | number, fontSize: string): Promise<boolean> => {\n  if (document.fonts?.check) {\n    const fontString = `${fontWeight} ${fontSize} ${fontFamily}`;\n\n    if (document.fonts.check(fontString)) {\n      return true;\n    }\n\n    try {\n      await document.fonts.load(fontString);\n      return document.fonts.check(fontString);\n    } catch (error) {\n      console.warn('Font loading failed:', error);\n      return false;\n    }\n  }\n\n  return new Promise(resolve => {\n    const canvas = document.createElement('canvas');\n    const ctx = canvas.getContext('2d');\n    if (!ctx) {\n      resolve(false);\n      return;\n    }\n\n    ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;\n    const testWidth = ctx.measureText('M').width;\n\n    let attempts = 0;\n    const checkFont = () => {\n      ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;\n      const newWidth = ctx.measureText('M').width;\n\n      if (newWidth !== testWidth && newWidth > 0) {\n        resolve(true);\n      } else if (attempts < 20) {\n        attempts++;\n        setTimeout(checkFont, 50);\n      } else {\n        resolve(false);\n      }\n    };\n\n    setTimeout(checkFont, 10);\n  });\n};\n\nconst initCanvas = async () => {\n  if (document.fonts?.ready) {\n    await document.fonts.ready;\n  }\n\n  if (isCancelled) return;\n\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return;\n\n  const computedFontFamily =\n    props.fontFamily === 'inherit' ? window.getComputedStyle(canvas).fontFamily || 'sans-serif' : props.fontFamily;\n\n  const fontSizeStr = typeof props.fontSize === 'number' ? `${props.fontSize}px` : props.fontSize;\n  let numericFontSize: number;\n\n  if (typeof props.fontSize === 'number') {\n    numericFontSize = props.fontSize;\n  } else {\n    const temp = document.createElement('span');\n    temp.style.fontSize = props.fontSize;\n    temp.style.fontFamily = computedFontFamily;\n    document.body.appendChild(temp);\n    const computedSize = window.getComputedStyle(temp).fontSize;\n    numericFontSize = parseFloat(computedSize);\n    document.body.removeChild(temp);\n  }\n\n  const fontLoaded = await waitForFont(computedFontFamily, props.fontWeight, fontSizeStr);\n  if (!fontLoaded) {\n    console.warn(`Font not loaded: ${computedFontFamily}`);\n  }\n\n  const text = props.text;\n\n  const offscreen = document.createElement('canvas');\n  const offCtx = offscreen.getContext('2d');\n  if (!offCtx) return;\n\n  const fontString = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;\n  offCtx.font = fontString;\n\n  const testMetrics = offCtx.measureText('M');\n  if (testMetrics.width === 0) {\n    setTimeout(() => {\n      if (!isCancelled) {\n        initCanvas();\n      }\n    }, 100);\n    return;\n  }\n\n  offCtx.textBaseline = 'alphabetic';\n  const metrics = offCtx.measureText(text);\n\n  const actualLeft = metrics.actualBoundingBoxLeft ?? 0;\n  const actualRight = metrics.actualBoundingBoxRight ?? metrics.width;\n  const actualAscent = metrics.actualBoundingBoxAscent ?? numericFontSize;\n  const actualDescent = metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2;\n\n  const textBoundingWidth = Math.ceil(actualLeft + actualRight);\n  const tightHeight = Math.ceil(actualAscent + actualDescent);\n\n  const extraWidthBuffer = 10;\n  const offscreenWidth = textBoundingWidth + extraWidthBuffer;\n\n  offscreen.width = offscreenWidth;\n  offscreen.height = tightHeight;\n\n  const xOffset = extraWidthBuffer / 2;\n  offCtx.font = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;\n  offCtx.textBaseline = 'alphabetic';\n  offCtx.fillStyle = props.color;\n  offCtx.fillText(text, xOffset - actualLeft, actualAscent);\n\n  const horizontalMargin = 50;\n  const verticalMargin = 0;\n  canvas.width = offscreenWidth + horizontalMargin * 2;\n  canvas.height = tightHeight + verticalMargin * 2;\n  ctx.translate(horizontalMargin, verticalMargin);\n\n  const interactiveLeft = horizontalMargin + xOffset;\n  const interactiveTop = verticalMargin;\n  const interactiveRight = interactiveLeft + textBoundingWidth;\n  const interactiveBottom = interactiveTop + tightHeight;\n\n  let isHovering = false;\n  const fuzzRange = 30;\n\n  const run = () => {\n    if (isCancelled) return;\n    ctx.clearRect(-fuzzRange, -fuzzRange, offscreenWidth + 2 * fuzzRange, tightHeight + 2 * fuzzRange);\n    const intensity = isHovering ? props.hoverIntensity : props.baseIntensity;\n    for (let j = 0; j < tightHeight; j++) {\n      const dx = Math.floor(intensity * (Math.random() - 0.5) * fuzzRange);\n      ctx.drawImage(offscreen, 0, j, offscreenWidth, 1, dx, j, offscreenWidth, 1);\n    }\n    animationFrameId = window.requestAnimationFrame(run);\n  };\n\n  run();\n\n  const isInsideTextArea = (x: number, y: number) =>\n    x >= interactiveLeft && x <= interactiveRight && y >= interactiveTop && y <= interactiveBottom;\n\n  const handleMouseMove = (e: MouseEvent) => {\n    if (!props.enableHover) return;\n    const rect = canvas.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n    isHovering = isInsideTextArea(x, y);\n  };\n\n  const handleMouseLeave = () => {\n    isHovering = false;\n  };\n\n  const handleTouchMove = (e: TouchEvent) => {\n    if (!props.enableHover) return;\n    e.preventDefault();\n    const rect = canvas.getBoundingClientRect();\n    const touch = e.touches[0];\n    const x = touch.clientX - rect.left;\n    const y = touch.clientY - rect.top;\n    isHovering = isInsideTextArea(x, y);\n  };\n\n  const handleTouchEnd = () => {\n    isHovering = false;\n  };\n\n  if (props.enableHover) {\n    canvas.addEventListener('mousemove', handleMouseMove);\n    canvas.addEventListener('mouseleave', handleMouseLeave);\n    canvas.addEventListener('touchmove', handleTouchMove, { passive: false });\n    canvas.addEventListener('touchend', handleTouchEnd);\n  }\n\n  cleanup = () => {\n    window.cancelAnimationFrame(animationFrameId);\n    if (props.enableHover) {\n      canvas.removeEventListener('mousemove', handleMouseMove);\n      canvas.removeEventListener('mouseleave', handleMouseLeave);\n      canvas.removeEventListener('touchmove', handleTouchMove);\n      canvas.removeEventListener('touchend', handleTouchEnd);\n    }\n  };\n};\n\nonMounted(() => {\n  nextTick(() => {\n    initCanvas();\n  });\n});\n\nonUnmounted(() => {\n  isCancelled = true;\n  if (animationFrameId) {\n    window.cancelAnimationFrame(animationFrameId);\n  }\n  if (cleanup) {\n    cleanup();\n  }\n});\n\nwatch(\n  [\n    () => props.text,\n    () => props.fontSize,\n    () => props.fontWeight,\n    () => props.fontFamily,\n    () => props.color,\n    () => props.enableHover,\n    () => props.baseIntensity,\n    () => props.hoverIntensity\n  ],\n  () => {\n    isCancelled = true;\n    if (animationFrameId) {\n      window.cancelAnimationFrame(animationFrameId);\n    }\n    if (cleanup) {\n      cleanup();\n    }\n    isCancelled = false;\n    nextTick(() => {\n      initCanvas();\n    });\n  }\n);\n</script>\n\n<template>\n  <canvas ref=\"canvasRef\" />\n</template>\n","path":"FuzzyText/FuzzyText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
+{"name":"FuzzyText","title":"FuzzyText","description":"Vibrating fuzzy text with controllable hover intensity.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, useSlots, useTemplateRef, watch } from 'vue';\n\ninterface FuzzyTextProps {\n  fontSize?: number | string;\n  fontWeight?: string | number;\n  fontFamily?: string;\n  color?: string;\n  enableHover?: boolean;\n  baseIntensity?: number;\n  hoverIntensity?: number;\n  fuzzRange?: number;\n  fps?: number;\n  direction?: 'horizontal' | 'vertical' | 'both';\n  transitionDuration?: number;\n  clickEffect?: boolean;\n  glitchMode?: boolean;\n  glitchInterval?: number;\n  glitchDuration?: number;\n  gradient?: string[] | null;\n  letterSpacing?: number;\n  className?: string;\n}\n\nconst props = withDefaults(defineProps<FuzzyTextProps>(), {\n  fontSize: 'clamp(2rem, 8vw, 8rem)',\n  fontWeight: 900,\n  fontFamily: 'inherit',\n  color: '#fff',\n  enableHover: true,\n  baseIntensity: 0.18,\n  hoverIntensity: 0.5,\n  fuzzRange: 30,\n  fps: 60,\n  direction: 'horizontal',\n  transitionDuration: 0,\n  clickEffect: false,\n  glitchMode: false,\n  glitchInterval: 2000,\n  glitchDuration: 200,\n  gradient: null,\n  letterSpacing: 0,\n  className: ''\n});\n\nconst canvasRef = useTemplateRef<HTMLCanvasElement & { cleanupFuzzyText?: () => void }>('canvasRef');\nconst slots = useSlots();\n\nlet animationFrameId: number;\nlet glitchTimeoutId: ReturnType<typeof setTimeout>;\nlet glitchEndTimeoutId: ReturnType<typeof setTimeout>;\nlet clickTimeoutId: ReturnType<typeof setTimeout>;\nlet cancelled = false;\n\nconst text = computed(() => (slots.default?.() ?? []).map(v => v.children).join(''));\n\nconst init = async () => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return;\n\n  const computedFontFamily =\n    props.fontFamily === 'inherit' ? window.getComputedStyle(canvas).fontFamily || 'sans-serif' : props.fontFamily;\n\n  const fontSizeStr = typeof props.fontSize === 'number' ? `${props.fontSize}px` : props.fontSize;\n\n  const fontString = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;\n\n  try {\n    await document.fonts.load(fontString);\n  } catch {\n    await document.fonts.ready;\n  }\n\n  if (cancelled) return;\n\n  let numericFontSize: number;\n  if (typeof props.fontSize === 'number') {\n    numericFontSize = props.fontSize;\n  } else {\n    const temp = document.createElement('span');\n    temp.style.fontSize = props.fontSize;\n    document.body.appendChild(temp);\n    numericFontSize = parseFloat(getComputedStyle(temp).fontSize);\n    document.body.removeChild(temp);\n  }\n\n  const offscreen = document.createElement('canvas');\n  const offCtx = offscreen.getContext('2d')!;\n  offCtx.font = fontString;\n  offCtx.textBaseline = 'alphabetic';\n\n  let totalWidth = 0;\n  if (props.letterSpacing !== 0) {\n    for (const char of text.value) {\n      totalWidth += offCtx.measureText(char).width + props.letterSpacing;\n    }\n    totalWidth -= props.letterSpacing;\n  } else {\n    totalWidth = offCtx.measureText(text.value).width;\n  }\n\n  const metrics = offCtx.measureText(text.value);\n  const ascent = metrics.actualBoundingBoxAscent ?? numericFontSize;\n  const descent = metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2;\n  const height = Math.ceil(ascent + descent);\n\n  offscreen.width = Math.ceil(totalWidth) + 20;\n  offscreen.height = height;\n\n  offCtx.font = fontString;\n  offCtx.textBaseline = 'alphabetic';\n\n  if (props.gradient && props.gradient.length >= 2) {\n    const grad = offCtx.createLinearGradient(0, 0, offscreen.width, 0);\n    props.gradient.forEach((c, i) => grad.addColorStop(i / (props.gradient!.length - 1), c));\n    offCtx.fillStyle = grad;\n  } else {\n    offCtx.fillStyle = props.color;\n  }\n\n  let x = 10;\n  for (const char of text.value) {\n    offCtx.fillText(char, x, ascent);\n    x += offCtx.measureText(char).width + props.letterSpacing;\n  }\n\n  const marginX = props.fuzzRange + 20;\n  const marginY = props.direction === 'vertical' || props.direction === 'both' ? props.fuzzRange + 10 : 0;\n\n  canvas.width = offscreen.width + marginX * 2;\n  canvas.height = offscreen.height + marginY * 2;\n  ctx.translate(marginX, marginY);\n\n  let isHovering = false;\n  let isClicking = false;\n  let isGlitching = false;\n  let currentIntensity = props.baseIntensity;\n  let targetIntensity = props.baseIntensity;\n  let lastFrameTime = 0;\n  const frameDuration = 1000 / props.fps;\n\n  const startGlitch = () => {\n    if (!props.glitchMode || cancelled) return;\n    glitchTimeoutId = setTimeout(() => {\n      isGlitching = true;\n      glitchEndTimeoutId = setTimeout(() => {\n        isGlitching = false;\n        startGlitch();\n      }, props.glitchDuration);\n    }, props.glitchInterval);\n  };\n\n  if (props.glitchMode) startGlitch();\n\n  const run = (ts: number) => {\n    if (cancelled) return;\n\n    if (ts - lastFrameTime < frameDuration) {\n      animationFrameId = requestAnimationFrame(run);\n      return;\n    }\n\n    lastFrameTime = ts;\n    ctx.clearRect(-marginX, -marginY, offscreen.width + marginX * 2, offscreen.height + marginY * 2);\n\n    targetIntensity = isClicking || isGlitching ? 1 : isHovering ? props.hoverIntensity : props.baseIntensity;\n\n    if (props.transitionDuration > 0) {\n      const step = 1 / (props.transitionDuration / frameDuration);\n      currentIntensity += Math.sign(targetIntensity - currentIntensity) * step;\n      currentIntensity = Math.min(\n        Math.max(currentIntensity, Math.min(targetIntensity, currentIntensity)),\n        Math.max(targetIntensity, currentIntensity)\n      );\n    } else {\n      currentIntensity = targetIntensity;\n    }\n\n    for (let y = 0; y < offscreen.height; y++) {\n      const dx = props.direction !== 'vertical' ? (Math.random() - 0.5) * currentIntensity * props.fuzzRange : 0;\n      const dy =\n        props.direction !== 'horizontal' ? (Math.random() - 0.5) * currentIntensity * props.fuzzRange * 0.5 : 0;\n\n      ctx.drawImage(offscreen, 0, y, offscreen.width, 1, dx, y + dy, offscreen.width, 1);\n    }\n\n    animationFrameId = requestAnimationFrame(run);\n  };\n\n  animationFrameId = requestAnimationFrame(run);\n\n  const rectCheck = (x: number, y: number) =>\n    x >= marginX && x <= marginX + offscreen.width && y >= marginY && y <= marginY + offscreen.height;\n\n  const mouseMove = (e: MouseEvent) => {\n    if (!props.enableHover) return;\n    const rect = canvas.getBoundingClientRect();\n    isHovering = rectCheck(e.clientX - rect.left, e.clientY - rect.top);\n  };\n\n  const mouseLeave = () => (isHovering = false);\n\n  const click = () => {\n    if (!props.clickEffect) return;\n    isClicking = true;\n    clearTimeout(clickTimeoutId);\n    clickTimeoutId = setTimeout(() => (isClicking = false), 150);\n  };\n\n  if (props.enableHover) {\n    canvas.addEventListener('mousemove', mouseMove);\n    canvas.addEventListener('mouseleave', mouseLeave);\n  }\n\n  if (props.clickEffect) {\n    canvas.addEventListener('click', click);\n  }\n\n  onBeforeUnmount(() => {\n    cancelled = true;\n    cancelAnimationFrame(animationFrameId);\n    clearTimeout(glitchTimeoutId);\n    clearTimeout(glitchEndTimeoutId);\n    clearTimeout(clickTimeoutId);\n    canvas.removeEventListener('mousemove', mouseMove);\n    canvas.removeEventListener('mouseleave', mouseLeave);\n    canvas.removeEventListener('click', click);\n  });\n};\n\nonMounted(init);\n\nwatch(\n  () => ({ ...props, text: text.value }),\n  () => {\n    cancelled = true;\n    cancelAnimationFrame(animationFrameId);\n    cancelled = false;\n    init();\n  }\n);\n</script>\n\n<template>\n  <canvas ref=\"canvasRef\" :class=\"className\" />\n</template>\n","path":"FuzzyText/FuzzyText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
diff --git a/public/r/GradientText.json b/public/r/GradientText.json
index bc468b4..204e36a 100644
--- a/public/r/GradientText.json
+++ b/public/r/GradientText.json
@@ -1 +1 @@
-{"name":"GradientText","title":"GradientText","description":"Animated gradient sweep across live text with speed and color control.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\ninterface GradientTextProps {\n  text: string;\n  className?: string;\n  colors?: string[];\n  animationSpeed?: number;\n  showBorder?: boolean;\n}\n\nconst props = withDefaults(defineProps<GradientTextProps>(), {\n  text: '',\n  className: '',\n  colors: () => ['#ffaa40', '#9c40ff', '#ffaa40'],\n  animationSpeed: 8,\n  showBorder: false\n});\n\nconst gradientStyle = computed(() => ({\n  backgroundImage: `linear-gradient(to right, ${props.colors.join(', ')})`,\n  animationDuration: `${props.animationSpeed}s`,\n  backgroundSize: '300% 100%',\n  '--animation-duration': `${props.animationSpeed}s`\n}));\n\nconst borderStyle = computed(() => ({\n  ...gradientStyle.value\n}));\n\nconst textStyle = computed(() => ({\n  ...gradientStyle.value,\n  backgroundClip: 'text',\n  WebkitBackgroundClip: 'text'\n}));\n</script>\n\n<template>\n  <div\n    :class=\"`relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-[1.25rem] font-medium backdrop-blur transition-shadow duration-500 overflow-hidden cursor-pointer ${className}`\"\n  >\n    <div\n      v-if=\"showBorder\"\n      class=\"absolute inset-0 bg-cover z-0 pointer-events-none animate-gradient\"\n      :style=\"borderStyle\"\n    >\n      <div\n        class=\"absolute inset-0 bg-black rounded-[1.25rem] z-[-1]\"\n        style=\"width: calc(100% - 2px); height: calc(100% - 2px); left: 50%; top: 50%; transform: translate(-50%, -50%)\"\n      />\n    </div>\n\n    <div class=\"inline-block relative z-2 text-transparent bg-cover animate-gradient\" :style=\"textStyle\">\n      {{ text }}\n    </div>\n  </div>\n</template>\n\n<style scoped>\n@keyframes gradient {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n\n.animate-gradient {\n  animation: gradient var(--animation-duration, 8s) linear infinite;\n}\n</style>\n","path":"GradientText/GradientText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
+{"name":"GradientText","title":"GradientText","description":"Animated gradient sweep across live text with speed and color control.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { Motion, useAnimationFrame, useMotionValue, useTransform } from 'motion-v';\nimport { computed, ref, useSlots } from 'vue';\n\ninterface GradientTextProps {\n  className?: string;\n  colors?: string[];\n  animationSpeed?: number;\n  showBorder?: boolean;\n  direction?: 'horizontal' | 'vertical' | 'diagonal';\n  pauseOnHover?: boolean;\n  yoyo?: boolean;\n}\n\nconst props = withDefaults(defineProps<GradientTextProps>(), {\n  className: '',\n  colors: () => ['#27FF64', '#27FF64', '#A0FFBC'],\n  animationSpeed: 8,\n  showBorder: false,\n  direction: 'horizontal',\n  pauseOnHover: false,\n  yoyo: true\n});\n\nconst slots = useSlots();\nconst text = computed(() => (slots.default?.() ?? []).map(v => v.children).join(''));\n\nconst isPaused = ref(false);\nconst progress = useMotionValue(0);\nconst elapsedRef = ref(0);\nconst lastTimeRef = ref<number | null>(null);\n\nconst animationDuration = props.animationSpeed * 1000;\n\nuseAnimationFrame(time => {\n  if (isPaused.value) {\n    lastTimeRef.value = null;\n    return;\n  }\n\n  if (lastTimeRef.value === null) {\n    lastTimeRef.value = time;\n    return;\n  }\n\n  const deltaTime = time - lastTimeRef.value;\n  lastTimeRef.value = time;\n  elapsedRef.value += deltaTime;\n\n  if (props.yoyo) {\n    const fullCycle = animationDuration * 2;\n    const cycleTime = elapsedRef.value % fullCycle;\n\n    if (cycleTime < animationDuration) {\n      progress.set((cycleTime / animationDuration) * 100);\n    } else {\n      progress.set(100 - ((cycleTime - animationDuration) / animationDuration) * 100);\n    }\n  } else {\n    // Continuously increase position for seamless looping\n    progress.set((elapsedRef.value / animationDuration) * 100);\n  }\n});\n\nconst backgroundPosition = useTransform(progress, p => {\n  if (props.direction === 'horizontal') {\n    return `${p}% 50%`;\n  } else if (props.direction === 'vertical') {\n    return `50% ${p}%`;\n  } else {\n    // For diagonal, move only horizontally to avoid interference patterns\n    return `${p}% 50%`;\n  }\n});\n\nconst handleMouseEnter = () => {\n  if (props.pauseOnHover) isPaused.value = true;\n};\n\nconst handleMouseLeave = () => {\n  if (props.pauseOnHover) isPaused.value = false;\n};\n\nconst gradientAngle = computed(() =>\n  props.direction === 'horizontal' ? 'to right' : props.direction === 'vertical' ? 'to bottom' : 'to bottom right'\n);\n\n// Duplicate first color at the end for seamless looping\nconst gradientColors = computed(() => [...props.colors, props.colors[0]].join(', '));\n\nconst gradientStyle = computed(() => ({\n  backgroundImage: `linear-gradient(${gradientAngle.value}, ${gradientColors.value})`,\n  backgroundSize:\n    props.direction === 'horizontal' ? '300% 100%' : props.direction === 'vertical' ? '100% 300%' : '300% 300%',\n  backgroundRepeat: 'repeat'\n}));\n</script>\n\n<template>\n  <Motion\n    tag=\"div\"\n    :class=\"[\n      'relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-[1.25rem] font-medium backdrop-blur transition-shadow duration-500 overflow-hidden cursor-pointer',\n      className,\n      showBorder && 'py-1 px-2'\n    ]\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <Motion\n      tag=\"div\"\n      v-if=\"showBorder\"\n      class=\"z-0 absolute inset-0 rounded-[1.25rem] pointer-events-none\"\n      :style=\"{ ...gradientStyle, backgroundPosition }\"\n    >\n      <div\n        class=\"z-[-1] absolute bg-black rounded-[1.25rem]\"\n        :style=\"{\n          width: 'calc(100% - 2px)',\n          height: 'calc(100% - 2px)',\n          left: '50%',\n          top: '50%',\n          transform: 'translate(-50%, -50%)'\n        }\"\n      />\n    </Motion>\n\n    <Motion\n      tag=\"div\"\n      class=\"inline-block z-2 relative bg-clip-text text-transparent\"\n      :style=\"{\n        ...gradientStyle,\n        backgroundPosition,\n        WebkitBackgroundClip: 'text'\n      }\"\n    >\n      {{ text }}\n    </Motion>\n  </Motion>\n</template>\n","path":"GradientText/GradientText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
diff --git a/public/r/ShinyText.json b/public/r/ShinyText.json
index de2efc6..5aa8d4b 100644
--- a/public/r/ShinyText.json
+++ b/public/r/ShinyText.json
@@ -1 +1 @@
-{"name":"ShinyText","title":"ShinyText","description":"Metallic sheen sweeps across text producing a reflective highlight.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\ninterface ShinyTextProps {\n  text: string;\n  disabled?: boolean;\n  speed?: number;\n  className?: string;\n}\n\nconst props = withDefaults(defineProps<ShinyTextProps>(), {\n  text: '',\n  disabled: false,\n  speed: 5,\n  className: ''\n});\n\nconst animationDuration = computed(() => `${props.speed}s`);\n</script>\n\n<template>\n  <div\n    :class=\"`text-[#b5b5b5a4] bg-clip-text inline-block ${!props.disabled ? 'animate-shine' : ''} ${props.className}`\"\n    :style=\"{\n      backgroundImage:\n        'linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 60%)',\n      backgroundSize: '200% 100%',\n      WebkitBackgroundClip: 'text',\n      animationDuration: animationDuration\n    }\"\n  >\n    {{ props.text }}\n  </div>\n</template>\n\n<style scoped>\n@keyframes shine {\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n}\n\n.animate-shine {\n  animation: shine 5s linear infinite;\n}\n</style>\n","path":"ShinyText/ShinyText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
+{"name":"ShinyText","title":"ShinyText","description":"Metallic sheen sweeps across text producing a reflective highlight.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { Motion, useAnimationFrame, useMotionValue, useTransform } from 'motion-v';\nimport { computed, ref, watch } from 'vue';\n\ninterface ShinyTextProps {\n  text: string;\n  disabled?: boolean;\n  speed?: number;\n  className?: string;\n  color?: string;\n  shineColor?: string;\n  spread?: number;\n  yoyo?: boolean;\n  pauseOnHover?: boolean;\n  direction?: 'left' | 'right';\n  delay?: number;\n}\n\nconst props = withDefaults(defineProps<ShinyTextProps>(), {\n  disabled: false,\n  speed: 2,\n  className: '',\n  color: '#b5b5b5',\n  shineColor: '#ffffff',\n  spread: 120,\n  yoyo: false,\n  pauseOnHover: false,\n  direction: 'left',\n  delay: 0\n});\n\nconst isPaused = ref(false);\nconst progress = useMotionValue(0);\nconst elapsedRef = ref(0);\nconst lastTimeRef = ref<number | null>(null);\nconst directionRef = ref(props.direction === 'left' ? 1 : -1);\n\nconst animationDuration = computed(() => props.speed * 1000);\nconst delayDuration = computed(() => props.delay * 1000);\n\nuseAnimationFrame(time => {\n  if (props.disabled || isPaused.value) {\n    lastTimeRef.value = null;\n    return;\n  }\n\n  if (lastTimeRef.value === null) {\n    lastTimeRef.value = time;\n    return;\n  }\n\n  const deltaTime = time - lastTimeRef.value;\n  lastTimeRef.value = time;\n\n  elapsedRef.value += deltaTime;\n\n  // Animation goes from 0 to 100\n  if (props.yoyo) {\n    const cycleDuration = animationDuration.value + delayDuration.value;\n    const fullCycle = cycleDuration * 2;\n    const cycleTime = elapsedRef.value % fullCycle;\n\n    if (cycleTime < animationDuration.value) {\n      // Forward animation: 0 -> 100\n      const p = (cycleTime / animationDuration.value) * 100;\n      progress.set(directionRef.value === 1 ? p : 100 - p);\n    } else if (cycleTime < cycleDuration) {\n      // Delay at end\n      progress.set(directionRef.value === 1 ? 100 : 0);\n    } else if (cycleTime < cycleDuration + animationDuration.value) {\n      // Reverse animation: 100 -> 0\n      const reverseTime = cycleTime - cycleDuration;\n      const p = 100 - (reverseTime / animationDuration.value) * 100;\n      progress.set(directionRef.value === 1 ? p : 100 - p);\n    } else {\n      // Delay at start\n      progress.set(directionRef.value === 1 ? 0 : 100);\n    }\n  } else {\n    const cycleDuration = animationDuration.value + delayDuration.value;\n    const cycleTime = elapsedRef.value % cycleDuration;\n\n    if (cycleTime < animationDuration.value) {\n      // Animation phase: 0 -> 100\n      const p = (cycleTime / animationDuration.value) * 100;\n      progress.set(directionRef.value === 1 ? p : 100 - p);\n    } else {\n      // Delay phase - hold at end (shine off-screen)\n      progress.set(directionRef.value === 1 ? 100 : 0);\n    }\n  }\n});\n\nwatch(\n  () => props.direction,\n  () => {\n    directionRef.value = props.direction === 'left' ? 1 : -1;\n    elapsedRef.value = 0;\n    progress.set(0);\n  },\n  {\n    immediate: true\n  }\n);\n\nconst backgroundPosition = useTransform(progress, p => `${150 - p * 2}% center`);\n\nconst handleMouseEnter = () => {\n  if (props.pauseOnHover) isPaused.value = true;\n};\n\nconst handleMouseLeave = () => {\n  if (props.pauseOnHover) isPaused.value = false;\n};\n\nconst gradientStyle = computed(() => ({\n  backgroundImage: `linear-gradient(${props.spread}deg, ${props.color} 0%, ${props.color} 35%, ${props.shineColor} 50%, ${props.color} 65%, ${props.color} 100%)`,\n  backgroundSize: '200% auto',\n  WebkitBackgroundClip: 'text',\n  backgroundClip: 'text',\n  WebkitTextFillColor: 'transparent'\n}));\n</script>\n\n<template>\n  <Motion\n    tag=\"span\"\n    :class=\"['inline-block', className]\"\n    :style=\"{ ...gradientStyle, backgroundPosition }\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    {{ text }}\n  </Motion>\n</template>\n","path":"ShinyText/ShinyText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
diff --git a/public/r/SplitText.json b/public/r/SplitText.json
index 2cb8144..e3c3f4a 100644
--- a/public/r/SplitText.json
+++ b/public/r/SplitText.json
@@ -1 +1 @@
-{"name":"SplitText","title":"SplitText","description":"Splits text into characters / words for staggered entrance animation.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <p\n    ref=\"textRef\"\n    :class=\"`split-parent overflow-hidden inline-block whitespace-normal ${className}`\"\n    :style=\"{\n      textAlign,\n      wordWrap: 'break-word'\n    }\"\n  >\n    {{ text }}\n  </p>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport { SplitText as GSAPSplitText } from 'gsap/SplitText';\n\ngsap.registerPlugin(ScrollTrigger, GSAPSplitText);\n\nexport interface SplitTextProps {\n  text: string;\n  className?: string;\n  delay?: number;\n  duration?: number;\n  ease?: string | ((t: number) => number);\n  splitType?: 'chars' | 'words' | 'lines' | 'words, chars';\n  from?: gsap.TweenVars;\n  to?: gsap.TweenVars;\n  threshold?: number;\n  rootMargin?: string;\n  textAlign?: 'left' | 'center' | 'right' | 'justify';\n  onLetterAnimationComplete?: () => void;\n}\n\nconst props = withDefaults(defineProps<SplitTextProps>(), {\n  className: '',\n  delay: 100,\n  duration: 0.6,\n  ease: 'power3.out',\n  splitType: 'chars',\n  from: () => ({ opacity: 0, y: 40 }),\n  to: () => ({ opacity: 1, y: 0 }),\n  threshold: 0.1,\n  rootMargin: '-100px',\n  textAlign: 'center'\n});\n\nconst emit = defineEmits<{\n  'animation-complete': [];\n}>();\n\nconst textRef = useTemplateRef<HTMLParagraphElement>('textRef');\nconst animationCompletedRef = ref(false);\nconst scrollTriggerRef = ref<ScrollTrigger | null>(null);\nconst timelineRef = ref<gsap.core.Timeline | null>(null);\nconst splitterRef = ref<GSAPSplitText | null>(null);\n\nconst initializeAnimation = async () => {\n  if (typeof window === 'undefined' || !textRef.value || !props.text) return;\n\n  await nextTick();\n\n  const el = textRef.value;\n\n  animationCompletedRef.value = false;\n\n  const absoluteLines = props.splitType === 'lines';\n  if (absoluteLines) el.style.position = 'relative';\n\n  let splitter: GSAPSplitText;\n  try {\n    splitter = new GSAPSplitText(el, {\n      type: props.splitType,\n      absolute: absoluteLines,\n      linesClass: 'split-line'\n    });\n    splitterRef.value = splitter;\n  } catch (error) {\n    console.error('Failed to create SplitText:', error);\n    return;\n  }\n\n  let targets: Element[];\n  switch (props.splitType) {\n    case 'lines':\n      targets = splitter.lines;\n      break;\n    case 'words':\n      targets = splitter.words;\n      break;\n    case 'chars':\n      targets = splitter.chars;\n      break;\n    default:\n      targets = splitter.chars;\n  }\n\n  if (!targets || targets.length === 0) {\n    console.warn('No targets found for SplitText animation');\n    splitter.revert();\n    return;\n  }\n\n  targets.forEach(t => {\n    (t as HTMLElement).style.willChange = 'transform, opacity';\n  });\n\n  const startPct = (1 - props.threshold) * 100;\n  const marginMatch = /^(-?\\d+(?:\\.\\d+)?)(px|em|rem|%)?$/.exec(props.rootMargin);\n  const marginValue = marginMatch ? parseFloat(marginMatch[1]) : 0;\n  const marginUnit = marginMatch ? marginMatch[2] || 'px' : 'px';\n  const sign = marginValue < 0 ? `-=${Math.abs(marginValue)}${marginUnit}` : `+=${marginValue}${marginUnit}`;\n  const start = `top ${startPct}%${sign}`;\n\n  const tl = gsap.timeline({\n    scrollTrigger: {\n      trigger: el,\n      start,\n      toggleActions: 'play none none none',\n      once: true,\n      onToggle: self => {\n        scrollTriggerRef.value = self;\n      }\n    },\n    smoothChildTiming: true,\n    onComplete: () => {\n      animationCompletedRef.value = true;\n      gsap.set(targets, {\n        ...props.to,\n        clearProps: 'willChange',\n        immediateRender: true\n      });\n      props.onLetterAnimationComplete?.();\n      emit('animation-complete');\n    }\n  });\n\n  timelineRef.value = tl;\n\n  tl.set(targets, { ...props.from, immediateRender: false, force3D: true });\n  tl.to(targets, {\n    ...props.to,\n    duration: props.duration,\n    ease: props.ease,\n    stagger: props.delay / 1000,\n    force3D: true\n  });\n};\n\nconst cleanup = () => {\n  if (timelineRef.value) {\n    timelineRef.value.kill();\n    timelineRef.value = null;\n  }\n  if (scrollTriggerRef.value) {\n    scrollTriggerRef.value.kill();\n    scrollTriggerRef.value = null;\n  }\n  if (splitterRef.value) {\n    gsap.killTweensOf(textRef.value);\n    splitterRef.value.revert();\n    splitterRef.value = null;\n  }\n};\n\nonMounted(() => {\n  initializeAnimation();\n});\n\nonUnmounted(() => {\n  cleanup();\n});\n\nwatch(\n  [\n    () => props.text,\n    () => props.delay,\n    () => props.duration,\n    () => props.ease,\n    () => props.splitType,\n    () => props.from,\n    () => props.to,\n    () => props.threshold,\n    () => props.rootMargin,\n    () => props.onLetterAnimationComplete\n  ],\n  () => {\n    cleanup();\n    initializeAnimation();\n  }\n);\n</script>\n","path":"SplitText/SplitText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
+{"name":"SplitText","title":"SplitText","description":"Splits text into characters / words for staggered entrance animation.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <component :is=\"tag\" ref=\"elRef\" :style=\"styles\" :class=\"classes\">\n    {{ text }}\n  </component>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, watch, type CSSProperties, onBeforeUnmount, computed } from 'vue';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport { SplitText as GSAPSplitText } from 'gsap/SplitText';\n\ngsap.registerPlugin(ScrollTrigger, GSAPSplitText);\n\nexport interface SplitTextProps {\n  text: string;\n  className?: string;\n  delay?: number;\n  duration?: number;\n  ease?: string | ((t: number) => number);\n  splitType?: 'chars' | 'words' | 'lines';\n  from?: gsap.TweenVars;\n  to?: gsap.TweenVars;\n  threshold?: number;\n  rootMargin?: string;\n  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';\n  textAlign?: CSSProperties['textAlign'];\n  onLetterAnimationComplete?: () => void;\n}\n\nconst props = withDefaults(defineProps<SplitTextProps>(), {\n  className: '',\n  delay: 50,\n  duration: 1.25,\n  ease: 'power3.out',\n  splitType: 'chars',\n  from: () => ({ opacity: 0, y: 40 }),\n  to: () => ({ opacity: 1, y: 0 }),\n  threshold: 0.1,\n  rootMargin: '-100px',\n  tag: 'p',\n  textAlign: 'center'\n});\n\nconst emit = defineEmits<{\n  'animation-complete': [];\n}>();\n\nconst elRef = ref<HTMLElement | null>(null);\nconst fontsLoaded = ref(false);\nconst animationCompleted = ref(false);\n\nlet splitInstance: GSAPSplitText | null = null;\n\nonMounted(() => {\n  if (document.fonts.status === 'loaded') {\n    fontsLoaded.value = true;\n  } else {\n    document.fonts.ready.then(() => {\n      fontsLoaded.value = true;\n    });\n  }\n});\n\nconst runAnimation = () => {\n  if (!elRef.value || !props.text || !fontsLoaded.value) return;\n  if (animationCompleted.value) return;\n\n  const el = elRef.value as HTMLElement & {\n    _rbsplitInstance?: GSAPSplitText;\n  };\n\n  // cleanup previous\n  if (el._rbsplitInstance) {\n    try {\n      el._rbsplitInstance.revert();\n    } catch {}\n    el._rbsplitInstance = undefined;\n  }\n\n  const startPct = (1 - props.threshold) * 100;\n  const marginMatch = /^(-?\\d+(?:\\.\\d+)?)(px|em|rem|%)?$/.exec(props.rootMargin);\n  const marginValue = marginMatch ? parseFloat(marginMatch[1]) : 0;\n  const marginUnit = marginMatch?.[2] || 'px';\n\n  const sign =\n    marginValue === 0\n      ? ''\n      : marginValue < 0\n        ? `-=${Math.abs(marginValue)}${marginUnit}`\n        : `+=${marginValue}${marginUnit}`;\n\n  const start = `top ${startPct}%${sign}`;\n\n  let targets: Element[] = [];\n\n  const assignTargets = (self: GSAPSplitText) => {\n    if (props.splitType.includes('chars') && self.chars?.length) targets = self.chars;\n    if (!targets.length && props.splitType.includes('words') && self.words?.length) targets = self.words;\n    if (!targets.length && props.splitType.includes('lines') && self.lines?.length) targets = self.lines;\n    if (!targets.length) targets = self.chars || self.words || self.lines;\n  };\n\n  splitInstance = new GSAPSplitText(el, {\n    type: props.splitType,\n    smartWrap: true,\n    autoSplit: props.splitType === 'lines',\n    linesClass: 'split-line',\n    wordsClass: 'split-word',\n    charsClass: 'split-char',\n    reduceWhiteSpace: false,\n    onSplit(self) {\n      assignTargets(self);\n\n      return gsap.fromTo(\n        targets,\n        { ...props.from },\n        {\n          ...props.to,\n          duration: props.duration,\n          ease: props.ease,\n          stagger: props.delay / 1000,\n          scrollTrigger: {\n            trigger: el,\n            start,\n            once: true,\n            fastScrollEnd: true,\n            anticipatePin: 0.4\n          },\n          onComplete() {\n            animationCompleted.value = true;\n            props.onLetterAnimationComplete?.();\n            emit('animation-complete');\n          },\n          willChange: 'transform, opacity',\n          force3D: true\n        }\n      );\n    }\n  });\n\n  el._rbsplitInstance = splitInstance;\n};\n\nwatch(\n  () => [\n    props.text,\n    props.delay,\n    props.duration,\n    props.ease,\n    props.splitType,\n    JSON.stringify(props.from),\n    JSON.stringify(props.to),\n    props.threshold,\n    props.rootMargin,\n    fontsLoaded.value\n  ],\n  runAnimation,\n  { deep: true }\n);\n\nonBeforeUnmount(() => {\n  ScrollTrigger.getAll().forEach(st => {\n    if (st.trigger === elRef.value) st.kill();\n  });\n\n  try {\n    splitInstance?.revert();\n  } catch {}\n});\n\nconst styles = computed(() => ({\n  textAlign: props.textAlign,\n  wordWrap: 'break-word',\n  willChange: 'transform, opacity'\n}));\n\nconst classes = computed(() => `split-parent overflow-hidden inline-block whitespace-normal ${props.className}`);\n</script>\n","path":"SplitText/SplitText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file

From 7d921d26ca12ccf22baf28a0dd21c4dbb6cfc6eb Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Mon, 2 Feb 2026 11:41:59 +0530
Subject: [PATCH 9/9] [ FIX ] : package-lock.json

---
 package-lock.json | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 720c66b..35d15e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,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",
@@ -8164,13 +8164,13 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.23.12",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
-      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.2.tgz",
+      "integrity": "sha512-lSNRzBJk4wuIy0emYQ/nfZ7eWhqud2umPKw2QAQki6uKhZPKm2hRQHeQoHTG9MIvfobb+A/LbEWPJU794ZUKrg==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.23.12",
-        "motion-utils": "^12.23.6",
+        "motion-dom": "^12.29.2",
+        "motion-utils": "^12.29.2",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -9984,29 +9984,29 @@
       "license": "MIT"
     },
     "node_modules/motion-dom": {
-      "version": "12.23.12",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
-      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.29.2.tgz",
+      "integrity": "sha512-/k+NuycVV8pykxyiTCoFzIVLA95Nb1BFIVvfSu9L50/6K6qNeAYtkxXILy/LRutt7AzaYDc2myj0wkCVVYAPPA==",
       "license": "MIT",
       "dependencies": {
-        "motion-utils": "^12.23.6"
+        "motion-utils": "^12.29.2"
       }
     },
     "node_modules/motion-utils": {
-      "version": "12.23.6",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
-      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
+      "integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
       "license": "MIT"
     },
     "node_modules/motion-v": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/motion-v/-/motion-v-1.7.1.tgz",
-      "integrity": "sha512-B22fYcHGx05moUtoIH0ZP/JzeacGOHzLkLmMTKU9tRB+uVMSfgqiXVzZb602qiG1ap8W7TZ+5RD5R3MmODu9oA==",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/motion-v/-/motion-v-1.10.2.tgz",
+      "integrity": "sha512-K+Zus21KKgZP4CBY7CvU/B7UZCV9sZTHG0FgsAfGHlbZi+u8EolmZ2kvJe5zOG0RzCgdiVCobHBt54qch9rweg==",
       "license": "MIT",
       "dependencies": {
-        "framer-motion": "12.23.12",
+        "framer-motion": "^12.25.0",
         "hey-listen": "^1.0.8",
-        "motion-dom": "12.23.12"
+        "motion-dom": "^12.23.23"
       },
       "peerDependencies": {
         "@vueuse/core": ">=10.0.0",