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

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

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