Merge pull request #137 from Utkarsh-Singhal-26/refact/text-animations

[ REVAMP ] : Text Animations

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",
+      "version": "12.29.2",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.2.tgz",
-      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+      "integrity": "sha512-lSNRzBJk4wuIy0emYQ/nfZ7eWhqud2umPKw2QAQki6uKhZPKm2hRQHeQoHTG9MIvfobb+A/LbEWPJU794ZUKrg==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.23.12",
+        "motion-dom": "^12.29.2",
-        "motion-utils": "^12.23.6",
+        "motion-utils": "^12.29.2",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -9984,29 +9984,29 @@
       "license": "MIT"
     },
     "node_modules/motion-dom": {
-      "version": "12.23.12",
+      "version": "12.29.2",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.29.2.tgz",
-      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "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",
+      "version": "12.29.2",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
-      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
       "license": "MIT"
     },
     "node_modules/motion-v": {
-      "version": "1.7.1",
+      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/motion-v/-/motion-v-1.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/motion-v/-/motion-v-1.10.2.tgz",
-      "integrity": "sha512-B22fYcHGx05moUtoIH0ZP/JzeacGOHzLkLmMTKU9tRB+uVMSfgqiXVzZb602qiG1ap8W7TZ+5RD5R3MmODu9oA==",
+      "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",

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",

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"]}
+{"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"]}

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"]}
+{"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"]}

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"]}
+{"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"]}

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"
+    :delay="200"
-    root-margin="0px"
+    class-name="text-2xl font-semibold text-center"
-    :step-duration="0.35"
     @animation-complete="handleAnimationComplete"
   />
 </template>

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">

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="['#27FF64', '#27FF64', '#A0FFBC']"
-    :colors="['#ffaa40', '#9c40ff', '#ffaa40']"
+    :animation-speed="3"
-    :animation-speed="8"
     :show-border="false"
     class-name="your-custom-class"
-  />
+  >
+    Add a splash of color!
+  </GradientText>
 </template>
 
 <script setup lang="ts">

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!" 
+    text="✨ Shiny Text Effect"
-    :disabled="false" 
+    :speed="2"
-    :speed="3" 
+    :delay="0.5"
-    class-name="your-custom-class"
+    :disabled="false"
+    :color="'#b5b5b5'"
+    :shine-color="'#ffffff'"
+    :spread="120"
+    :direction="'left'"
+    :yoyo="false"
+    :pause-on-hover="false"
   />
 </template>
 

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="{
+      @animation-complete="handleAnimationComplete(index)"
-        display: 'inline-block',
+      style="display: inline-block; will-change: transform, filter, opacity"
-        willChange: 'transform, filter, opacity'
-      }"
-      @animation-complete="() => handleAnimationComplete(index)"
     >
-      {{ segment === ' ' ? '\u00A0' : segment
+      {{ segment === ' ' ? '\u00A0' : segment }}
-      }}{{ animateBy === 'words' && index < elements.length - 1 ? '\u00A0' : '' }}
+      <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, type Transition } from 'motion-v';
-import { Motion } from 'motion-v';
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
 
-type AnimateBy = 'words' | 'letters';
+type BlurTextProps = {
-type Direction = 'top' | 'bottom';
-type AnimationSnapshot = Record<string, string | number>;
-
-interface BlurTextProps {
   text?: string;
   delay?: number;
   className?: string;
-  animateBy?: AnimateBy;
+  animateBy?: 'words' | 'letters';
-  direction?: Direction;
+  direction?: 'top' | 'bottom';
   threshold?: number;
   rootMargin?: string;
-  animationFrom?: AnimationSnapshot;
+  animationFrom?: Record<string, string | number>;
-  animationTo?: AnimationSnapshot[];
+  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,
+  animateBy: 'words',
-  direction: 'top' as Direction,
+  direction: 'top',
   threshold: 0.1,
   rootMargin: '0px',
   easing: (t: number) => t,
   stepDuration: 0.35
 });
 
-const buildKeyframes = (
+const inView = ref(false);
-  from: AnimationSnapshot,
+const rootRef = useTemplateRef<HTMLParagraphElement>('rootRef');
-  steps: AnimationSnapshot[]
+let observer: IntersectionObserver | null = null;
-): Record<string, Array<string | number>> => {
-  const keys = new Set<string>([...Object.keys(from), ...steps.flatMap(step => Object.keys(step))]);
 
-  const keyframes: Record<string, Array<string | number>> = {};
+onMounted(() => {
+  if (!rootRef.value) return;
 
-  for (const key of keys) {
+  observer = new IntersectionObserver(
-    keyframes[key] = [from[key], ...steps.map(step => step[key])];
+    ([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 getTransition = (index: number): Transition => ({
-const animationKey = ref(0);
+  duration: totalDuration.value,
-const completionFired = ref(false);
+  times: times.value,
-const rootRef = useTemplateRef<HTMLParagraphElement>('rootRef');
+  delay: (index * props.delay) / 1000,
-
+  ease: props.easing
-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 handleAnimationComplete = (index: number) => {
-  if (index === elements.value.length - 1 && !completionFired.value && props.onAnimationComplete) {
+  if (index === elements.value.length - 1) {
-    completionFired.value = true;
+    props.onAnimationComplete?.();
-    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>

src/content/TextAnimations/CircularText/CircularText.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect, onUnmounted } from 'vue';
+import { animate, Motion, MotionValue, useMotionValue } from 'motion-v';
-import { Motion } 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);
+let currentAnimation: ReturnType<typeof animate> | null = null;
-const animationId = ref<number | null>(null);
-const lastTime = ref<number>(Date.now());
-const rotationSpeed = ref<number>(0);
 
-const getCurrentSpeed = () => {
+const startRotation = (duration: number) => {
-  if (isHovered.value && props.onHover === 'pause') return 0;
+  currentAnimation?.stop();
+  const start = rotation.get();
 
-  const baseDuration = props.spinDuration;
+  currentAnimation = animate(rotation, start + 360, {
-  const baseSpeed = 360 / baseDuration;
+    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;
+      startRotation(props.spinDuration / 20);
-    default:
+      break;
-      return baseSpeed;
   }
 };
 
-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="{
+    tag="div"
-      rotate: currentRotation,
+    :class="[
-      scale: getCurrentScale()
+      '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="{
+    :initial="{
-      rotate: {
+      rotate: 0
-        duration: 0
-      },
-      scale: {
-        type: 'spring',
-        damping: 20,
-        stiffness: 300
-      }
     }"
-    :class="`m-0 mx-auto rounded-full w-[200px] h-[200px] relative font-black text-white text-center cursor-pointer origin-center ${props.className}`"
     @mouseenter="handleHoverStart"
     @mouseleave="handleHoverEnd"
   >
     <span
       v-for="(letter, i) in letters"
       :key="i"
-      class="absolute inline-block inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]"
+      class="inline-block absolute inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]"
       :style="{
         transform: getLetterTransform(i),
         WebkitTransform: getLetterTransform(i)

src/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 glitchTimeoutId: ReturnType<typeof setTimeout>;
-let cleanup: (() => void) | null = null;
+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> => {
+const text = computed(() => (slots.default?.() ?? []).map(v => v.children).join(''));
-  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 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(getComputedStyle(temp).fontSize);
-    numericFontSize = parseFloat(computedSize);
     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');
+  const offCtx = offscreen.getContext('2d')!;
-  if (!offCtx) return;
-
-  const fontString = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
   offCtx.font = fontString;
+  offCtx.textBaseline = 'alphabetic';
 
-  const testMetrics = offCtx.measureText('M');
+  let totalWidth = 0;
-  if (testMetrics.width === 0) {
+  if (props.letterSpacing !== 0) {
-    setTimeout(() => {
+    for (const char of text.value) {
-      if (!isCancelled) {
+      totalWidth += offCtx.measureText(char).width + props.letterSpacing;
-        initCanvas();
+    }
-      }
+    totalWidth -= props.letterSpacing;
-    }, 100);
+  } else {
-    return;
+    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;
+  if (props.gradient && props.gradient.length >= 2) {
-  const actualRight = metrics.actualBoundingBoxRight ?? metrics.width;
+    const grad = offCtx.createLinearGradient(0, 0, offscreen.width, 0);
-  const actualAscent = metrics.actualBoundingBoxAscent ?? numericFontSize;
+    props.gradient.forEach((c, i) => grad.addColorStop(i / (props.gradient!.length - 1), c));
-  const actualDescent = metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2;
+    offCtx.fillStyle = grad;
+  } else {
+    offCtx.fillStyle = props.color;
+  }
 
-  const textBoundingWidth = Math.ceil(actualLeft + actualRight);
+  let x = 10;
-  const tightHeight = Math.ceil(actualAscent + actualDescent);
+  for (const char of text.value) {
+    offCtx.fillText(char, x, ascent);
+    x += offCtx.measureText(char).width + props.letterSpacing;
+  }
 
-  const extraWidthBuffer = 10;
+  const marginX = props.fuzzRange + 20;
-  const offscreenWidth = textBoundingWidth + extraWidthBuffer;
+  const marginY = props.direction === 'vertical' || props.direction === 'both' ? props.fuzzRange + 10 : 0;
 
-  offscreen.width = offscreenWidth;
+  canvas.width = offscreen.width + marginX * 2;
-  offscreen.height = tightHeight;
+  canvas.height = offscreen.height + marginY * 2;
-
+  ctx.translate(marginX, marginY);
-  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;
 
   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 = () => {
+  const startGlitch = () => {
-    if (isCancelled) return;
+    if (!props.glitchMode || cancelled) return;
-    ctx.clearRect(-fuzzRange, -fuzzRange, offscreenWidth + 2 * fuzzRange, tightHeight + 2 * fuzzRange);
+    glitchTimeoutId = setTimeout(() => {
-    const intensity = isHovering ? props.hoverIntensity : props.baseIntensity;
+      isGlitching = true;
-    for (let j = 0; j < tightHeight; j++) {
+      glitchEndTimeoutId = setTimeout(() => {
-      const dx = Math.floor(intensity * (Math.random() - 0.5) * fuzzRange);
+        isGlitching = false;
-      ctx.drawImage(offscreen, 0, j, offscreenWidth, 1, dx, j, offscreenWidth, 1);
+        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) =>
+  const rectCheck = (x: number, y: number) =>
-    x >= interactiveLeft && x <= interactiveRight && y >= interactiveTop && y <= interactiveBottom;
+    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;
+    isHovering = rectCheck(e.clientX - rect.left, e.clientY - rect.top);
-    const y = e.clientY - rect.top;
-    isHovering = isInsideTextArea(x, y);
   };
 
-  const handleMouseLeave = () => {
+  const mouseLeave = () => (isHovering = false);
-    isHovering = false;
-  };
 
-  const handleTouchMove = (e: TouchEvent) => {
+  const click = () => {
-    if (!props.enableHover) return;
+    if (!props.clickEffect) return;
-    e.preventDefault();
+    isClicking = true;
-    const rect = canvas.getBoundingClientRect();
+    clearTimeout(clickTimeoutId);
-    const touch = e.touches[0];
+    clickTimeoutId = setTimeout(() => (isClicking = false), 150);
-    const x = touch.clientX - rect.left;
-    const y = touch.clientY - rect.top;
-    isHovering = isInsideTextArea(x, y);
-  };
-
-  const handleTouchEnd = () => {
-    isHovering = false;
   };
 
   if (props.enableHover) {
-    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mousemove', mouseMove);
-    canvas.addEventListener('mouseleave', handleMouseLeave);
+    canvas.addEventListener('mouseleave', mouseLeave);
-    canvas.addEventListener('touchmove', handleTouchMove, { passive: false });
-    canvas.addEventListener('touchend', handleTouchEnd);
   }
 
-  cleanup = () => {
+  if (props.clickEffect) {
-    window.cancelAnimationFrame(animationFrameId);
+    canvas.addEventListener('click', click);
-    if (props.enableHover) {
+  }
-      canvas.removeEventListener('mousemove', handleMouseMove);
+
-      canvas.removeEventListener('mouseleave', handleMouseLeave);
+  onBeforeUnmount(() => {
-      canvas.removeEventListener('touchmove', handleTouchMove);
+    cancelled = true;
-      canvas.removeEventListener('touchend', handleTouchEnd);
+    cancelAnimationFrame(animationFrameId);
-    }
+    clearTimeout(glitchTimeoutId);
-  };
+    clearTimeout(glitchEndTimeoutId);
+    clearTimeout(clickTimeoutId);
+    canvas.removeEventListener('mousemove', mouseMove);
+    canvas.removeEventListener('mouseleave', mouseLeave);
+    canvas.removeEventListener('click', click);
+  });
 };
 
-onMounted(() => {
+onMounted(init);
-  nextTick(() => {
-    initCanvas();
-  });
-});
-
-onUnmounted(() => {
-  isCancelled = true;
-  if (animationFrameId) {
-    window.cancelAnimationFrame(animationFrameId);
-  }
-  if (cleanup) {
-    cleanup();
-  }
-});
 
 watch(
-  [
+  () => ({ ...props, text: text.value }),
-    () => props.text,
-    () => props.fontSize,
-    () => props.fontWeight,
-    () => props.fontFamily,
-    () => props.color,
-    () => props.enableHover,
-    () => props.baseIntensity,
-    () => props.hoverIntensity
-  ],
   () => {
-    isCancelled = true;
+    cancelled = true;
-    if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId);
-      window.cancelAnimationFrame(animationFrameId);
+    cancelled = false;
-    }
+    init();
-    if (cleanup) {
-      cleanup();
-    }
-    isCancelled = false;
-    nextTick(() => {
-      initCanvas();
-    });
   }
 );
 </script>
 
 <template>
-  <canvas ref="canvasRef" />
+  <canvas ref="canvasRef" :class="className" />
 </template>

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(', ')})`,
+  backgroundImage: `linear-gradient(${gradientAngle.value}, ${gradientColors.value})`,
-  animationDuration: `${props.animationSpeed}s`,
+  backgroundSize:
-  backgroundSize: '300% 100%',
+    props.direction === 'horizontal' ? '300% 100%' : props.direction === 'vertical' ? '100% 300%' : '300% 300%',
-  '--animation-duration': `${props.animationSpeed}s`
+  backgroundRepeat: 'repeat'
-}));
-
-const borderStyle = computed(() => ({
-  ...gradientStyle.value
-}));
-
-const textStyle = computed(() => ({
-  ...gradientStyle.value,
-  backgroundClip: 'text',
-  WebkitBackgroundClip: 'text'
 }));
 </script>
 
 <template>
-  <div
+  <Motion
-    :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}`"
+    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"
+      class="z-0 absolute inset-0 rounded-[1.25rem] pointer-events-none"
-      :style="borderStyle"
+      :style="{ ...gradientStyle, backgroundPosition }"
     >
       <div
-        class="absolute inset-0 bg-black rounded-[1.25rem] z-[-1]"
+        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%)"
+        :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>
+    </Motion>
-  </div>
+  </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>

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,
+  speed: 2,
-  className: ''
+  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
+  <Motion
-    :class="`text-[#b5b5b5a4] bg-clip-text inline-block ${!props.disabled ? 'animate-shine' : ''} ${props.className}`"
+    tag="span"
-    :style="{
+    :class="['inline-block', className]"
-      backgroundImage:
+    :style="{ ...gradientStyle, backgroundPosition }"
-        'linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 60%)',
+    @mouseenter="handleMouseEnter"
-      backgroundSize: '200% 100%',
+    @mouseleave="handleMouseLeave"
-      WebkitBackgroundClip: 'text',
-      animationDuration: animationDuration
-    }"
   >
-    {{ props.text }}
+    {{ text }}
-  </div>
+  </Motion>
 </template>
-
-<style scoped>
-@keyframes shine {
-  0% {
-    background-position: 100%;
-  }
-  100% {
-    background-position: -100%;
-  }
-}
-
-.animate-shine {
-  animation: shine 5s linear infinite;
-}
-</style>

src/content/TextAnimations/SplitText/SplitText.vue

@@ -1,18 +1,11 @@
 <template>
-  <p
+  <component :is="tag" ref="elRef" :style="styles" :class="classes">
-    ref="textRef"
-    :class="`split-parent overflow-hidden inline-block whitespace-normal ${className}`"
-    :style="{
-      textAlign,
-      wordWrap: 'break-word'
-    }"
-  >
     {{ 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,
+  delay: 50,
-  duration: 0.6,
+  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 elRef = ref<HTMLElement | null>(null);
-const animationCompletedRef = ref(false);
+const fontsLoaded = ref(false);
-const scrollTriggerRef = ref<ScrollTrigger | null>(null);
+const animationCompleted = ref(false);
-const timelineRef = ref<gsap.core.Timeline | null>(null);
-const splitterRef = ref<GSAPSplitText | null>(null);
 
-const initializeAnimation = async () => {
+let splitInstance: GSAPSplitText | null = null;
-  if (typeof window === 'undefined' || !textRef.value || !props.text) return;
 
-  await nextTick();
+onMounted(() => {
-
+  if (document.fonts.status === 'loaded') {
-  const el = textRef.value;
+    fontsLoaded.value = true;
-
+  } else {
-  animationCompletedRef.value = false;
+    document.fonts.ready.then(() => {
-
+      fontsLoaded.value = true;
-  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'
     });
-    splitterRef.value = splitter;
-  } catch (error) {
-    console.error('Failed to create SplitText:', error);
-    return;
   }
+});
 
-  let targets: Element[];
+const runAnimation = () => {
-  switch (props.splitType) {
+  if (!elRef.value || !props.text || !fontsLoaded.value) return;
-    case 'lines':
+  if (animationCompleted.value) return;
-      targets = splitter.lines;
+
-      break;
+  const el = elRef.value as HTMLElement & {
-    case 'words':
+    _rbsplitInstance?: GSAPSplitText;
-      targets = splitter.words;
+  };
-      break;
+
-    case 'chars':
+  // cleanup previous
-      targets = splitter.chars;
+  if (el._rbsplitInstance) {
-      break;
+    try {
-    default:
+      el._rbsplitInstance.revert();
-      targets = splitter.chars;
+    } 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 marginUnit = marginMatch?.[2] || 'px';
-  const sign = marginValue < 0 ? `-=${Math.abs(marginValue)}${marginUnit}` : `+=${marginValue}${marginUnit}`;
+
+  const sign =
+    marginValue === 0
+      ? ''
+      : marginValue < 0
+        ? `-=${Math.abs(marginValue)}${marginUnit}`
+        : `+=${marginValue}${marginUnit}`;
+
   const start = `top ${startPct}%${sign}`;
 
-  const tl = gsap.timeline({
+  let targets: Element[] = [];
-    scrollTrigger: {
+
-      trigger: el,
+  const assignTargets = (self: GSAPSplitText) => {
-      start,
+    if (props.splitType.includes('chars') && self.chars?.length) targets = self.chars;
-      toggleActions: 'play none none none',
+    if (!targets.length && props.splitType.includes('words') && self.words?.length) targets = self.words;
-      once: true,
+    if (!targets.length && props.splitType.includes('lines') && self.lines?.length) targets = self.lines;
-      onToggle: self => {
+    if (!targets.length) targets = self.chars || self.words || self.lines;
-        scrollTriggerRef.value = self;
+  };
-      }
+
-    },
+  splitInstance = new GSAPSplitText(el, {
-    smoothChildTiming: true,
+    type: props.splitType,
-    onComplete: () => {
+    smartWrap: true,
-      animationCompletedRef.value = true;
+    autoSplit: props.splitType === 'lines',
-      gsap.set(targets, {
+    linesClass: 'split-line',
-        ...props.to,
+    wordsClass: 'split-word',
-        clearProps: 'willChange',
+    charsClass: 'split-char',
-        immediateRender: true
+    reduceWhiteSpace: false,
-      });
+    onSplit(self) {
-      props.onLetterAnimationComplete?.();
+      assignTargets(self);
-      emit('animation-complete');
+
+      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;
+  el._rbsplitInstance = splitInstance;
-
-  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
-  });
 };
 
-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.text,
-    () => props.delay,
+    props.delay,
-    () => props.duration,
+    props.duration,
-    () => props.ease,
+    props.ease,
-    () => props.splitType,
+    props.splitType,
-    () => props.from,
+    JSON.stringify(props.from),
-    () => props.to,
+    JSON.stringify(props.to),
-    () => props.threshold,
+    props.threshold,
-    () => props.rootMargin,
+    props.rootMargin,
-    () => props.onLetterAnimationComplete
+    fontsLoaded.value
   ],
-  () => {
+  runAnimation,
-    cleanup();
+  { deep: true }
-    initializeAnimation();
-  }
 );
+
+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>

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"
+          :delay="delay"
-          :root-margin="rootMargin"
+          class-name="blur-text-demo"
-          :step-duration="stepDuration"
+          @animation-complete="showToast"
-          @animation-complete="
-            () => {
-              showCallback && showToast();
-            }
-          "
         />
       </div>
 
       <Customize>
-        <PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
+        <div class="flex flex-wrap gap-4">
-
-        <div class="flex gap-4 flex-wrap">
           <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="Delay"
-        <PreviewSlider title="Step Duration (s)" v-model="stepDuration" :min="0.1" :max="1" :step="0.05" />
+          v-model="delay"
-
+          :min="50"
-        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
+          :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 CliInstallation from '@/components/code/CliInstallation.vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
-import RefreshButton from '../../components/common/RefreshButton.vue';
+import Dependencies from '@/components/code/Dependencies.vue';
-import PropTable from '../../components/common/PropTable.vue';
+import Customize from '@/components/common/Customize.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
+import PropTable from '@/components/common/PropTable.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
+import RefreshButton from '@/components/common/RefreshButton.vue';
-import Customize from '../../components/common/Customize.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.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 { 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',
+    name: 'rootMargin',
-    type: 'array',
+    type: 'string',
-    default: 'undefined',
+    default: '"0px"',
-    description: 'Custom target animation properties array.'
+    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',

src/demo/TextAnimations/CircularTextDemo.vue

@@ -1,28 +1,14 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container h-[400px] overflow-hidden">
+      <div class="h-[400px] overflow-hidden demo-container">
-        <CircularText
+        <CircularText :key="rerenderKey" :text="text" :spin-duration="spinDuration" :on-hover="onHover" />
-          :key="rerenderKey"
-          text="VUE * BITS * IS * AWESOME * "
-          :spin-duration="spinDuration"
-          :on-hover="onHover"
-          class-name="text-blue-500"
-        />
       </div>
 
       <Customize>
-        <div class="flex gap-4 flex-wrap">
+        <PreviewText title="Text" v-model="text" />
-          <button
+        <PreviewSelect title="On Hover" v-model="onHover" :options="hoverOptions" />
-            class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
+        <PreviewSlider title="Spin Duration (s)" v-model="spinDuration" :min="1" :max="60" :step="1" />
-            @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" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -41,45 +27,58 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import CliInstallation from '@/components/code/CliInstallation.vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
-import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '@/components/code/Dependencies.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
+import Customize from '@/components/common/Customize.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
+import PreviewSelect from '@/components/common/PreviewSelect.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
-import Customize from '../../components/common/Customize.vue';
+import PreviewText from '@/components/common/PreviewText.vue';
-import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PropTable from '@/components/common/PropTable.vue';
-import CircularText from '../../content/TextAnimations/CircularText/CircularText.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
-import { circularText } from '@/constants/code/TextAnimations/circularTextCode';
 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'> = [
+const hoverOptions = [
-  'slowDown',
+  { label: 'Slow Down', value: 'slowDown' },
-  'speedUp',
+  { label: 'Speed Up', value: 'speedUp' },
-  'pause',
+  { label: 'Pause', value: 'pause' },
-  'goBonkers'
+  { 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',
+    type: "'slowDown' | 'speedUp' | 'pause' | 'goBonkers'",
-    default: '"speedUp"',
+    default: 'undefined',
-    description: 'Hover behavior: "slowDown", "speedUp", "pause", or "goBonkers".'
+    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>

src/demo/TextAnimations/FuzzyTextDemo.vue

@@ -1,37 +1,74 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container h-[500px] overflow-hidden">
+      <div class="h-[500px] overflow-hidden demo-container">
-        <div class="flex flex-col items-center justify-center h-full">
+        <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 CliInstallation from '@/components/code/CliInstallation.vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
-import PropTable from '../../components/common/PropTable.vue';
+import Customize from '@/components/common/Customize.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
-import Customize from '../../components/common/Customize.vue';
+import PropTable from '@/components/common/PropTable.vue';
-import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
-import FuzzyText from '../../content/TextAnimations/FuzzyText/FuzzyText.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"',
+    default: `"inherit"`,
-    description: 'Specifies the font family of the text. "inherit" uses the computed style from the parent.'
+    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>

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="relative h-[400px] text-5xl demo-container">
-
+          <GradientText
-        <div class="demo-container h-[200px]">
+            :colors="colors"
-          <div class="text-[2rem]">
+            :animation-speed="animationSpeed"
-            <GradientText
+            :direction="direction"
-              text="Add a splash of color!"
+            :pause-on-hover="pauseOnHover"
-              :colors="gradientPreview"
+            :yoyo="yoyo"
-              :animation-speed="speed"
+            :show-border="showBorder"
-              :show-border="false"
+          >
-            />
+            Gradient Magic
-          </div>
+          </GradientText>
-        </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>
 
         <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 mb-2 font-medium text-sm">Colors</label>
-              <label class="block text-sm font-medium mb-2">Colors</label>
 
-              <input
+            <div class="flex flex-wrap gap-2 px-1 pt-1">
-                v-model="colors"
+              <div v-for="(color, index) in colors" :key="index" class="relative w-8 h-8">
-                type="text"
+                <div
-                placeholder="Enter colors separated by commas"
+                  class="relative border-[#222] border-2 rounded-md w-8 h-8 overflow-hidden"
-                maxlength="100"
+                  :style="{ backgroundColor: color }"
-                class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
+                >
-              />
+                  <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 CliInstallation from '@/components/code/CliInstallation.vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
-import PropTable from '../../components/common/PropTable.vue';
+import Customize from '@/components/common/Customize.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
+import PreviewSelect from '@/components/common/PreviewSelect.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
-import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
-import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PropTable from '@/components/common/PropTable.vue';
-import GradientText from '../../content/TextAnimations/GradientText/GradientText.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 colors = ref(['#27FF64', '#27FF64', '#A0FFBC']);
-const speed = ref(3);
+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: '""',
+    default: '-',
-    description: 'The text content to be displayed with gradient effect.'
+    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"]',
+    default: `["#5227FF", "#FF9FFC", "#B19EEF"]`,
-    description: 'Defines the gradient colors for the text or border.'
+    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>

src/demo/TextAnimations/ShinyTextDemo.vue

@@ -1,33 +1,31 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <h2 class="demo-title-extra">Basic</h2>
+      <div class="h-[400px] text-3xl demo-container">
-
-      <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]">
         <ShinyText
-          :text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
+          text="✨ Shiny Text Effect"
-          :disabled="false"
+          :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 CliInstallation from '@/components/code/CliInstallation.vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
-import PropTable from '../../components/common/PropTable.vue';
+import Customize from '@/components/common/Customize.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
+import PreviewColor from '@/components/common/PreviewColor.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
+import PreviewSelect from '@/components/common/PreviewSelect.vue';
-import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
-import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
-import ShinyText from '../../content/TextAnimations/ShinyText/ShinyText.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',
+    name: 'color',
-    type: 'boolean',
+    type: 'string',
-    default: 'false',
+    default: '"#b5b5b5"',
-    description: 'Disables the shiny effect when set to true.'
+    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',
+    default: '2',
-    description: 'Specifies the duration of the animation in seconds.'
+    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',

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-name="split-text-demo"
-          class="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="2" :step="0.1" />
-        <PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="3" :step="0.1" />
+        <PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
-
-        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -47,29 +60,40 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import CliInstallation from '@/components/code/CliInstallation.vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
-import RefreshButton from '../../components/common/RefreshButton.vue';
+import Dependencies from '@/components/code/Dependencies.vue';
-import PropTable from '../../components/common/PropTable.vue';
+import Customize from '@/components/common/Customize.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
+import PropTable from '@/components/common/PropTable.vue';
-import Customize from '../../components/common/Customize.vue';
+import RefreshButton from '@/components/common/RefreshButton.vue';
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.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 { 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: 'className',
-  { name: 'duration', type: 'number', default: '0.6', description: 'Duration of each letter animation (in seconds).' },
+    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',

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>