From 54bc49cd2bbb2d2f77b20bd0b4a94d5c31baad4c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 15 Mar 2026 10:55:38 +0000
Subject: [PATCH] Resolve merge conflicts: sync OrbitImagesDemo.vue and
 registry JSON files with main

Co-authored-by: DavidHDev <48634587+DavidHDev@users.noreply.github.com>
---
 package-lock.json                       |   2 +-
 package.json                            |   2 +-
 public/r/AnimatedList.json              |   2 +-
 public/r/Carousel.json                  |   2 +-
 public/r/Counter.json                   |   2 +-
 public/r/Dock.json                      |   2 +-
 public/r/RotatingText.json              |   2 +-
 public/r/Stack.json                     |   2 +-
 public/r/Stepper.json                   |   2 +-
 public/r/TextCursor.json                |   2 +-
 public/r/TiltedCard.json                |   2 +-
 public/r/TrueFocus.json                 |   2 +-
 src/demo/Animations/OrbitImagesDemo.vue | 139 ++++++++++++------------
 13 files changed, 82 insertions(+), 81 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 35d15e7..ad6e719 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,7 +55,7 @@
         "typescript": "~5.8.0",
         "vite": "^7.0.0",
         "vite-plugin-vue-devtools": "^7.7.7",
-        "vue-tsc": "^2.2.10"
+        "vue-tsc": "^2.2.12"
       }
     },
     "node_modules/@alvarosabu/utils": {
diff --git a/package.json b/package.json
index 3f5dcfc..6bd89bd 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
     "typescript": "~5.8.0",
     "vite": "^7.0.0",
     "vite-plugin-vue-devtools": "^7.7.7",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^2.2.12"
   },
   "lint-staged": {
     "src/**/*.{js,ts,jsx,tsx,vue}": [
diff --git a/public/r/AnimatedList.json b/public/r/AnimatedList.json
index 8fd98fa..0ce4454 100644
--- a/public/r/AnimatedList.json
+++ b/public/r/AnimatedList.json
@@ -1 +1 @@
-{"name":"AnimatedList","title":"AnimatedList","description":"List items enter with staggered motion variants for polished reveals.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div ref=\"containerRef\" :class=\"`relative w-[500px] ${className}`.trim()\">\n    <div\n      ref=\"listRef\"\n      :class=\"`max-h-[400px] overflow-y-auto p-4 ${\n        displayScrollbar\n          ? '[&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar-track]:bg-[#0b0b0b] [&::-webkit-scrollbar-thumb]:bg-[#222] [&::-webkit-scrollbar-thumb]:rounded-[4px]'\n          : 'scrollbar-hide'\n      }`\"\n      :style=\"{\n        scrollbarWidth: displayScrollbar ? 'thin' : 'none',\n        scrollbarColor: '#222 #0b0b0b'\n      }\"\n      @scroll=\"handleScroll\"\n    >\n      <Motion\n        v-for=\"(item, index) in items\"\n        :key=\"index\"\n        tag=\"div\"\n        :data-index=\"index\"\n        class=\"mb-4 cursor-pointer\"\n        :initial=\"{ scale: 0.7, opacity: 0 }\"\n        :animate=\"getItemInView(index) ? { scale: 1, opacity: 1 } : { scale: 0.7, opacity: 0 }\"\n        :transition=\"{ duration: 0.2, delay: 0.1 }\"\n        @mouseenter=\"() => setSelectedIndex(index)\"\n        @click=\"\n          () => {\n            setSelectedIndex(index);\n            emit('itemSelected', item, index);\n          }\n        \"\n      >\n        <div :class=\"`p-4 bg-[#111] rounded-lg ${selectedIndex === index ? 'bg-[#222]' : ''} ${itemClassName}`\">\n          <p class=\"text-white m-0\">{{ item }}</p>\n        </div>\n      </Motion>\n    </div>\n    <div\n      v-if=\"showGradients\"\n      class=\"absolute top-0 left-0 right-0 h-[50px] bg-gradient-to-b from-[#0b0b0b] to-transparent pointer-events-none transition-opacity duration-300 ease\"\n      :style=\"{ opacity: topGradientOpacity }\"\n    />\n    <div\n      v-if=\"showGradients\"\n      class=\"absolute bottom-0 left-0 right-0 h-[100px] bg-gradient-to-t from-[#0b0b0b] to-transparent pointer-events-none transition-opacity duration-300 ease\"\n      :style=\"{ opacity: bottomGradientOpacity }\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\nimport { Motion } from 'motion-v';\n\ninterface AnimatedListProps {\n  items?: string[];\n  showGradients?: boolean;\n  enableArrowNavigation?: boolean;\n  className?: string;\n  itemClassName?: string;\n  displayScrollbar?: boolean;\n  initialSelectedIndex?: number;\n}\n\nconst props = withDefaults(defineProps<AnimatedListProps>(), {\n  items: () => [\n    'Item 1',\n    'Item 2',\n    'Item 3',\n    'Item 4',\n    'Item 5',\n    'Item 6',\n    'Item 7',\n    'Item 8',\n    'Item 9',\n    'Item 10',\n    'Item 11',\n    'Item 12',\n    'Item 13',\n    'Item 14',\n    'Item 15'\n  ],\n  showGradients: true,\n  enableArrowNavigation: true,\n  className: '',\n  itemClassName: '',\n  displayScrollbar: true,\n  initialSelectedIndex: -1\n});\n\nconst emit = defineEmits<{\n  itemSelected: [item: string, index: number];\n}>();\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst listRef = useTemplateRef<HTMLDivElement>('listRef');\nconst selectedIndex = ref(props.initialSelectedIndex);\nconst keyboardNav = ref(false);\nconst topGradientOpacity = ref(0);\nconst bottomGradientOpacity = ref(1);\nconst itemsInView = ref<boolean[]>([]);\n\nconst setSelectedIndex = (index: number) => {\n  selectedIndex.value = index;\n};\n\nconst getItemInView = (index: number) => {\n  return itemsInView.value[index] ?? false;\n};\n\nconst handleScroll = (e: Event) => {\n  const target = e.target as HTMLDivElement;\n  const { scrollTop, scrollHeight, clientHeight } = target;\n  topGradientOpacity.value = Math.min(scrollTop / 50, 1);\n  const bottomDistance = scrollHeight - (scrollTop + clientHeight);\n  bottomGradientOpacity.value = scrollHeight <= clientHeight ? 0 : Math.min(bottomDistance / 50, 1);\n\n  updateItemsInView();\n};\n\nconst updateItemsInView = () => {\n  if (!listRef.value) return;\n\n  const container = listRef.value;\n  const containerRect = container.getBoundingClientRect();\n\n  itemsInView.value = props.items.map((_, index) => {\n    const item = container.querySelector(`[data-index=\"${index}\"]`) as HTMLElement;\n    if (!item) return false;\n\n    const itemRect = item.getBoundingClientRect();\n    const viewHeight = containerRect.height;\n    const itemTop = itemRect.top - containerRect.top;\n    const itemBottom = itemTop + itemRect.height;\n\n    return itemTop < viewHeight && itemBottom > 0;\n  });\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n    e.preventDefault();\n    keyboardNav.value = true;\n    setSelectedIndex(Math.min(selectedIndex.value + 1, props.items.length - 1));\n  } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n    e.preventDefault();\n    keyboardNav.value = true;\n    setSelectedIndex(Math.max(selectedIndex.value - 1, 0));\n  } else if (e.key === 'Enter') {\n    if (selectedIndex.value >= 0 && selectedIndex.value < props.items.length) {\n      e.preventDefault();\n      emit('itemSelected', props.items[selectedIndex.value], selectedIndex.value);\n    }\n  }\n};\n\nwatch([selectedIndex, keyboardNav], () => {\n  if (!keyboardNav.value || selectedIndex.value < 0 || !listRef.value) return;\n  const container = listRef.value;\n  const selectedItem = container.querySelector(`[data-index=\"${selectedIndex.value}\"]`) as HTMLElement | null;\n  if (selectedItem) {\n    const extraMargin = 50;\n    const containerScrollTop = container.scrollTop;\n    const containerHeight = container.clientHeight;\n    const itemTop = selectedItem.offsetTop;\n    const itemBottom = itemTop + selectedItem.offsetHeight;\n    if (itemTop < containerScrollTop + extraMargin) {\n      container.scrollTo({ top: itemTop - extraMargin, behavior: 'smooth' });\n    } else if (itemBottom > containerScrollTop + containerHeight - extraMargin) {\n      container.scrollTo({\n        top: itemBottom - containerHeight + extraMargin,\n        behavior: 'smooth'\n      });\n    }\n  }\n  keyboardNav.value = false;\n});\n\nonMounted(() => {\n  if (props.enableArrowNavigation) {\n    window.addEventListener('keydown', handleKeyDown);\n  }\n\n  itemsInView.value = new Array(props.items.length).fill(true);\n  setTimeout(updateItemsInView, 100);\n});\n\nonUnmounted(() => {\n  if (props.enableArrowNavigation) {\n    window.removeEventListener('keydown', handleKeyDown);\n  }\n});\n</script>\n","path":"AnimatedList/AnimatedList.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
+{"name":"AnimatedList","title":"AnimatedList","description":"List items enter with staggered motion variants for polished reveals.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div ref=\"containerRef\" :class=\"`relative w-[500px] ${className}`.trim()\">\n    <div\n      ref=\"listRef\"\n      :class=\"`max-h-[400px] overflow-y-auto p-4 ${\n        displayScrollbar\n          ? '[&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar-track]:bg-[#0b0b0b] [&::-webkit-scrollbar-thumb]:bg-[#222] [&::-webkit-scrollbar-thumb]:rounded-[4px]'\n          : 'scrollbar-hide'\n      }`\"\n      :style=\"{\n        scrollbarWidth: displayScrollbar ? 'thin' : 'none',\n        scrollbarColor: '#222 #0b0b0b'\n      }\"\n      @scroll=\"handleScroll\"\n    >\n      <Motion\n        v-for=\"(item, index) in items\"\n        :key=\"index\"\n        tag=\"div\"\n        :data-index=\"index\"\n        class=\"mb-4 cursor-pointer\"\n        :initial=\"{ scale: 0.7, opacity: 0 }\"\n        :animate=\"getItemInView(index) ? { scale: 1, opacity: 1 } : { scale: 0.7, opacity: 0 }\"\n        :transition=\"{ duration: 0.2, delay: 0.1 }\"\n        @mouseenter=\"() => setSelectedIndex(index)\"\n        @click=\"\n          () => {\n            setSelectedIndex(index);\n            emit('itemSelected', item, index);\n          }\n        \"\n      >\n        <div :class=\"`p-4 bg-[#111] rounded-lg ${selectedIndex === index ? 'bg-[#222]' : ''} ${itemClassName}`\">\n          <p class=\"text-white m-0\">{{ item }}</p>\n        </div>\n      </Motion>\n    </div>\n    <div\n      v-if=\"showGradients\"\n      class=\"absolute top-0 left-0 right-0 h-[50px] bg-gradient-to-b from-[#0b0b0b] to-transparent pointer-events-none transition-opacity duration-300 ease\"\n      :style=\"{ opacity: topGradientOpacity }\"\n    />\n    <div\n      v-if=\"showGradients\"\n      class=\"absolute bottom-0 left-0 right-0 h-[100px] bg-gradient-to-t from-[#0b0b0b] to-transparent pointer-events-none transition-opacity duration-300 ease\"\n      :style=\"{ opacity: bottomGradientOpacity }\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\nimport { Motion } from 'motion-v';\n\ninterface AnimatedListProps {\n  items?: string[];\n  showGradients?: boolean;\n  enableArrowNavigation?: boolean;\n  className?: string;\n  itemClassName?: string;\n  displayScrollbar?: boolean;\n  initialSelectedIndex?: number;\n}\n\nconst props = withDefaults(defineProps<AnimatedListProps>(), {\n  items: () => [\n    'Item 1',\n    'Item 2',\n    'Item 3',\n    'Item 4',\n    'Item 5',\n    'Item 6',\n    'Item 7',\n    'Item 8',\n    'Item 9',\n    'Item 10',\n    'Item 11',\n    'Item 12',\n    'Item 13',\n    'Item 14',\n    'Item 15'\n  ],\n  showGradients: true,\n  enableArrowNavigation: true,\n  className: '',\n  itemClassName: '',\n  displayScrollbar: true,\n  initialSelectedIndex: -1\n});\n\nconst emit = defineEmits<{\n  itemSelected: [item: string, index: number];\n}>();\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst listRef = useTemplateRef<HTMLDivElement>('listRef');\nconst selectedIndex = ref(props.initialSelectedIndex);\nconst keyboardNav = ref(false);\nconst topGradientOpacity = ref(0);\nconst bottomGradientOpacity = ref(1);\nconst itemsInView = ref<boolean[]>([]);\n\nconst setSelectedIndex = (index: number) => {\n  selectedIndex.value = index;\n};\n\nconst getItemInView = (index: number) => {\n  return itemsInView.value[index] ?? false;\n};\n\nconst handleScroll = (e: Event) => {\n  const target = e.target as HTMLDivElement;\n  const { scrollTop, scrollHeight, clientHeight } = target;\n  topGradientOpacity.value = Math.min(scrollTop / 50, 1);\n  const bottomDistance = scrollHeight - (scrollTop + clientHeight);\n  bottomGradientOpacity.value = scrollHeight <= clientHeight ? 0 : Math.min(bottomDistance / 50, 1);\n\n  updateItemsInView();\n};\n\nconst updateItemsInView = () => {\n  if (!listRef.value) return;\n\n  const container = listRef.value;\n  const containerRect = container.getBoundingClientRect();\n\n  itemsInView.value = props.items.map((_, index) => {\n    const item = container.querySelector(`[data-index=\"${index}\"]`) as HTMLElement;\n    if (!item) return false;\n\n    const itemRect = item.getBoundingClientRect();\n    const viewHeight = containerRect.height;\n    const itemTop = itemRect.top - containerRect.top;\n    const itemBottom = itemTop + itemRect.height;\n\n    return itemTop < viewHeight && itemBottom > 0;\n  });\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n    e.preventDefault();\n    keyboardNav.value = true;\n    setSelectedIndex(Math.min(selectedIndex.value + 1, props.items.length - 1));\n  } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n    e.preventDefault();\n    keyboardNav.value = true;\n    setSelectedIndex(Math.max(selectedIndex.value - 1, 0));\n  } else if (e.key === 'Enter') {\n    if (selectedIndex.value >= 0 && selectedIndex.value < props.items.length) {\n      e.preventDefault();\n      emit('itemSelected', props.items[selectedIndex.value], selectedIndex.value);\n    }\n  }\n};\n\nwatch([selectedIndex, keyboardNav], () => {\n  if (!keyboardNav.value || selectedIndex.value < 0 || !listRef.value) return;\n  const container = listRef.value;\n  const selectedItem = container.querySelector(`[data-index=\"${selectedIndex.value}\"]`) as HTMLElement | null;\n  if (selectedItem) {\n    const extraMargin = 50;\n    const containerScrollTop = container.scrollTop;\n    const containerHeight = container.clientHeight;\n    const itemTop = selectedItem.offsetTop;\n    const itemBottom = itemTop + selectedItem.offsetHeight;\n    if (itemTop < containerScrollTop + extraMargin) {\n      container.scrollTo({ top: itemTop - extraMargin, behavior: 'smooth' });\n    } else if (itemBottom > containerScrollTop + containerHeight - extraMargin) {\n      container.scrollTo({\n        top: itemBottom - containerHeight + extraMargin,\n        behavior: 'smooth'\n      });\n    }\n  }\n  keyboardNav.value = false;\n});\n\nonMounted(() => {\n  if (props.enableArrowNavigation) {\n    window.addEventListener('keydown', handleKeyDown);\n  }\n\n  itemsInView.value = new Array(props.items.length).fill(true);\n  setTimeout(updateItemsInView, 100);\n});\n\nonUnmounted(() => {\n  if (props.enableArrowNavigation) {\n    window.removeEventListener('keydown', handleKeyDown);\n  }\n});\n</script>\n","path":"AnimatedList/AnimatedList.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
diff --git a/public/r/Carousel.json b/public/r/Carousel.json
index 1da492b..9153b49 100644
--- a/public/r/Carousel.json
+++ b/public/r/Carousel.json
@@ -1 +1 @@
-{"name":"Carousel","title":"Carousel","description":"Responsive carousel with touch gestures, looping and transitions.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div\n    ref=\"containerRef\"\n    :class=\"[\n      'relative overflow-hidden p-4',\n      round ? 'rounded-full border border-[#333]' : 'rounded-[24px] border border-[#333]'\n    ]\"\n    :style=\"{\n      width: `${baseWidth}px`,\n      ...(round && { height: `${baseWidth}px` })\n    }\"\n  >\n    <Motion\n      tag=\"div\"\n      class=\"flex\"\n      drag=\"x\"\n      :dragConstraints=\"dragConstraints\"\n      :style=\"{\n        width: itemWidth + 'px',\n        gap: `${GAP}px`,\n        perspective: 1000,\n        perspectiveOrigin: `${currentIndex * trackItemOffset + itemWidth / 2}px 50%`,\n        x: motionX\n      }\"\n      @dragEnd=\"handleDragEnd\"\n      :animate=\"{ x: -(currentIndex * trackItemOffset) }\"\n      :transition=\"effectiveTransition\"\n      @animationComplete=\"handleAnimationComplete\"\n    >\n      <Motion\n        v-for=\"(item, index) in carouselItems\"\n        :key=\"index\"\n        tag=\"div\"\n        :class=\"[\n          'relative shrink-0 flex flex-col overflow-hidden cursor-grab active:cursor-grabbing',\n          round\n            ? 'items-center justify-center text-center bg-[#111] border border-[#333] rounded-full'\n            : 'items-start justify-between bg-[#111] border border-[#333] rounded-[12px]'\n        ]\"\n        :style=\"{\n          width: itemWidth + 'px',\n          height: round ? itemWidth + 'px' : '100%',\n          rotateY: getRotateY(index),\n          ...(round && { borderRadius: '50%' })\n        }\"\n        :transition=\"effectiveTransition\"\n      >\n        <div :class=\"round ? 'p-0 m-0' : 'mb-4 p-5'\">\n          <span class=\"flex h-[28px] w-[28px] items-center justify-center rounded-full bg-[#0b0b0b]\">\n            <i :class=\"item.icon\" class=\"text-white text-base\"></i>\n          </span>\n        </div>\n\n        <div class=\"p-5\">\n          <div class=\"mb-1 font-black text-lg text-white\">{{ item.title }}</div>\n\n          <p class=\"text-sm text-white\">{{ item.description }}</p>\n        </div>\n      </Motion>\n    </Motion>\n\n    <div :class=\"['flex w-full justify-center', round ? 'absolute z-20 bottom-12 left-1/2 -translate-x-1/2' : '']\">\n      <div class=\"mt-4 flex w-[150px] justify-between px-8\">\n        <Motion\n          v-for=\"(_, index) in items\"\n          :key=\"index\"\n          tag=\"div\"\n          :class=\"[\n            'h-2 w-2 rounded-full cursor-pointer transition-colors duration-150',\n            currentIndex % items.length === index\n              ? round\n                ? 'bg-white'\n                : 'bg-[#333333]'\n              : round\n                ? 'bg-[#555]'\n                : 'bg-[rgba(51,51,51,0.4)]'\n          ]\"\n          :animate=\"{\n            scale: currentIndex % items.length === index ? 1.2 : 1\n          }\"\n          @click=\"() => setCurrentIndex(index)\"\n          :transition=\"{ duration: 0.15 }\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport interface CarouselItem {\n  title: string;\n  description: string;\n  id: number;\n  icon: string;\n}\n\nexport interface CarouselProps {\n  items?: CarouselItem[];\n  baseWidth?: number;\n  autoplay?: boolean;\n  autoplayDelay?: number;\n  pauseOnHover?: boolean;\n  loop?: boolean;\n  round?: boolean;\n}\n\nexport const DEFAULT_ITEMS: CarouselItem[] = [\n  {\n    title: 'Text Animations',\n    description: 'Cool text animations for your projects.',\n    id: 1,\n    icon: 'pi pi-file'\n  },\n  {\n    title: 'Animations',\n    description: 'Smooth animations for your projects.',\n    id: 2,\n    icon: 'pi pi-circle'\n  },\n  {\n    title: 'Components',\n    description: 'Reusable components for your projects.',\n    id: 3,\n    icon: 'pi pi-objects-column'\n  },\n  {\n    title: 'Backgrounds',\n    description: 'Beautiful backgrounds and patterns for your projects.',\n    id: 4,\n    icon: 'pi pi-table'\n  },\n  {\n    title: 'Common UI',\n    description: 'Common UI components are coming soon!',\n    id: 5,\n    icon: 'pi pi-code'\n  }\n];\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\nimport { Motion, useMotionValue, useTransform } from 'motion-v';\n\nconst DRAG_BUFFER = 0;\nconst VELOCITY_THRESHOLD = 500;\nconst GAP = 16;\nconst SPRING_OPTIONS = { type: 'spring' as const, stiffness: 300, damping: 30 };\n\nconst props = withDefaults(defineProps<CarouselProps>(), {\n  items: () => DEFAULT_ITEMS,\n  baseWidth: 300,\n  autoplay: false,\n  autoplayDelay: 3000,\n  pauseOnHover: false,\n  loop: false,\n  round: false\n});\n\nconst containerPadding = 16;\nconst itemWidth = computed(() => props.baseWidth - containerPadding * 2);\nconst trackItemOffset = computed(() => itemWidth.value + GAP);\n\nconst carouselItems = computed(() => (props.loop ? [...props.items, props.items[0]] : props.items));\nconst currentIndex = ref<number>(0);\nconst motionX = useMotionValue(0);\nconst isHovered = ref<boolean>(false);\nconst isResetting = ref<boolean>(false);\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nlet autoplayTimer: number | null = null;\n\nconst dragConstraints = computed(() => {\n  return props.loop\n    ? {}\n    : {\n        left: -trackItemOffset.value * (carouselItems.value.length - 1),\n        right: 0\n      };\n});\n\nconst effectiveTransition = computed(() => (isResetting.value ? { duration: 0 } : SPRING_OPTIONS));\n\nconst maxItems = Math.max(props.items.length + 1, 10);\nconst rotateYTransforms = Array.from({ length: maxItems }, (_, index) => {\n  const range = computed(() => [\n    -(index + 1) * trackItemOffset.value,\n    -index * trackItemOffset.value,\n    -(index - 1) * trackItemOffset.value\n  ]);\n  const outputRange = [90, 0, -90];\n  return useTransform(motionX, range, outputRange, { clamp: false });\n});\n\nconst getRotateY = (index: number) => {\n  return rotateYTransforms[index] || rotateYTransforms[0];\n};\n\nconst setCurrentIndex = (index: number) => {\n  currentIndex.value = index;\n};\n\nconst handleAnimationComplete = () => {\n  if (props.loop && currentIndex.value === carouselItems.value.length - 1) {\n    isResetting.value = true;\n    motionX.set(0);\n    currentIndex.value = 0;\n    setTimeout(() => {\n      isResetting.value = false;\n    }, 50);\n  }\n};\n\ninterface DragInfo {\n  offset: { x: number; y: number };\n  velocity: { x: number; y: number };\n}\n\nconst handleDragEnd = (event: Event, info: DragInfo) => {\n  const offset = info.offset.x;\n  const velocity = info.velocity.x;\n\n  if (offset < -DRAG_BUFFER || velocity < -VELOCITY_THRESHOLD) {\n    if (props.loop && currentIndex.value === props.items.length - 1) {\n      currentIndex.value = currentIndex.value + 1;\n    } else {\n      currentIndex.value = Math.min(currentIndex.value + 1, carouselItems.value.length - 1);\n    }\n  } else if (offset > DRAG_BUFFER || velocity > VELOCITY_THRESHOLD) {\n    if (props.loop && currentIndex.value === 0) {\n      currentIndex.value = props.items.length - 1;\n    } else {\n      currentIndex.value = Math.max(currentIndex.value - 1, 0);\n    }\n  }\n};\n\nconst startAutoplay = () => {\n  if (props.autoplay && (!props.pauseOnHover || !isHovered.value)) {\n    autoplayTimer = window.setInterval(() => {\n      currentIndex.value = (() => {\n        const prev = currentIndex.value;\n        if (prev === props.items.length - 1 && props.loop) {\n          return prev + 1;\n        }\n        if (prev === carouselItems.value.length - 1) {\n          return props.loop ? 0 : prev;\n        }\n        return prev + 1;\n      })();\n    }, props.autoplayDelay);\n  }\n};\n\nconst stopAutoplay = () => {\n  if (autoplayTimer) {\n    clearInterval(autoplayTimer);\n    autoplayTimer = null;\n  }\n};\n\nconst handleMouseEnter = () => {\n  isHovered.value = true;\n  if (props.pauseOnHover) {\n    stopAutoplay();\n  }\n};\n\nconst handleMouseLeave = () => {\n  isHovered.value = false;\n  if (props.pauseOnHover) {\n    startAutoplay();\n  }\n};\n\nwatch(\n  [\n    () => props.autoplay,\n    () => props.autoplayDelay,\n    isHovered,\n    () => props.loop,\n    () => props.items.length,\n    () => carouselItems.value.length,\n    () => props.pauseOnHover\n  ],\n  () => {\n    stopAutoplay();\n    startAutoplay();\n  }\n);\n\nonMounted(() => {\n  if (props.pauseOnHover && containerRef.value) {\n    containerRef.value.addEventListener('mouseenter', handleMouseEnter);\n    containerRef.value.addEventListener('mouseleave', handleMouseLeave);\n  }\n  startAutoplay();\n});\n\nonUnmounted(() => {\n  if (containerRef.value) {\n    containerRef.value.removeEventListener('mouseenter', handleMouseEnter);\n    containerRef.value.removeEventListener('mouseleave', handleMouseLeave);\n  }\n  stopAutoplay();\n});\n</script>\n","path":"Carousel/Carousel.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
+{"name":"Carousel","title":"Carousel","description":"Responsive carousel with touch gestures, looping and transitions.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div\n    ref=\"containerRef\"\n    :class=\"[\n      'relative overflow-hidden p-4',\n      round ? 'rounded-full border border-[#333]' : 'rounded-[24px] border border-[#333]'\n    ]\"\n    :style=\"{\n      width: `${baseWidth}px`,\n      ...(round && { height: `${baseWidth}px` })\n    }\"\n  >\n    <Motion\n      tag=\"div\"\n      class=\"flex\"\n      drag=\"x\"\n      :dragConstraints=\"dragConstraints\"\n      :style=\"{\n        width: itemWidth + 'px',\n        gap: `${GAP}px`,\n        perspective: 1000,\n        perspectiveOrigin: `${currentIndex * trackItemOffset + itemWidth / 2}px 50%`,\n        x: motionX\n      }\"\n      @dragEnd=\"handleDragEnd\"\n      :animate=\"{ x: -(currentIndex * trackItemOffset) }\"\n      :transition=\"effectiveTransition\"\n      @animationComplete=\"handleAnimationComplete\"\n    >\n      <Motion\n        v-for=\"(item, index) in carouselItems\"\n        :key=\"index\"\n        tag=\"div\"\n        :class=\"[\n          'relative shrink-0 flex flex-col overflow-hidden cursor-grab active:cursor-grabbing',\n          round\n            ? 'items-center justify-center text-center bg-[#111] border border-[#333] rounded-full'\n            : 'items-start justify-between bg-[#111] border border-[#333] rounded-[12px]'\n        ]\"\n        :style=\"{\n          width: itemWidth + 'px',\n          height: round ? itemWidth + 'px' : '100%',\n          rotateY: getRotateY(index),\n          ...(round && { borderRadius: '50%' })\n        }\"\n        :transition=\"effectiveTransition\"\n      >\n        <div :class=\"round ? 'p-0 m-0' : 'mb-4 p-5'\">\n          <span class=\"flex h-[28px] w-[28px] items-center justify-center rounded-full bg-[#0b0b0b]\">\n            <i :class=\"item.icon\" class=\"text-white text-base\"></i>\n          </span>\n        </div>\n\n        <div class=\"p-5\">\n          <div class=\"mb-1 font-black text-lg text-white\">{{ item.title }}</div>\n\n          <p class=\"text-sm text-white\">{{ item.description }}</p>\n        </div>\n      </Motion>\n    </Motion>\n\n    <div :class=\"['flex w-full justify-center', round ? 'absolute z-20 bottom-12 left-1/2 -translate-x-1/2' : '']\">\n      <div class=\"mt-4 flex w-[150px] justify-between px-8\">\n        <Motion\n          v-for=\"(_, index) in items\"\n          :key=\"index\"\n          tag=\"div\"\n          :class=\"[\n            'h-2 w-2 rounded-full cursor-pointer transition-colors duration-150',\n            currentIndex % items.length === index\n              ? round\n                ? 'bg-white'\n                : 'bg-[#333333]'\n              : round\n                ? 'bg-[#555]'\n                : 'bg-[rgba(51,51,51,0.4)]'\n          ]\"\n          :animate=\"{\n            scale: currentIndex % items.length === index ? 1.2 : 1\n          }\"\n          @click=\"() => setCurrentIndex(index)\"\n          :transition=\"{ duration: 0.15 }\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport interface CarouselItem {\n  title: string;\n  description: string;\n  id: number;\n  icon: string;\n}\n\nexport interface CarouselProps {\n  items?: CarouselItem[];\n  baseWidth?: number;\n  autoplay?: boolean;\n  autoplayDelay?: number;\n  pauseOnHover?: boolean;\n  loop?: boolean;\n  round?: boolean;\n}\n\nexport const DEFAULT_ITEMS: CarouselItem[] = [\n  {\n    title: 'Text Animations',\n    description: 'Cool text animations for your projects.',\n    id: 1,\n    icon: 'pi pi-file'\n  },\n  {\n    title: 'Animations',\n    description: 'Smooth animations for your projects.',\n    id: 2,\n    icon: 'pi pi-circle'\n  },\n  {\n    title: 'Components',\n    description: 'Reusable components for your projects.',\n    id: 3,\n    icon: 'pi pi-objects-column'\n  },\n  {\n    title: 'Backgrounds',\n    description: 'Beautiful backgrounds and patterns for your projects.',\n    id: 4,\n    icon: 'pi pi-table'\n  },\n  {\n    title: 'Common UI',\n    description: 'Common UI components are coming soon!',\n    id: 5,\n    icon: 'pi pi-code'\n  }\n];\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\nimport { Motion, useMotionValue, useTransform } from 'motion-v';\n\nconst DRAG_BUFFER = 0;\nconst VELOCITY_THRESHOLD = 500;\nconst GAP = 16;\nconst SPRING_OPTIONS = { type: 'spring' as const, stiffness: 300, damping: 30 };\n\nconst props = withDefaults(defineProps<CarouselProps>(), {\n  items: () => DEFAULT_ITEMS,\n  baseWidth: 300,\n  autoplay: false,\n  autoplayDelay: 3000,\n  pauseOnHover: false,\n  loop: false,\n  round: false\n});\n\nconst containerPadding = 16;\nconst itemWidth = computed(() => props.baseWidth - containerPadding * 2);\nconst trackItemOffset = computed(() => itemWidth.value + GAP);\n\nconst carouselItems = computed(() => (props.loop ? [...props.items, props.items[0]] : props.items));\nconst currentIndex = ref<number>(0);\nconst motionX = useMotionValue(0);\nconst isHovered = ref<boolean>(false);\nconst isResetting = ref<boolean>(false);\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nlet autoplayTimer: number | null = null;\n\nconst dragConstraints = computed(() => {\n  return props.loop\n    ? {}\n    : {\n        left: -trackItemOffset.value * (carouselItems.value.length - 1),\n        right: 0\n      };\n});\n\nconst effectiveTransition = computed(() => (isResetting.value ? { duration: 0 } : SPRING_OPTIONS));\n\nconst maxItems = Math.max(props.items.length + 1, 10);\nconst rotateYTransforms = Array.from({ length: maxItems }, (_, index) => {\n  const range = computed(() => [\n    -(index + 1) * trackItemOffset.value,\n    -index * trackItemOffset.value,\n    -(index - 1) * trackItemOffset.value\n  ]);\n  const outputRange = [90, 0, -90];\n  return useTransform(motionX, range, outputRange, { clamp: false });\n});\n\nconst getRotateY = (index: number) => {\n  return rotateYTransforms[index] || rotateYTransforms[0];\n};\n\nconst setCurrentIndex = (index: number) => {\n  currentIndex.value = index;\n};\n\nconst handleAnimationComplete = () => {\n  if (props.loop && currentIndex.value === carouselItems.value.length - 1) {\n    isResetting.value = true;\n    motionX.set(0);\n    currentIndex.value = 0;\n    setTimeout(() => {\n      isResetting.value = false;\n    }, 50);\n  }\n};\n\ninterface DragInfo {\n  offset: { x: number; y: number };\n  velocity: { x: number; y: number };\n}\n\nconst handleDragEnd = (event: Event, info: DragInfo) => {\n  const offset = info.offset.x;\n  const velocity = info.velocity.x;\n\n  if (offset < -DRAG_BUFFER || velocity < -VELOCITY_THRESHOLD) {\n    if (props.loop && currentIndex.value === props.items.length - 1) {\n      currentIndex.value = currentIndex.value + 1;\n    } else {\n      currentIndex.value = Math.min(currentIndex.value + 1, carouselItems.value.length - 1);\n    }\n  } else if (offset > DRAG_BUFFER || velocity > VELOCITY_THRESHOLD) {\n    if (props.loop && currentIndex.value === 0) {\n      currentIndex.value = props.items.length - 1;\n    } else {\n      currentIndex.value = Math.max(currentIndex.value - 1, 0);\n    }\n  }\n};\n\nconst startAutoplay = () => {\n  if (props.autoplay && (!props.pauseOnHover || !isHovered.value)) {\n    autoplayTimer = window.setInterval(() => {\n      currentIndex.value = (() => {\n        const prev = currentIndex.value;\n        if (prev === props.items.length - 1 && props.loop) {\n          return prev + 1;\n        }\n        if (prev === carouselItems.value.length - 1) {\n          return props.loop ? 0 : prev;\n        }\n        return prev + 1;\n      })();\n    }, props.autoplayDelay);\n  }\n};\n\nconst stopAutoplay = () => {\n  if (autoplayTimer) {\n    clearInterval(autoplayTimer);\n    autoplayTimer = null;\n  }\n};\n\nconst handleMouseEnter = () => {\n  isHovered.value = true;\n  if (props.pauseOnHover) {\n    stopAutoplay();\n  }\n};\n\nconst handleMouseLeave = () => {\n  isHovered.value = false;\n  if (props.pauseOnHover) {\n    startAutoplay();\n  }\n};\n\nwatch(\n  [\n    () => props.autoplay,\n    () => props.autoplayDelay,\n    isHovered,\n    () => props.loop,\n    () => props.items.length,\n    () => carouselItems.value.length,\n    () => props.pauseOnHover\n  ],\n  () => {\n    stopAutoplay();\n    startAutoplay();\n  }\n);\n\nonMounted(() => {\n  if (props.pauseOnHover && containerRef.value) {\n    containerRef.value.addEventListener('mouseenter', handleMouseEnter);\n    containerRef.value.addEventListener('mouseleave', handleMouseLeave);\n  }\n  startAutoplay();\n});\n\nonUnmounted(() => {\n  if (containerRef.value) {\n    containerRef.value.removeEventListener('mouseenter', handleMouseEnter);\n    containerRef.value.removeEventListener('mouseleave', handleMouseLeave);\n  }\n  stopAutoplay();\n});\n</script>\n","path":"Carousel/Carousel.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
diff --git a/public/r/Counter.json b/public/r/Counter.json
index 43f76fb..8fc2b17 100644
--- a/public/r/Counter.json
+++ b/public/r/Counter.json
@@ -1 +1 @@
-{"name":"Counter","title":"Counter","description":"Flexible animated counter supporting increments + easing.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div class=\"relative inline-block\" :style=\"containerStyle\">\n    <div class=\"flex overflow-hidden\" :style=\"counterStyles\">\n      <div v-for=\"place in places\" :key=\"place\" class=\"relative w-[1ch] tabular-nums\" :style=\"digitStyles\">\n        <Motion\n          v-for=\"digit in 10\"\n          :key=\"digit - 1\"\n          tag=\"span\"\n          class=\"absolute top-0 left-0 w-full h-full flex items-center justify-center\"\n          :animate=\"{ y: getDigitPosition(place, digit - 1) }\"\n        >\n          {{ digit - 1 }}\n        </Motion>\n      </div>\n    </div>\n    <div class=\"pointer-events-none absolute inset-0\">\n      <div class=\"absolute top-0 w-full\" :style=\"topGradientStyle ?? topGradientStyles\" />\n      <div class=\"absolute bottom-0 w-full\" :style=\"bottomGradientStyle ?? bottomGradientStyles\" />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport { Motion } from 'motion-v';\nimport type { CSSProperties } from 'vue';\n\ninterface CounterProps {\n  value: number;\n  fontSize?: number;\n  padding?: number;\n  places?: number[];\n  gap?: number;\n  borderRadius?: number;\n  horizontalPadding?: number;\n  textColor?: string;\n  fontWeight?: string | number;\n  containerStyle?: CSSProperties;\n  counterStyle?: CSSProperties;\n  digitStyle?: CSSProperties;\n  gradientHeight?: number;\n  gradientFrom?: string;\n  gradientTo?: string;\n  topGradientStyle?: CSSProperties;\n  bottomGradientStyle?: CSSProperties;\n}\n\nconst props = withDefaults(defineProps<CounterProps>(), {\n  fontSize: 100,\n  padding: 0,\n  places: () => [100, 10, 1],\n  gap: 8,\n  borderRadius: 4,\n  horizontalPadding: 8,\n  textColor: 'white',\n  fontWeight: 'bold',\n  containerStyle: () => ({}),\n  counterStyle: () => ({}),\n  digitStyle: () => ({}),\n  gradientHeight: 16,\n  gradientFrom: 'black',\n  gradientTo: 'transparent',\n  topGradientStyle: undefined,\n  bottomGradientStyle: undefined\n});\n\nconst digitHeight = computed(() => props.fontSize + props.padding);\n\nconst counterStyles = computed(() => ({\n  fontSize: `${props.fontSize}px`,\n  gap: `${props.gap}px`,\n  borderRadius: `${props.borderRadius}px`,\n  paddingLeft: `${props.horizontalPadding}px`,\n  paddingRight: `${props.horizontalPadding}px`,\n  color: props.textColor,\n  fontWeight: props.fontWeight,\n  ...props.counterStyle\n}));\n\nconst digitStyles = computed(() => ({\n  height: `${digitHeight.value}px`,\n  ...props.digitStyle\n}));\n\nconst topGradientStyles = computed(\n  (): CSSProperties => ({\n    height: `${props.gradientHeight}px`,\n    background: `linear-gradient(to bottom, ${props.gradientFrom}, ${props.gradientTo})`\n  })\n);\n\nconst bottomGradientStyles = computed(\n  (): CSSProperties => ({\n    height: `${props.gradientHeight}px`,\n    background: `linear-gradient(to top, ${props.gradientFrom}, ${props.gradientTo})`\n  })\n);\n\nconst springValues = ref<Record<number, number>>({});\n\nconst initializeSpringValues = () => {\n  props.places.forEach(place => {\n    springValues.value[place] = Math.floor(props.value / place);\n  });\n};\n\ninitializeSpringValues();\n\nwatch(\n  () => props.value,\n  (newValue, oldValue) => {\n    if (newValue === oldValue) return;\n\n    props.places.forEach(place => {\n      const newRoundedValue = Math.floor(newValue / place);\n      const oldRoundedValue = springValues.value[place];\n\n      if (newRoundedValue !== oldRoundedValue) {\n        springValues.value[place] = newRoundedValue;\n      }\n    });\n  },\n  { immediate: true }\n);\n\nwatch(\n  () => digitHeight.value,\n  () => {\n    positionCache.clear();\n  }\n);\n\nconst positionCache = new Map<string, number>();\n\nconst getDigitPosition = (place: number, digit: number): number => {\n  const springValue = springValues.value[place] || 0;\n  const cacheKey = `${place}-${digit}-${springValue}`;\n\n  if (positionCache.has(cacheKey)) {\n    return positionCache.get(cacheKey)!;\n  }\n\n  const placeValue = springValue % 10;\n  const offset = (10 + digit - placeValue) % 10;\n  let position = offset * digitHeight.value;\n\n  if (offset > 5) {\n    position -= 10 * digitHeight.value;\n  }\n\n  if (positionCache.size > 200) {\n    const firstKey = positionCache.keys().next().value;\n    if (typeof firstKey === 'string') {\n      positionCache.delete(firstKey);\n    }\n  }\n\n  positionCache.set(cacheKey, position);\n  return position;\n};\n</script>\n","path":"Counter/Counter.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
+{"name":"Counter","title":"Counter","description":"Flexible animated counter supporting increments + easing.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div class=\"relative inline-block\" :style=\"containerStyle\">\n    <div class=\"flex overflow-hidden\" :style=\"counterStyles\">\n      <div v-for=\"place in places\" :key=\"place\" class=\"relative w-[1ch] tabular-nums\" :style=\"digitStyles\">\n        <Motion\n          v-for=\"digit in 10\"\n          :key=\"digit - 1\"\n          tag=\"span\"\n          class=\"absolute top-0 left-0 w-full h-full flex items-center justify-center\"\n          :animate=\"{ y: getDigitPosition(place, digit - 1) }\"\n        >\n          {{ digit - 1 }}\n        </Motion>\n      </div>\n    </div>\n    <div class=\"pointer-events-none absolute inset-0\">\n      <div class=\"absolute top-0 w-full\" :style=\"topGradientStyle ?? topGradientStyles\" />\n      <div class=\"absolute bottom-0 w-full\" :style=\"bottomGradientStyle ?? bottomGradientStyles\" />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport { Motion } from 'motion-v';\nimport type { CSSProperties } from 'vue';\n\ninterface CounterProps {\n  value: number;\n  fontSize?: number;\n  padding?: number;\n  places?: number[];\n  gap?: number;\n  borderRadius?: number;\n  horizontalPadding?: number;\n  textColor?: string;\n  fontWeight?: string | number;\n  containerStyle?: CSSProperties;\n  counterStyle?: CSSProperties;\n  digitStyle?: CSSProperties;\n  gradientHeight?: number;\n  gradientFrom?: string;\n  gradientTo?: string;\n  topGradientStyle?: CSSProperties;\n  bottomGradientStyle?: CSSProperties;\n}\n\nconst props = withDefaults(defineProps<CounterProps>(), {\n  fontSize: 100,\n  padding: 0,\n  places: () => [100, 10, 1],\n  gap: 8,\n  borderRadius: 4,\n  horizontalPadding: 8,\n  textColor: 'white',\n  fontWeight: 'bold',\n  containerStyle: () => ({}),\n  counterStyle: () => ({}),\n  digitStyle: () => ({}),\n  gradientHeight: 16,\n  gradientFrom: 'black',\n  gradientTo: 'transparent',\n  topGradientStyle: undefined,\n  bottomGradientStyle: undefined\n});\n\nconst digitHeight = computed(() => props.fontSize + props.padding);\n\nconst counterStyles = computed(() => ({\n  fontSize: `${props.fontSize}px`,\n  gap: `${props.gap}px`,\n  borderRadius: `${props.borderRadius}px`,\n  paddingLeft: `${props.horizontalPadding}px`,\n  paddingRight: `${props.horizontalPadding}px`,\n  color: props.textColor,\n  fontWeight: props.fontWeight,\n  ...props.counterStyle\n}));\n\nconst digitStyles = computed(() => ({\n  height: `${digitHeight.value}px`,\n  ...props.digitStyle\n}));\n\nconst topGradientStyles = computed(\n  (): CSSProperties => ({\n    height: `${props.gradientHeight}px`,\n    background: `linear-gradient(to bottom, ${props.gradientFrom}, ${props.gradientTo})`\n  })\n);\n\nconst bottomGradientStyles = computed(\n  (): CSSProperties => ({\n    height: `${props.gradientHeight}px`,\n    background: `linear-gradient(to top, ${props.gradientFrom}, ${props.gradientTo})`\n  })\n);\n\nconst springValues = ref<Record<number, number>>({});\n\nconst initializeSpringValues = () => {\n  props.places.forEach(place => {\n    springValues.value[place] = Math.floor(props.value / place);\n  });\n};\n\ninitializeSpringValues();\n\nwatch(\n  () => props.value,\n  (newValue, oldValue) => {\n    if (newValue === oldValue) return;\n\n    props.places.forEach(place => {\n      const newRoundedValue = Math.floor(newValue / place);\n      const oldRoundedValue = springValues.value[place];\n\n      if (newRoundedValue !== oldRoundedValue) {\n        springValues.value[place] = newRoundedValue;\n      }\n    });\n  },\n  { immediate: true }\n);\n\nwatch(\n  () => digitHeight.value,\n  () => {\n    positionCache.clear();\n  }\n);\n\nconst positionCache = new Map<string, number>();\n\nconst getDigitPosition = (place: number, digit: number): number => {\n  const springValue = springValues.value[place] || 0;\n  const cacheKey = `${place}-${digit}-${springValue}`;\n\n  if (positionCache.has(cacheKey)) {\n    return positionCache.get(cacheKey)!;\n  }\n\n  const placeValue = springValue % 10;\n  const offset = (10 + digit - placeValue) % 10;\n  let position = offset * digitHeight.value;\n\n  if (offset > 5) {\n    position -= 10 * digitHeight.value;\n  }\n\n  if (positionCache.size > 200) {\n    const firstKey = positionCache.keys().next().value;\n    if (typeof firstKey === 'string') {\n      positionCache.delete(firstKey);\n    }\n  }\n\n  positionCache.set(cacheKey, position);\n  return position;\n};\n</script>\n","path":"Counter/Counter.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
diff --git a/public/r/Dock.json b/public/r/Dock.json
index 67dd279..665b660 100644
--- a/public/r/Dock.json
+++ b/public/r/Dock.json
@@ -1 +1 @@
-{"name":"Dock","title":"Dock","description":"macOS style magnifying dock with proximity scaling of icons.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, defineComponent, h } from 'vue';\nimport { useMotionValue, useSpring, useTransform } from 'motion-v';\n\nexport type SpringOptions = NonNullable<Parameters<typeof useSpring>[1]>;\n\nexport type DockItemData = {\n  icon: unknown;\n  label: unknown;\n  onClick: () => void;\n  className?: string;\n};\n\nexport type DockProps = {\n  items: DockItemData[];\n  className?: string;\n  distance?: number;\n  panelHeight?: number;\n  baseItemSize?: number;\n  dockHeight?: number;\n  magnification?: number;\n  spring?: SpringOptions;\n};\n\nconst props = withDefaults(defineProps<DockProps>(), {\n  className: '',\n  distance: 200,\n  panelHeight: 64,\n  baseItemSize: 50,\n  dockHeight: 256,\n  magnification: 70,\n  spring: () => ({ mass: 0.1, stiffness: 150, damping: 12 })\n});\n\nconst mouseX = useMotionValue(Infinity);\nconst isHovered = useMotionValue(0);\nconst currentHeight = ref(props.panelHeight);\n\nconst maxHeight = computed(() => Math.max(props.dockHeight, props.magnification + props.magnification / 2 + 4));\n\nconst heightRow = useTransform(isHovered, [0, 1], [props.panelHeight, maxHeight.value]);\nconst height = useSpring(heightRow, props.spring);\n\nlet unsubscribeHeight: (() => void) | null = null;\n\nonMounted(() => {\n  unsubscribeHeight = height.on('change', (latest: number) => {\n    currentHeight.value = latest;\n  });\n});\n\nonUnmounted(() => {\n  if (unsubscribeHeight) {\n    unsubscribeHeight();\n  }\n});\n\nconst handleMouseMove = (event: MouseEvent) => {\n  isHovered.set(1);\n  mouseX.set(event.pageX);\n};\n\nconst handleMouseLeave = () => {\n  isHovered.set(0);\n  mouseX.set(Infinity);\n};\n</script>\n\n<template>\n  <div :style=\"{ height: currentHeight + 'px', scrollbarWidth: 'none' }\" class=\"flex items-center mx-2 max-w-full\">\n    <div\n      @mousemove=\"handleMouseMove\"\n      @mouseleave=\"handleMouseLeave\"\n      :class=\"`${props.className} absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-end w-fit gap-4 rounded-2xl border-neutral-700 border-2 pb-2 px-4`\"\n      :style=\"{ height: props.panelHeight + 'px' }\"\n      role=\"toolbar\"\n      aria-=\"Application dock\"\n    >\n      <DockItem\n        v-for=\"(item, index) in props.items\"\n        :key=\"index\"\n        :onClick=\"item.onClick\"\n        :className=\"item.className\"\n        :mouseX=\"mouseX\"\n        :spring=\"props.spring\"\n        :distance=\"props.distance\"\n        :magnification=\"props.magnification\"\n        :baseItemSize=\"props.baseItemSize\"\n        :item=\"item\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nconst DockItem = defineComponent({\n  name: 'DockItem',\n  props: {\n    className: {\n      type: String,\n      default: ''\n    },\n    onClick: {\n      type: Function,\n      default: () => {}\n    },\n    mouseX: {\n      type: Object as () => ReturnType<typeof useMotionValue<number>>,\n      required: true\n    },\n    spring: {\n      type: Object as () => SpringOptions,\n      required: true\n    },\n    distance: {\n      type: Number,\n      required: true\n    },\n    baseItemSize: {\n      type: Number,\n      required: true\n    },\n    magnification: {\n      type: Number,\n      required: true\n    },\n    item: {\n      type: Object as () => DockItemData,\n      required: true\n    }\n  },\n  setup(props) {\n    const itemRef = ref<HTMLDivElement>();\n    const isHovered = useMotionValue(0);\n    const currentSize = ref(props.baseItemSize);\n\n    const mouseDistance = useTransform(props.mouseX, (val: number) => {\n      const rect = itemRef.value?.getBoundingClientRect() ?? {\n        x: 0,\n        width: props.baseItemSize\n      };\n      return val - rect.x - props.baseItemSize / 2;\n    });\n\n    const targetSize = useTransform(\n      mouseDistance,\n      [-props.distance, 0, props.distance],\n      [props.baseItemSize, props.magnification, props.baseItemSize]\n    );\n    const size = useSpring(targetSize, props.spring);\n\n    let unsubscribeSize: (() => void) | null = null;\n\n    onMounted(() => {\n      unsubscribeSize = size.on('change', (latest: number) => {\n        currentSize.value = latest;\n      });\n    });\n\n    onUnmounted(() => {\n      if (unsubscribeSize) {\n        unsubscribeSize();\n      }\n    });\n\n    const handleHoverStart = () => isHovered.set(1);\n    const handleHoverEnd = () => isHovered.set(0);\n    const handleFocus = () => isHovered.set(1);\n    const handleBlur = () => isHovered.set(0);\n\n    return {\n      itemRef,\n      size,\n      currentSize,\n      isHovered,\n      handleHoverStart,\n      handleHoverEnd,\n      handleFocus,\n      handleBlur\n    };\n  },\n  render() {\n    const icon = typeof this.item.icon === 'function' ? this.item.icon() : this.item.icon;\n    const label = typeof this.item.label === 'function' ? this.item.label() : this.item.label;\n\n    return h(\n      'div',\n      {\n        ref: 'itemRef',\n        style: {\n          width: this.currentSize + 'px',\n          height: this.currentSize + 'px'\n        },\n        onMouseenter: this.handleHoverStart,\n        onMouseleave: this.handleHoverEnd,\n        onFocus: this.handleFocus,\n        onBlur: this.handleBlur,\n        onClick: this.onClick,\n        class: `relative cursor-pointer inline-flex items-center justify-center rounded-full bg-[#111] border-neutral-700 border-2 shadow-md ${this.className}`,\n        tabindex: 0,\n        role: 'button',\n        'aria-haspopup': 'true'\n      },\n      [\n        h(DockIcon, {}, () => [icon]),\n        h(DockLabel, { isHovered: this.isHovered }, () => [typeof label === 'string' ? label : label])\n      ]\n    );\n  }\n});\n\nconst DockLabel = defineComponent({\n  name: 'DockLabel',\n  props: {\n    className: {\n      type: String,\n      default: ''\n    },\n    isHovered: {\n      type: Object as () => ReturnType<typeof useMotionValue<number>>,\n      required: true\n    }\n  },\n  setup(props) {\n    const isVisible = ref(false);\n\n    let unsubscribe: (() => void) | null = null;\n\n    onMounted(() => {\n      unsubscribe = props.isHovered.on('change', (latest: number) => {\n        isVisible.value = latest === 1;\n      });\n    });\n\n    onUnmounted(() => {\n      if (unsubscribe) {\n        unsubscribe();\n      }\n    });\n\n    return {\n      isVisible\n    };\n  },\n  render() {\n    return h(\n      'div',\n      {\n        class: `${this.className} absolute -top-8 left-1/2 w-fit whitespace-pre rounded-md border border-neutral-700 bg-[#111] px-2 py-0.5 text-xs text-white transition-all duration-200`,\n        role: 'tooltip',\n        style: {\n          transform: 'translateX(-50%)',\n          opacity: this.isVisible ? 1 : 0,\n          visibility: this.isVisible ? 'visible' : 'hidden'\n        }\n      },\n      this.$slots.default?.()\n    );\n  }\n});\n\nconst DockIcon = defineComponent({\n  name: 'DockIcon',\n  props: {\n    className: {\n      type: String,\n      default: ''\n    }\n  },\n  render() {\n    return h(\n      'div',\n      {\n        class: `flex items-center justify-center ${this.className}`\n      },\n      this.$slots.default?.()\n    );\n  }\n});\n\nexport default defineComponent({\n  name: 'Dock',\n  components: {\n    DockItem\n  }\n});\n</script>\n","path":"Dock/Dock.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
+{"name":"Dock","title":"Dock","description":"macOS style magnifying dock with proximity scaling of icons.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, defineComponent, h } from 'vue';\nimport { useMotionValue, useSpring, useTransform } from 'motion-v';\n\nexport type SpringOptions = NonNullable<Parameters<typeof useSpring>[1]>;\n\nexport type DockItemData = {\n  icon: unknown;\n  label: unknown;\n  onClick: () => void;\n  className?: string;\n};\n\nexport type DockProps = {\n  items: DockItemData[];\n  className?: string;\n  distance?: number;\n  panelHeight?: number;\n  baseItemSize?: number;\n  dockHeight?: number;\n  magnification?: number;\n  spring?: SpringOptions;\n};\n\nconst props = withDefaults(defineProps<DockProps>(), {\n  className: '',\n  distance: 200,\n  panelHeight: 64,\n  baseItemSize: 50,\n  dockHeight: 256,\n  magnification: 70,\n  spring: () => ({ mass: 0.1, stiffness: 150, damping: 12 })\n});\n\nconst mouseX = useMotionValue(Infinity);\nconst isHovered = useMotionValue(0);\nconst currentHeight = ref(props.panelHeight);\n\nconst maxHeight = computed(() => Math.max(props.dockHeight, props.magnification + props.magnification / 2 + 4));\n\nconst heightRow = useTransform(isHovered, [0, 1], [props.panelHeight, maxHeight.value]);\nconst height = useSpring(heightRow, props.spring);\n\nlet unsubscribeHeight: (() => void) | null = null;\n\nonMounted(() => {\n  unsubscribeHeight = height.on('change', (latest: number) => {\n    currentHeight.value = latest;\n  });\n});\n\nonUnmounted(() => {\n  if (unsubscribeHeight) {\n    unsubscribeHeight();\n  }\n});\n\nconst handleMouseMove = (event: MouseEvent) => {\n  isHovered.set(1);\n  mouseX.set(event.pageX);\n};\n\nconst handleMouseLeave = () => {\n  isHovered.set(0);\n  mouseX.set(Infinity);\n};\n</script>\n\n<template>\n  <div :style=\"{ height: currentHeight + 'px', scrollbarWidth: 'none' }\" class=\"flex items-center mx-2 max-w-full\">\n    <div\n      @mousemove=\"handleMouseMove\"\n      @mouseleave=\"handleMouseLeave\"\n      :class=\"`${props.className} absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-end w-fit gap-4 rounded-2xl border-neutral-700 border-2 pb-2 px-4`\"\n      :style=\"{ height: props.panelHeight + 'px' }\"\n      role=\"toolbar\"\n      aria-=\"Application dock\"\n    >\n      <DockItem\n        v-for=\"(item, index) in props.items\"\n        :key=\"index\"\n        :onClick=\"item.onClick\"\n        :className=\"item.className\"\n        :mouseX=\"mouseX\"\n        :spring=\"props.spring\"\n        :distance=\"props.distance\"\n        :magnification=\"props.magnification\"\n        :baseItemSize=\"props.baseItemSize\"\n        :item=\"item\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nconst DockItem = defineComponent({\n  name: 'DockItem',\n  props: {\n    className: {\n      type: String,\n      default: ''\n    },\n    onClick: {\n      type: Function,\n      default: () => {}\n    },\n    mouseX: {\n      type: Object as () => ReturnType<typeof useMotionValue<number>>,\n      required: true\n    },\n    spring: {\n      type: Object as () => SpringOptions,\n      required: true\n    },\n    distance: {\n      type: Number,\n      required: true\n    },\n    baseItemSize: {\n      type: Number,\n      required: true\n    },\n    magnification: {\n      type: Number,\n      required: true\n    },\n    item: {\n      type: Object as () => DockItemData,\n      required: true\n    }\n  },\n  setup(props) {\n    const itemRef = ref<HTMLDivElement>();\n    const isHovered = useMotionValue(0);\n    const currentSize = ref(props.baseItemSize);\n\n    const mouseDistance = useTransform(props.mouseX, (val: number) => {\n      const rect = itemRef.value?.getBoundingClientRect() ?? {\n        x: 0,\n        width: props.baseItemSize\n      };\n      return val - rect.x - props.baseItemSize / 2;\n    });\n\n    const targetSize = useTransform(\n      mouseDistance,\n      [-props.distance, 0, props.distance],\n      [props.baseItemSize, props.magnification, props.baseItemSize]\n    );\n    const size = useSpring(targetSize, props.spring);\n\n    let unsubscribeSize: (() => void) | null = null;\n\n    onMounted(() => {\n      unsubscribeSize = size.on('change', (latest: number) => {\n        currentSize.value = latest;\n      });\n    });\n\n    onUnmounted(() => {\n      if (unsubscribeSize) {\n        unsubscribeSize();\n      }\n    });\n\n    const handleHoverStart = () => isHovered.set(1);\n    const handleHoverEnd = () => isHovered.set(0);\n    const handleFocus = () => isHovered.set(1);\n    const handleBlur = () => isHovered.set(0);\n\n    return {\n      itemRef,\n      size,\n      currentSize,\n      isHovered,\n      handleHoverStart,\n      handleHoverEnd,\n      handleFocus,\n      handleBlur\n    };\n  },\n  render() {\n    const icon = typeof this.item.icon === 'function' ? this.item.icon() : this.item.icon;\n    const label = typeof this.item.label === 'function' ? this.item.label() : this.item.label;\n\n    return h(\n      'div',\n      {\n        ref: 'itemRef',\n        style: {\n          width: this.currentSize + 'px',\n          height: this.currentSize + 'px'\n        },\n        onMouseenter: this.handleHoverStart,\n        onMouseleave: this.handleHoverEnd,\n        onFocus: this.handleFocus,\n        onBlur: this.handleBlur,\n        onClick: this.onClick,\n        class: `relative cursor-pointer inline-flex items-center justify-center rounded-full bg-[#111] border-neutral-700 border-2 shadow-md ${this.className}`,\n        tabindex: 0,\n        role: 'button',\n        'aria-haspopup': 'true'\n      },\n      [\n        h(DockIcon, {}, () => [icon]),\n        h(DockLabel, { isHovered: this.isHovered }, () => [typeof label === 'string' ? label : label])\n      ]\n    );\n  }\n});\n\nconst DockLabel = defineComponent({\n  name: 'DockLabel',\n  props: {\n    className: {\n      type: String,\n      default: ''\n    },\n    isHovered: {\n      type: Object as () => ReturnType<typeof useMotionValue<number>>,\n      required: true\n    }\n  },\n  setup(props) {\n    const isVisible = ref(false);\n\n    let unsubscribe: (() => void) | null = null;\n\n    onMounted(() => {\n      unsubscribe = props.isHovered.on('change', (latest: number) => {\n        isVisible.value = latest === 1;\n      });\n    });\n\n    onUnmounted(() => {\n      if (unsubscribe) {\n        unsubscribe();\n      }\n    });\n\n    return {\n      isVisible\n    };\n  },\n  render() {\n    return h(\n      'div',\n      {\n        class: `${this.className} absolute -top-8 left-1/2 w-fit whitespace-pre rounded-md border border-neutral-700 bg-[#111] px-2 py-0.5 text-xs text-white transition-all duration-200`,\n        role: 'tooltip',\n        style: {\n          transform: 'translateX(-50%)',\n          opacity: this.isVisible ? 1 : 0,\n          visibility: this.isVisible ? 'visible' : 'hidden'\n        }\n      },\n      this.$slots.default?.()\n    );\n  }\n});\n\nconst DockIcon = defineComponent({\n  name: 'DockIcon',\n  props: {\n    className: {\n      type: String,\n      default: ''\n    }\n  },\n  render() {\n    return h(\n      'div',\n      {\n        class: `flex items-center justify-center ${this.className}`\n      },\n      this.$slots.default?.()\n    );\n  }\n});\n\nexport default defineComponent({\n  name: 'Dock',\n  components: {\n    DockItem\n  }\n});\n</script>\n","path":"Dock/Dock.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
diff --git a/public/r/RotatingText.json b/public/r/RotatingText.json
index 3520600..68c31bb 100644
--- a/public/r/RotatingText.json
+++ b/public/r/RotatingText.json
@@ -1 +1 @@
-{"name":"RotatingText","title":"RotatingText","description":"Cycles through multiple phrases with 3D rotate / flip transitions.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { AnimatePresence, Motion } from 'motion-v';\nimport type { MotionProps } from 'motion-v';\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue';\n\ntype StaggerFrom = 'first' | 'last' | 'center' | 'random' | number;\ntype SplitBy = 'characters' | 'words' | 'lines';\n\ntype TransitionType = NonNullable<MotionProps['transition']>;\ntype InitialType = NonNullable<MotionProps['initial']>;\ntype AnimateType = NonNullable<MotionProps['animate']>;\ntype ExitType = NonNullable<MotionProps['exit']>;\n\ninterface WordElement {\n  characters: string[];\n  needsSpace: boolean;\n}\n\ninterface RotatingTextProps {\n  texts: string[];\n  transition?: TransitionType;\n  initial?: InitialType;\n  animate?: AnimateType;\n  exit?: ExitType;\n  animatePresenceMode?: 'sync' | 'wait';\n  animatePresenceInitial?: boolean;\n  rotationInterval?: number;\n  staggerDuration?: number;\n  staggerFrom?: StaggerFrom;\n  loop?: boolean;\n  auto?: boolean;\n  splitBy?: SplitBy;\n  onNext?: (index: number) => void;\n  mainClassName?: string;\n  splitLevelClassName?: string;\n  elementLevelClassName?: string;\n}\n\nconst cn = (...classes: (string | undefined | null | boolean)[]): string => {\n  return classes.filter(Boolean).join(' ');\n};\n\nconst props = withDefaults(defineProps<RotatingTextProps>(), {\n  transition: () =>\n    ({\n      type: 'spring',\n      damping: 25,\n      stiffness: 300\n    }) as TransitionType,\n  initial: () => ({ y: '100%', opacity: 0 }) as InitialType,\n  animate: () => ({ y: 0, opacity: 1 }) as AnimateType,\n  exit: () => ({ y: '-120%', opacity: 0 }) as ExitType,\n  animatePresenceMode: 'wait',\n  animatePresenceInitial: false,\n  rotationInterval: 2000,\n  staggerDuration: 0,\n  staggerFrom: 'first',\n  loop: true,\n  auto: true,\n  splitBy: 'characters'\n});\n\nconst currentTextIndex = ref(0);\nlet intervalId: ReturnType<typeof setInterval> | null = null;\n\nconst splitIntoCharacters = (text: string): string[] => {\n  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n    const IntlWithSegmenter = Intl as typeof Intl & {\n      Segmenter: new (\n        locales?: string | string[],\n        options?: { granularity: 'grapheme' | 'word' | 'sentence' }\n      ) => {\n        segment: (text: string) => Iterable<{ segment: string }>;\n      };\n    };\n    const segmenter = new IntlWithSegmenter.Segmenter('en', { granularity: 'grapheme' });\n    return [...segmenter.segment(text)].map(({ segment }) => segment);\n  }\n\n  return [...text];\n};\nconst elements = computed((): WordElement[] => {\n  const currentText = props.texts[currentTextIndex.value];\n\n  switch (props.splitBy) {\n    case 'characters': {\n      const words = currentText.split(' ');\n      return words.map((word, i) => ({\n        characters: splitIntoCharacters(word),\n        needsSpace: i !== words.length - 1\n      }));\n    }\n    case 'words': {\n      const words = currentText.split(' ');\n      return words.map((word, i) => ({\n        characters: [word],\n        needsSpace: i !== words.length - 1\n      }));\n    }\n    case 'lines': {\n      const lines = currentText.split('\\n');\n      return lines.map((line, i) => ({\n        characters: [line],\n        needsSpace: i !== lines.length - 1\n      }));\n    }\n    default: {\n      const parts = currentText.split(props.splitBy!);\n      return parts.map((part, i) => ({\n        characters: [part],\n        needsSpace: i !== parts.length - 1\n      }));\n    }\n  }\n});\n\nconst getStaggerDelay = (index: number, totalChars: number): number => {\n  const { staggerDuration, staggerFrom } = props;\n\n  switch (staggerFrom) {\n    case 'first':\n      return index * staggerDuration;\n    case 'last':\n      return (totalChars - 1 - index) * staggerDuration;\n    case 'center': {\n      const center = Math.floor(totalChars / 2);\n      return Math.abs(center - index) * staggerDuration;\n    }\n    case 'random': {\n      const randomIndex = Math.floor(Math.random() * totalChars);\n      return Math.abs(randomIndex - index) * staggerDuration;\n    }\n    default:\n      return Math.abs((staggerFrom as number) - index) * staggerDuration;\n  }\n};\n\nconst handleIndexChange = (newIndex: number): void => {\n  currentTextIndex.value = newIndex;\n  props.onNext?.(newIndex);\n};\n\nconst next = (): void => {\n  const isAtEnd = currentTextIndex.value === props.texts.length - 1;\n  const nextIndex = isAtEnd ? (props.loop ? 0 : currentTextIndex.value) : currentTextIndex.value + 1;\n\n  if (nextIndex !== currentTextIndex.value) {\n    handleIndexChange(nextIndex);\n  }\n};\n\nconst previous = (): void => {\n  const isAtStart = currentTextIndex.value === 0;\n  const prevIndex = isAtStart\n    ? props.loop\n      ? props.texts.length - 1\n      : currentTextIndex.value\n    : currentTextIndex.value - 1;\n\n  if (prevIndex !== currentTextIndex.value) {\n    handleIndexChange(prevIndex);\n  }\n};\n\nconst jumpTo = (index: number): void => {\n  const validIndex = Math.max(0, Math.min(index, props.texts.length - 1));\n  if (validIndex !== currentTextIndex.value) {\n    handleIndexChange(validIndex);\n  }\n};\n\nconst reset = (): void => {\n  if (currentTextIndex.value !== 0) {\n    handleIndexChange(0);\n  }\n};\n\nconst cleanupInterval = (): void => {\n  if (intervalId) {\n    clearInterval(intervalId);\n    intervalId = null;\n  }\n};\n\nconst startInterval = (): void => {\n  if (props.auto) {\n    intervalId = setInterval(next, props.rotationInterval);\n  }\n};\n\ndefineExpose({\n  next,\n  previous,\n  jumpTo,\n  reset\n});\n\nwatch(\n  () => [props.auto, props.rotationInterval] as const,\n  () => {\n    cleanupInterval();\n    startInterval();\n  }\n);\n\nonMounted(() => {\n  startInterval();\n});\n\nonUnmounted(() => {\n  cleanupInterval();\n});\n</script>\n\n<template>\n  <Motion\n    tag=\"span\"\n    :class=\"cn('flex flex-wrap whitespace-pre-wrap relative', mainClassName)\"\n    v-bind=\"$attrs\"\n    :transition=\"transition\"\n    layout\n  >\n    <span class=\"sr-only\">\n      {{ texts[currentTextIndex] }}\n    </span>\n\n    <AnimatePresence :mode=\"animatePresenceMode\" :initial=\"animatePresenceInitial\">\n      <Motion\n        :key=\"currentTextIndex\"\n        tag=\"span\"\n        :class=\"cn(splitBy === 'lines' ? 'flex flex-col w-full' : 'flex flex-wrap whitespace-pre-wrap relative')\"\n        aria-hidden=\"true\"\n        layout\n      >\n        <span v-for=\"(wordObj, wordIndex) in elements\" :key=\"wordIndex\" :class=\"cn('inline-flex', splitLevelClassName)\">\n          <Motion\n            v-for=\"(char, charIndex) in wordObj.characters\"\n            :key=\"charIndex\"\n            tag=\"span\"\n            :initial=\"initial\"\n            :animate=\"animate\"\n            :exit=\"exit\"\n            :transition=\"{\n              ...transition,\n              delay: getStaggerDelay(\n                elements.slice(0, wordIndex).reduce((sum, word) => sum + word.characters.length, 0) + charIndex,\n                elements.reduce((sum, word) => sum + word.characters.length, 0)\n              )\n            }\"\n            :class=\"cn('inline-block', elementLevelClassName)\"\n          >\n            {{ char }}\n          </Motion>\n          <span v-if=\"wordObj.needsSpace\" class=\"whitespace-pre\"></span>\n        </span>\n      </Motion>\n    </AnimatePresence>\n  </Motion>\n</template>\n","path":"RotatingText/RotatingText.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
+{"name":"RotatingText","title":"RotatingText","description":"Cycles through multiple phrases with 3D rotate / flip transitions.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { AnimatePresence, Motion } from 'motion-v';\nimport type { MotionProps } from 'motion-v';\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue';\n\ntype StaggerFrom = 'first' | 'last' | 'center' | 'random' | number;\ntype SplitBy = 'characters' | 'words' | 'lines';\n\ntype TransitionType = NonNullable<MotionProps['transition']>;\ntype InitialType = NonNullable<MotionProps['initial']>;\ntype AnimateType = NonNullable<MotionProps['animate']>;\ntype ExitType = NonNullable<MotionProps['exit']>;\n\ninterface WordElement {\n  characters: string[];\n  needsSpace: boolean;\n}\n\ninterface RotatingTextProps {\n  texts: string[];\n  transition?: TransitionType;\n  initial?: InitialType;\n  animate?: AnimateType;\n  exit?: ExitType;\n  animatePresenceMode?: 'sync' | 'wait';\n  animatePresenceInitial?: boolean;\n  rotationInterval?: number;\n  staggerDuration?: number;\n  staggerFrom?: StaggerFrom;\n  loop?: boolean;\n  auto?: boolean;\n  splitBy?: SplitBy;\n  onNext?: (index: number) => void;\n  mainClassName?: string;\n  splitLevelClassName?: string;\n  elementLevelClassName?: string;\n}\n\nconst cn = (...classes: (string | undefined | null | boolean)[]): string => {\n  return classes.filter(Boolean).join(' ');\n};\n\nconst props = withDefaults(defineProps<RotatingTextProps>(), {\n  transition: () =>\n    ({\n      type: 'spring',\n      damping: 25,\n      stiffness: 300\n    }) as TransitionType,\n  initial: () => ({ y: '100%', opacity: 0 }) as InitialType,\n  animate: () => ({ y: 0, opacity: 1 }) as AnimateType,\n  exit: () => ({ y: '-120%', opacity: 0 }) as ExitType,\n  animatePresenceMode: 'wait',\n  animatePresenceInitial: false,\n  rotationInterval: 2000,\n  staggerDuration: 0,\n  staggerFrom: 'first',\n  loop: true,\n  auto: true,\n  splitBy: 'characters'\n});\n\nconst currentTextIndex = ref(0);\nlet intervalId: ReturnType<typeof setInterval> | null = null;\n\nconst splitIntoCharacters = (text: string): string[] => {\n  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n    const IntlWithSegmenter = Intl as typeof Intl & {\n      Segmenter: new (\n        locales?: string | string[],\n        options?: { granularity: 'grapheme' | 'word' | 'sentence' }\n      ) => {\n        segment: (text: string) => Iterable<{ segment: string }>;\n      };\n    };\n    const segmenter = new IntlWithSegmenter.Segmenter('en', { granularity: 'grapheme' });\n    return [...segmenter.segment(text)].map(({ segment }) => segment);\n  }\n\n  return [...text];\n};\nconst elements = computed((): WordElement[] => {\n  const currentText = props.texts[currentTextIndex.value];\n\n  switch (props.splitBy) {\n    case 'characters': {\n      const words = currentText.split(' ');\n      return words.map((word, i) => ({\n        characters: splitIntoCharacters(word),\n        needsSpace: i !== words.length - 1\n      }));\n    }\n    case 'words': {\n      const words = currentText.split(' ');\n      return words.map((word, i) => ({\n        characters: [word],\n        needsSpace: i !== words.length - 1\n      }));\n    }\n    case 'lines': {\n      const lines = currentText.split('\\n');\n      return lines.map((line, i) => ({\n        characters: [line],\n        needsSpace: i !== lines.length - 1\n      }));\n    }\n    default: {\n      const parts = currentText.split(props.splitBy!);\n      return parts.map((part, i) => ({\n        characters: [part],\n        needsSpace: i !== parts.length - 1\n      }));\n    }\n  }\n});\n\nconst getStaggerDelay = (index: number, totalChars: number): number => {\n  const { staggerDuration, staggerFrom } = props;\n\n  switch (staggerFrom) {\n    case 'first':\n      return index * staggerDuration;\n    case 'last':\n      return (totalChars - 1 - index) * staggerDuration;\n    case 'center': {\n      const center = Math.floor(totalChars / 2);\n      return Math.abs(center - index) * staggerDuration;\n    }\n    case 'random': {\n      const randomIndex = Math.floor(Math.random() * totalChars);\n      return Math.abs(randomIndex - index) * staggerDuration;\n    }\n    default:\n      return Math.abs((staggerFrom as number) - index) * staggerDuration;\n  }\n};\n\nconst handleIndexChange = (newIndex: number): void => {\n  currentTextIndex.value = newIndex;\n  props.onNext?.(newIndex);\n};\n\nconst next = (): void => {\n  const isAtEnd = currentTextIndex.value === props.texts.length - 1;\n  const nextIndex = isAtEnd ? (props.loop ? 0 : currentTextIndex.value) : currentTextIndex.value + 1;\n\n  if (nextIndex !== currentTextIndex.value) {\n    handleIndexChange(nextIndex);\n  }\n};\n\nconst previous = (): void => {\n  const isAtStart = currentTextIndex.value === 0;\n  const prevIndex = isAtStart\n    ? props.loop\n      ? props.texts.length - 1\n      : currentTextIndex.value\n    : currentTextIndex.value - 1;\n\n  if (prevIndex !== currentTextIndex.value) {\n    handleIndexChange(prevIndex);\n  }\n};\n\nconst jumpTo = (index: number): void => {\n  const validIndex = Math.max(0, Math.min(index, props.texts.length - 1));\n  if (validIndex !== currentTextIndex.value) {\n    handleIndexChange(validIndex);\n  }\n};\n\nconst reset = (): void => {\n  if (currentTextIndex.value !== 0) {\n    handleIndexChange(0);\n  }\n};\n\nconst cleanupInterval = (): void => {\n  if (intervalId) {\n    clearInterval(intervalId);\n    intervalId = null;\n  }\n};\n\nconst startInterval = (): void => {\n  if (props.auto) {\n    intervalId = setInterval(next, props.rotationInterval);\n  }\n};\n\ndefineExpose({\n  next,\n  previous,\n  jumpTo,\n  reset\n});\n\nwatch(\n  () => [props.auto, props.rotationInterval] as const,\n  () => {\n    cleanupInterval();\n    startInterval();\n  }\n);\n\nonMounted(() => {\n  startInterval();\n});\n\nonUnmounted(() => {\n  cleanupInterval();\n});\n</script>\n\n<template>\n  <Motion\n    tag=\"span\"\n    :class=\"cn('flex flex-wrap whitespace-pre-wrap relative', mainClassName)\"\n    v-bind=\"$attrs\"\n    :transition=\"transition\"\n    layout\n  >\n    <span class=\"sr-only\">\n      {{ texts[currentTextIndex] }}\n    </span>\n\n    <AnimatePresence :mode=\"animatePresenceMode\" :initial=\"animatePresenceInitial\">\n      <Motion\n        :key=\"currentTextIndex\"\n        tag=\"span\"\n        :class=\"cn(splitBy === 'lines' ? 'flex flex-col w-full' : 'flex flex-wrap whitespace-pre-wrap relative')\"\n        aria-hidden=\"true\"\n        layout\n      >\n        <span v-for=\"(wordObj, wordIndex) in elements\" :key=\"wordIndex\" :class=\"cn('inline-flex', splitLevelClassName)\">\n          <Motion\n            v-for=\"(char, charIndex) in wordObj.characters\"\n            :key=\"charIndex\"\n            tag=\"span\"\n            :initial=\"initial\"\n            :animate=\"animate\"\n            :exit=\"exit\"\n            :transition=\"{\n              ...transition,\n              delay: getStaggerDelay(\n                elements.slice(0, wordIndex).reduce((sum, word) => sum + word.characters.length, 0) + charIndex,\n                elements.reduce((sum, word) => sum + word.characters.length, 0)\n              )\n            }\"\n            :class=\"cn('inline-block', elementLevelClassName)\"\n          >\n            {{ char }}\n          </Motion>\n          <span v-if=\"wordObj.needsSpace\" class=\"whitespace-pre\"></span>\n        </span>\n      </Motion>\n    </AnimatePresence>\n  </Motion>\n</template>\n","path":"RotatingText/RotatingText.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
diff --git a/public/r/Stack.json b/public/r/Stack.json
index ceaadee..e80a304 100644
--- a/public/r/Stack.json
+++ b/public/r/Stack.json
@@ -1 +1 @@
-{"name":"Stack","title":"Stack","description":"Layered stack with swipe animations and smooth transitions.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div\n    class=\"relative\"\n    :style=\"{ width: cardDimensions.width + 'px', height: cardDimensions.height + 'px', perspective: 600 }\"\n  >\n    <template v-for=\"(card, index) in cards\" :key=\"card.id\">\n      <Motion\n        as=\"div\"\n        class=\"absolute cursor-grab\"\n        :style=\"{\n          x: cardStates.get(card.id)?.x,\n          y: cardStates.get(card.id)?.y,\n          rotateX: cardStates.get(card.id)?.rotateX,\n          rotateY: cardStates.get(card.id)?.rotateY\n        }\"\n        drag\n        :drag-constraints=\"{ top: 0, right: 0, bottom: 0, left: 0 }\"\n        :dragElastic=\"0.6\"\n        :whileTap=\"{ cursor: 'grabbing', scale: 1.02 }\"\n        :onDragEnd=\"(e, info) => handleDragEnd(e, info, card.id)\"\n      >\n        <Motion\n          as=\"div\"\n          class=\"rounded-2xl overflow-hidden border-4 border-white\"\n          @click=\"sendToBackOnClick && sendToBack(card.id)\"\n          :animate=\"{\n            rotateZ: (cards.length - index - 1) * 4 + (randomRotation ? Math.random() * 10 - 5 : 0),\n            scale: 1 + index * 0.06 - cards.length * 0.06,\n            transformOrigin: '90% 90%'\n          }\"\n          :initial=\"false\"\n          :transition=\"{\n            type: 'spring',\n            stiffness: animationConfig.stiffness,\n            damping: animationConfig.damping\n          }\"\n          :style=\"{\n            width: cardDimensions.width + 'px',\n            height: cardDimensions.height + 'px'\n          }\"\n        >\n          <img :src=\"card.img\" :alt=\"`card-${card.id}`\" className=\"w-full h-full object-cover pointer-events-none\" />\n        </Motion>\n      </Motion>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PanInfo } from 'motion-v';\nimport { Motion, useMotionValue, useTransform } from 'motion-v';\nimport { onBeforeMount, ref } from 'vue';\n\ninterface StackProps {\n  className?: string;\n  randomRotation?: boolean;\n  sensitivity?: number;\n  cardDimensions?: { width: number; height: number };\n  cardsData: { id: number; img: string }[];\n  animationConfig?: { stiffness: number; damping: number };\n  sendToBackOnClick?: boolean;\n}\n\nconst props = withDefaults(defineProps<StackProps>(), {\n  randomRotation: false,\n  sensitivity: 200,\n  cardDimensions: () => ({ width: 208, height: 208 }),\n  cardsData: () => [],\n  animationConfig: () => ({ stiffness: 260, damping: 20 }),\n  sendToBackOnClick: false\n});\n\nconst cards = ref(\n  props.cardsData.length\n    ? props.cardsData\n    : [\n        { id: 1, img: 'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format' },\n        { id: 2, img: 'https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format' },\n        { id: 3, img: 'https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format' },\n        { id: 4, img: 'https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format' }\n      ]\n);\n\ntype CardState = {\n  x: ReturnType<typeof useMotionValue<number>>;\n  y: ReturnType<typeof useMotionValue<number>>;\n  rotateX: ReturnType<typeof useMotionValue<number>>;\n  rotateY: ReturnType<typeof useMotionValue<number>>;\n  reset: () => void;\n};\n\nconst cardStates = new Map<number, CardState>();\n\nfunction createCardState(): CardState {\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  const rotateX = useTransform(y, [-100, 100], [60, -60]);\n  const rotateY = useTransform(x, [-100, 100], [-60, 60]);\n\n  return {\n    x,\n    y,\n    rotateX,\n    rotateY,\n    reset() {\n      x.set(0);\n      y.set(0);\n    }\n  };\n}\n\nonBeforeMount(() => {\n  cards.value.forEach(card => {\n    if (!cardStates.has(card.id)) {\n      cardStates.set(card.id, createCardState());\n    }\n  });\n});\n\nfunction getCardState(cardId: number): CardState {\n  let state = cardStates.get(cardId);\n  if (!state) {\n    state = createCardState();\n    cardStates.set(cardId, state);\n  }\n  return state;\n}\n\nfunction handleDragEnd(_: PointerEvent, info: PanInfo, cardId: number) {\n  if (Math.abs(info.offset.x) > props.sensitivity || Math.abs(info.offset.y) > props.sensitivity) {\n    sendToBack(cardId);\n  } else {\n    getCardState(cardId).reset();\n  }\n}\n\nconst sendToBack = (id: number) => {\n  const newCards = [...cards.value];\n  const index = newCards.findIndex(card => card.id === id);\n  const [card] = newCards.splice(index, 1);\n  newCards.unshift(card);\n  cards.value = newCards;\n};\n</script>\n","path":"Stack/Stack.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
+{"name":"Stack","title":"Stack","description":"Layered stack with swipe animations and smooth transitions.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div\n    class=\"relative\"\n    :style=\"{ width: cardDimensions.width + 'px', height: cardDimensions.height + 'px', perspective: 600 }\"\n  >\n    <template v-for=\"(card, index) in cards\" :key=\"card.id\">\n      <Motion\n        as=\"div\"\n        class=\"absolute cursor-grab\"\n        :style=\"{\n          x: cardStates.get(card.id)?.x,\n          y: cardStates.get(card.id)?.y,\n          rotateX: cardStates.get(card.id)?.rotateX,\n          rotateY: cardStates.get(card.id)?.rotateY\n        }\"\n        drag\n        :drag-constraints=\"{ top: 0, right: 0, bottom: 0, left: 0 }\"\n        :dragElastic=\"0.6\"\n        :whileTap=\"{ cursor: 'grabbing', scale: 1.02 }\"\n        :onDragEnd=\"(e, info) => handleDragEnd(e, info, card.id)\"\n      >\n        <Motion\n          as=\"div\"\n          class=\"rounded-2xl overflow-hidden border-4 border-white\"\n          @click=\"sendToBackOnClick && sendToBack(card.id)\"\n          :animate=\"{\n            rotateZ: (cards.length - index - 1) * 4 + (randomRotation ? Math.random() * 10 - 5 : 0),\n            scale: 1 + index * 0.06 - cards.length * 0.06,\n            transformOrigin: '90% 90%'\n          }\"\n          :initial=\"false\"\n          :transition=\"{\n            type: 'spring',\n            stiffness: animationConfig.stiffness,\n            damping: animationConfig.damping\n          }\"\n          :style=\"{\n            width: cardDimensions.width + 'px',\n            height: cardDimensions.height + 'px'\n          }\"\n        >\n          <img :src=\"card.img\" :alt=\"`card-${card.id}`\" className=\"w-full h-full object-cover pointer-events-none\" />\n        </Motion>\n      </Motion>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PanInfo } from 'motion-v';\nimport { Motion, useMotionValue, useTransform } from 'motion-v';\nimport { onBeforeMount, ref } from 'vue';\n\ninterface StackProps {\n  className?: string;\n  randomRotation?: boolean;\n  sensitivity?: number;\n  cardDimensions?: { width: number; height: number };\n  cardsData: { id: number; img: string }[];\n  animationConfig?: { stiffness: number; damping: number };\n  sendToBackOnClick?: boolean;\n}\n\nconst props = withDefaults(defineProps<StackProps>(), {\n  randomRotation: false,\n  sensitivity: 200,\n  cardDimensions: () => ({ width: 208, height: 208 }),\n  cardsData: () => [],\n  animationConfig: () => ({ stiffness: 260, damping: 20 }),\n  sendToBackOnClick: false\n});\n\nconst cards = ref(\n  props.cardsData.length\n    ? props.cardsData\n    : [\n        { id: 1, img: 'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format' },\n        { id: 2, img: 'https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format' },\n        { id: 3, img: 'https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format' },\n        { id: 4, img: 'https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format' }\n      ]\n);\n\ntype CardState = {\n  x: ReturnType<typeof useMotionValue<number>>;\n  y: ReturnType<typeof useMotionValue<number>>;\n  rotateX: ReturnType<typeof useMotionValue<number>>;\n  rotateY: ReturnType<typeof useMotionValue<number>>;\n  reset: () => void;\n};\n\nconst cardStates = new Map<number, CardState>();\n\nfunction createCardState(): CardState {\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  const rotateX = useTransform(y, [-100, 100], [60, -60]);\n  const rotateY = useTransform(x, [-100, 100], [-60, 60]);\n\n  return {\n    x,\n    y,\n    rotateX,\n    rotateY,\n    reset() {\n      x.set(0);\n      y.set(0);\n    }\n  };\n}\n\nonBeforeMount(() => {\n  cards.value.forEach(card => {\n    if (!cardStates.has(card.id)) {\n      cardStates.set(card.id, createCardState());\n    }\n  });\n});\n\nfunction getCardState(cardId: number): CardState {\n  let state = cardStates.get(cardId);\n  if (!state) {\n    state = createCardState();\n    cardStates.set(cardId, state);\n  }\n  return state;\n}\n\nfunction handleDragEnd(_: PointerEvent, info: PanInfo, cardId: number) {\n  if (Math.abs(info.offset.x) > props.sensitivity || Math.abs(info.offset.y) > props.sensitivity) {\n    sendToBack(cardId);\n  } else {\n    getCardState(cardId).reset();\n  }\n}\n\nconst sendToBack = (id: number) => {\n  const newCards = [...cards.value];\n  const index = newCards.findIndex(card => card.id === id);\n  const [card] = newCards.splice(index, 1);\n  newCards.unshift(card);\n  cards.value = newCards;\n};\n</script>\n","path":"Stack/Stack.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
diff --git a/public/r/Stepper.json b/public/r/Stepper.json
index 2a9726f..89b0558 100644
--- a/public/r/Stepper.json
+++ b/public/r/Stepper.json
@@ -1 +1 @@
-{"name":"Stepper","title":"Stepper","description":"Animated multi-step progress indicator with active state transitions.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div class=\"flex justify-center items-center w-full h-full\" v-bind=\"$attrs\">\n    <div\n      :class=\"`w-full max-w-md p-8 rounded-[2rem] shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_10px_10px_-5px_rgba(0,0,0,0.04)] ${stepCircleContainerClassName}`\"\n      style=\"border: 1px solid #222\"\n    >\n      <div\n        :class=\"`flex items-center justify-center w-full ${stepContainerClassName}`\"\n        :style=\"{ marginBottom: isCompleted ? '0' : '2rem' }\"\n      >\n        <template v-for=\"(_, index) in stepsArray\" :key=\"index + 1\">\n          <div\n            v-if=\"!renderStepIndicator\"\n            @click=\"() => handleStepClick(index + 1)\"\n            :class=\"[\n              'relative outline-none flex h-8 w-8 items-center justify-center rounded-full font-semibold',\n              isCompleted && lockOnComplete ? 'cursor-default' : 'cursor-pointer'\n            ]\"\n            :style=\"getStepIndicatorStyle(index + 1)\"\n          >\n            <svg\n              v-if=\"getStepStatus(index + 1) === 'complete'\"\n              class=\"h-4 w-4 text-black stroke-black\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              :stroke-width=\"2\"\n              viewBox=\"0 0 24 24\"\n            >\n              <Motion\n                as=\"path\"\n                d=\"M5 13l4 4L19 7\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                :initial=\"{ pathLength: 0, opacity: 0 }\"\n                :animate=\"\n                  getStepStatus(index + 1) === 'complete'\n                    ? { pathLength: 1, opacity: 1 }\n                    : { pathLength: 0, opacity: 0 }\n                \"\n              />\n            </svg>\n            <div v-else-if=\"getStepStatus(index + 1) === 'active'\" class=\"h-3 w-3 rounded-full bg-black\" />\n            <span v-else class=\"text-sm\">{{ index + 1 }}</span>\n          </div>\n\n          <component\n            v-else\n            :is=\"renderStepIndicator\"\n            :step=\"index + 1\"\n            :current-step=\"currentStep\"\n            :on-step-click=\"handleCustomStepClick\"\n          />\n\n          <div\n            v-if=\"index < totalSteps - 1\"\n            class=\"relative ml-2 mr-2 h-0.5 flex-1 overflow-hidden rounded bg-zinc-600\"\n          >\n            <Motion\n              as=\"div\"\n              class=\"absolute left-0 top-0 h-full\"\n              :initial=\"{ width: 0, backgroundColor: '#52525b' }\"\n              :animate=\"\n                currentStep > index + 1\n                  ? { width: '100%', backgroundColor: '#27ff64' }\n                  : { width: 0, backgroundColor: '#52525b' }\n              \"\n              :transition=\"{ type: 'spring', stiffness: 100, damping: 15, duration: 0.4 }\"\n            />\n          </div>\n        </template>\n      </div>\n\n      <Motion\n        as=\"div\"\n        :class=\"`w-full ${contentClassName}`\"\n        :style=\"{\n          position: 'relative',\n          overflow: 'hidden',\n          marginBottom: isCompleted ? '0' : '2rem'\n        }\"\n        :animate=\"{ height: isCompleted ? 0 : `${parentHeight + 1}px` }\"\n        :transition=\"{ type: 'spring', stiffness: 200, damping: 25, duration: 0.4 }\"\n      >\n        <AnimatePresence :initial=\"false\" mode=\"sync\" :custom=\"direction\">\n          <Motion\n            v-if=\"!isCompleted\"\n            ref=\"containerRef\"\n            as=\"div\"\n            :key=\"currentStep\"\n            :initial=\"getStepContentInitial()\"\n            :animate=\"{ x: '0%', opacity: 1 }\"\n            :exit=\"getStepContentExit()\"\n            :transition=\"{ type: 'tween', stiffness: 300, damping: 30, duration: 0.4 }\"\n            :style=\"{ position: 'absolute', left: 0, right: 0, top: 0 }\"\n          >\n            <div ref=\"contentRef\" v-if=\"slots.default && slots.default()[currentStep - 1]\">\n              <component :is=\"slots.default()[currentStep - 1]\" />\n            </div>\n          </Motion>\n        </AnimatePresence>\n      </Motion>\n\n      <div v-if=\"!isCompleted\" :class=\"`w-full ${footerClassName}`\">\n        <div :class=\"`flex w-full ${currentStep !== 1 ? 'justify-between' : 'justify-end'}`\">\n          <button\n            v-if=\"currentStep !== 1\"\n            @click=\"handleBack\"\n            :disabled=\"backButtonProps?.disabled\"\n            :class=\"`text-zinc-400 bg-transparent cursor-pointer transition-all duration-[350ms] rounded px-2 py-1 border-none hover:text-white ${currentStep === 1 ? 'opacity-50 cursor-not-allowed' : ''}`\"\n            v-bind=\"backButtonProps\"\n          >\n            {{ backButtonText }}\n          </button>\n          <button\n            @click=\"isLastStep ? handleComplete() : handleNext()\"\n            :disabled=\"nextButtonProps?.disabled\"\n            :class=\"`border-none bg-[#27ff64] transition-all duration-[350ms] flex items-center justify-center rounded-full text-black font-medium tracking-tight px-3.5 py-1.5 cursor-pointer hover:bg-[#22e55c] disabled:opacity-50 disabled:cursor-not-allowed`\"\n          >\n            {{ isLastStep ? 'Complete' : nextButtonText }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  ref,\n  computed,\n  useSlots,\n  watch,\n  onMounted,\n  nextTick,\n  useTemplateRef,\n  type VNode,\n  type ButtonHTMLAttributes,\n  type Component\n} from 'vue';\nimport { Motion, AnimatePresence } from 'motion-v';\n\ninterface StepperProps {\n  children?: VNode[];\n  initialStep?: number;\n  onStepChange?: (step: number) => void;\n  onFinalStepCompleted?: () => void;\n  stepCircleContainerClassName?: string;\n  stepContainerClassName?: string;\n  contentClassName?: string;\n  footerClassName?: string;\n  backButtonProps?: ButtonHTMLAttributes;\n  nextButtonProps?: ButtonHTMLAttributes;\n  backButtonText?: string;\n  nextButtonText?: string;\n  disableStepIndicators?: boolean;\n  renderStepIndicator?: Component;\n  lockOnComplete?: boolean;\n}\n\nconst props = withDefaults(defineProps<StepperProps>(), {\n  initialStep: 1,\n  onStepChange: () => {},\n  onFinalStepCompleted: () => {},\n  stepCircleContainerClassName: '',\n  stepContainerClassName: '',\n  contentClassName: '',\n  footerClassName: '',\n  backButtonProps: () => ({}),\n  nextButtonProps: () => ({}),\n  backButtonText: 'Back',\n  nextButtonText: 'Continue',\n  disableStepIndicators: false,\n  renderStepIndicator: undefined,\n  lockOnComplete: true\n});\n\nconst slots = useSlots();\nconst currentStep = ref(props.initialStep);\nconst direction = ref(1);\nconst isCompleted = ref(false);\nconst parentHeight = ref(0);\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst contentRef = useTemplateRef<HTMLDivElement>('contentRef');\n\nconst stepsArray = computed(() => slots.default?.() || []);\nconst totalSteps = computed(() => stepsArray.value.length);\nconst isLastStep = computed(() => currentStep.value === totalSteps.value);\n\nconst getStepStatus = (step: number) => {\n  if (isCompleted.value || currentStep.value > step) return 'complete';\n  if (currentStep.value === step) return 'active';\n  return 'inactive';\n};\n\nconst getStepIndicatorStyle = (step: number) => {\n  const status = getStepStatus(step);\n  switch (status) {\n    case 'active':\n    case 'complete':\n      return { backgroundColor: '#27FF64', color: '#fff' };\n    default:\n      return { backgroundColor: '#222', color: '#a3a3a3' };\n  }\n};\n\nconst getStepContentInitial = () => ({\n  x: direction.value >= 0 ? '-100%' : '100%',\n  opacity: 0\n});\n\nconst getStepContentExit = () => ({\n  x: direction.value >= 0 ? '50%' : '-50%',\n  opacity: 0\n});\n\nconst handleStepClick = (step: number) => {\n  if (isCompleted.value && props.lockOnComplete) return;\n  if (!props.disableStepIndicators) {\n    direction.value = step > currentStep.value ? 1 : -1;\n    updateStep(step);\n  }\n};\n\nconst handleCustomStepClick = (clicked: number) => {\n  if (isCompleted.value && props.lockOnComplete) return;\n  if (clicked !== currentStep.value && !props.disableStepIndicators) {\n    direction.value = clicked > currentStep.value ? 1 : -1;\n    updateStep(clicked);\n  }\n};\n\nconst measureHeight = () => {\n  nextTick(() => {\n    if (contentRef.value) {\n      const height = contentRef.value.offsetHeight;\n      if (height > 0 && height !== parentHeight.value) {\n        parentHeight.value = height;\n      }\n    }\n  });\n};\n\nconst updateStep = (newStep: number) => {\n  if (newStep >= 1 && newStep <= totalSteps.value) {\n    currentStep.value = newStep;\n  }\n};\n\nconst handleBack = () => {\n  direction.value = -1;\n  updateStep(currentStep.value - 1);\n};\n\nconst handleNext = () => {\n  direction.value = 1;\n  updateStep(currentStep.value + 1);\n};\n\nconst handleComplete = () => {\n  isCompleted.value = true;\n  props.onFinalStepCompleted?.();\n};\n\nwatch(currentStep, (newStep, oldStep) => {\n  props.onStepChange?.(newStep);\n  if (newStep !== oldStep && !isCompleted.value) {\n    nextTick(measureHeight);\n  } else if (!props.lockOnComplete && isCompleted.value) {\n    isCompleted.value = false;\n    nextTick(measureHeight);\n  }\n});\n\nonMounted(() => {\n  if (props.initialStep !== 1) {\n    currentStep.value = props.initialStep;\n  }\n  measureHeight();\n});\n</script>\n","path":"Stepper/Stepper.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
+{"name":"Stepper","title":"Stepper","description":"Animated multi-step progress indicator with active state transitions.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div class=\"flex justify-center items-center w-full h-full\" v-bind=\"$attrs\">\n    <div\n      :class=\"`w-full max-w-md p-8 rounded-[2rem] shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_10px_10px_-5px_rgba(0,0,0,0.04)] ${stepCircleContainerClassName}`\"\n      style=\"border: 1px solid #222\"\n    >\n      <div\n        :class=\"`flex items-center justify-center w-full ${stepContainerClassName}`\"\n        :style=\"{ marginBottom: isCompleted ? '0' : '2rem' }\"\n      >\n        <template v-for=\"(_, index) in stepsArray\" :key=\"index + 1\">\n          <div\n            v-if=\"!renderStepIndicator\"\n            @click=\"() => handleStepClick(index + 1)\"\n            :class=\"[\n              'relative outline-none flex h-8 w-8 items-center justify-center rounded-full font-semibold',\n              isCompleted && lockOnComplete ? 'cursor-default' : 'cursor-pointer'\n            ]\"\n            :style=\"getStepIndicatorStyle(index + 1)\"\n          >\n            <svg\n              v-if=\"getStepStatus(index + 1) === 'complete'\"\n              class=\"h-4 w-4 text-black stroke-black\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              :stroke-width=\"2\"\n              viewBox=\"0 0 24 24\"\n            >\n              <Motion\n                as=\"path\"\n                d=\"M5 13l4 4L19 7\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                :initial=\"{ pathLength: 0, opacity: 0 }\"\n                :animate=\"\n                  getStepStatus(index + 1) === 'complete'\n                    ? { pathLength: 1, opacity: 1 }\n                    : { pathLength: 0, opacity: 0 }\n                \"\n              />\n            </svg>\n            <div v-else-if=\"getStepStatus(index + 1) === 'active'\" class=\"h-3 w-3 rounded-full bg-black\" />\n            <span v-else class=\"text-sm\">{{ index + 1 }}</span>\n          </div>\n\n          <component\n            v-else\n            :is=\"renderStepIndicator\"\n            :step=\"index + 1\"\n            :current-step=\"currentStep\"\n            :on-step-click=\"handleCustomStepClick\"\n          />\n\n          <div\n            v-if=\"index < totalSteps - 1\"\n            class=\"relative ml-2 mr-2 h-0.5 flex-1 overflow-hidden rounded bg-zinc-600\"\n          >\n            <Motion\n              as=\"div\"\n              class=\"absolute left-0 top-0 h-full\"\n              :initial=\"{ width: 0, backgroundColor: '#52525b' }\"\n              :animate=\"\n                currentStep > index + 1\n                  ? { width: '100%', backgroundColor: '#27ff64' }\n                  : { width: 0, backgroundColor: '#52525b' }\n              \"\n              :transition=\"{ type: 'spring', stiffness: 100, damping: 15, duration: 0.4 }\"\n            />\n          </div>\n        </template>\n      </div>\n\n      <Motion\n        as=\"div\"\n        :class=\"`w-full ${contentClassName}`\"\n        :style=\"{\n          position: 'relative',\n          overflow: 'hidden',\n          marginBottom: isCompleted ? '0' : '2rem'\n        }\"\n        :animate=\"{ height: isCompleted ? 0 : `${parentHeight + 1}px` }\"\n        :transition=\"{ type: 'spring', stiffness: 200, damping: 25, duration: 0.4 }\"\n      >\n        <AnimatePresence :initial=\"false\" mode=\"sync\" :custom=\"direction\">\n          <Motion\n            v-if=\"!isCompleted\"\n            ref=\"containerRef\"\n            as=\"div\"\n            :key=\"currentStep\"\n            :initial=\"getStepContentInitial()\"\n            :animate=\"{ x: '0%', opacity: 1 }\"\n            :exit=\"getStepContentExit()\"\n            :transition=\"{ type: 'tween', stiffness: 300, damping: 30, duration: 0.4 }\"\n            :style=\"{ position: 'absolute', left: 0, right: 0, top: 0 }\"\n          >\n            <div ref=\"contentRef\" v-if=\"slots.default && slots.default()[currentStep - 1]\">\n              <component :is=\"slots.default()[currentStep - 1]\" />\n            </div>\n          </Motion>\n        </AnimatePresence>\n      </Motion>\n\n      <div v-if=\"!isCompleted\" :class=\"`w-full ${footerClassName}`\">\n        <div :class=\"`flex w-full ${currentStep !== 1 ? 'justify-between' : 'justify-end'}`\">\n          <button\n            v-if=\"currentStep !== 1\"\n            @click=\"handleBack\"\n            :disabled=\"backButtonProps?.disabled\"\n            :class=\"`text-zinc-400 bg-transparent cursor-pointer transition-all duration-[350ms] rounded px-2 py-1 border-none hover:text-white ${currentStep === 1 ? 'opacity-50 cursor-not-allowed' : ''}`\"\n            v-bind=\"backButtonProps\"\n          >\n            {{ backButtonText }}\n          </button>\n          <button\n            @click=\"isLastStep ? handleComplete() : handleNext()\"\n            :disabled=\"nextButtonProps?.disabled\"\n            :class=\"`border-none bg-[#27ff64] transition-all duration-[350ms] flex items-center justify-center rounded-full text-black font-medium tracking-tight px-3.5 py-1.5 cursor-pointer hover:bg-[#22e55c] disabled:opacity-50 disabled:cursor-not-allowed`\"\n          >\n            {{ isLastStep ? 'Complete' : nextButtonText }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  ref,\n  computed,\n  useSlots,\n  watch,\n  onMounted,\n  nextTick,\n  useTemplateRef,\n  type VNode,\n  type ButtonHTMLAttributes,\n  type Component\n} from 'vue';\nimport { Motion, AnimatePresence } from 'motion-v';\n\ninterface StepperProps {\n  children?: VNode[];\n  initialStep?: number;\n  onStepChange?: (step: number) => void;\n  onFinalStepCompleted?: () => void;\n  stepCircleContainerClassName?: string;\n  stepContainerClassName?: string;\n  contentClassName?: string;\n  footerClassName?: string;\n  backButtonProps?: ButtonHTMLAttributes;\n  nextButtonProps?: ButtonHTMLAttributes;\n  backButtonText?: string;\n  nextButtonText?: string;\n  disableStepIndicators?: boolean;\n  renderStepIndicator?: Component;\n  lockOnComplete?: boolean;\n}\n\nconst props = withDefaults(defineProps<StepperProps>(), {\n  initialStep: 1,\n  onStepChange: () => {},\n  onFinalStepCompleted: () => {},\n  stepCircleContainerClassName: '',\n  stepContainerClassName: '',\n  contentClassName: '',\n  footerClassName: '',\n  backButtonProps: () => ({}),\n  nextButtonProps: () => ({}),\n  backButtonText: 'Back',\n  nextButtonText: 'Continue',\n  disableStepIndicators: false,\n  renderStepIndicator: undefined,\n  lockOnComplete: true\n});\n\nconst slots = useSlots();\nconst currentStep = ref(props.initialStep);\nconst direction = ref(1);\nconst isCompleted = ref(false);\nconst parentHeight = ref(0);\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst contentRef = useTemplateRef<HTMLDivElement>('contentRef');\n\nconst stepsArray = computed(() => slots.default?.() || []);\nconst totalSteps = computed(() => stepsArray.value.length);\nconst isLastStep = computed(() => currentStep.value === totalSteps.value);\n\nconst getStepStatus = (step: number) => {\n  if (isCompleted.value || currentStep.value > step) return 'complete';\n  if (currentStep.value === step) return 'active';\n  return 'inactive';\n};\n\nconst getStepIndicatorStyle = (step: number) => {\n  const status = getStepStatus(step);\n  switch (status) {\n    case 'active':\n    case 'complete':\n      return { backgroundColor: '#27FF64', color: '#fff' };\n    default:\n      return { backgroundColor: '#222', color: '#a3a3a3' };\n  }\n};\n\nconst getStepContentInitial = () => ({\n  x: direction.value >= 0 ? '-100%' : '100%',\n  opacity: 0\n});\n\nconst getStepContentExit = () => ({\n  x: direction.value >= 0 ? '50%' : '-50%',\n  opacity: 0\n});\n\nconst handleStepClick = (step: number) => {\n  if (isCompleted.value && props.lockOnComplete) return;\n  if (!props.disableStepIndicators) {\n    direction.value = step > currentStep.value ? 1 : -1;\n    updateStep(step);\n  }\n};\n\nconst handleCustomStepClick = (clicked: number) => {\n  if (isCompleted.value && props.lockOnComplete) return;\n  if (clicked !== currentStep.value && !props.disableStepIndicators) {\n    direction.value = clicked > currentStep.value ? 1 : -1;\n    updateStep(clicked);\n  }\n};\n\nconst measureHeight = () => {\n  nextTick(() => {\n    if (contentRef.value) {\n      const height = contentRef.value.offsetHeight;\n      if (height > 0 && height !== parentHeight.value) {\n        parentHeight.value = height;\n      }\n    }\n  });\n};\n\nconst updateStep = (newStep: number) => {\n  if (newStep >= 1 && newStep <= totalSteps.value) {\n    currentStep.value = newStep;\n  }\n};\n\nconst handleBack = () => {\n  direction.value = -1;\n  updateStep(currentStep.value - 1);\n};\n\nconst handleNext = () => {\n  direction.value = 1;\n  updateStep(currentStep.value + 1);\n};\n\nconst handleComplete = () => {\n  isCompleted.value = true;\n  props.onFinalStepCompleted?.();\n};\n\nwatch(currentStep, (newStep, oldStep) => {\n  props.onStepChange?.(newStep);\n  if (newStep !== oldStep && !isCompleted.value) {\n    nextTick(measureHeight);\n  } else if (!props.lockOnComplete && isCompleted.value) {\n    isCompleted.value = false;\n    nextTick(measureHeight);\n  }\n});\n\nonMounted(() => {\n  if (props.initialStep !== 1) {\n    currentStep.value = props.initialStep;\n  }\n  measureHeight();\n});\n</script>\n","path":"Stepper/Stepper.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
diff --git a/public/r/TextCursor.json b/public/r/TextCursor.json
index 634e43b..110d2a8 100644
--- a/public/r/TextCursor.json
+++ b/public/r/TextCursor.json
@@ -1 +1 @@
-{"name":"TextCursor","title":"TextCursor","description":"Make any text element follow your cursor, leaving a trail of copies behind it.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport { Motion } from 'motion-v';\n\ninterface TextCursorProps {\n  text?: string;\n  delay?: number;\n  spacing?: number;\n  followMouseDirection?: boolean;\n  randomFloat?: boolean;\n  exitDuration?: number;\n  removalInterval?: number;\n  maxPoints?: number;\n}\n\ninterface TrailItem {\n  id: number;\n  x: number;\n  y: number;\n  angle: number;\n  randomX?: number;\n  randomY?: number;\n  randomRotate?: number;\n}\n\nconst props = withDefaults(defineProps<TextCursorProps>(), {\n  text: '⚛️',\n  delay: 0.01,\n  spacing: 100,\n  followMouseDirection: true,\n  randomFloat: true,\n  exitDuration: 0.5,\n  removalInterval: 30,\n  maxPoints: 5\n});\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst trail = ref<TrailItem[]>([]);\nconst lastMoveTime = ref(Date.now());\nconst idCounter = ref(0);\n\nlet removalIntervalId: ReturnType<typeof setInterval> | null = null;\n\nconst handleMouseMove = (e: MouseEvent) => {\n  if (!containerRef.value) return;\n\n  const rect = containerRef.value.getBoundingClientRect();\n  const mouseX = e.clientX - rect.left;\n  const mouseY = e.clientY - rect.top;\n\n  let newTrail = [...trail.value];\n\n  if (newTrail.length === 0) {\n    newTrail.push({\n      id: idCounter.value++,\n      x: mouseX,\n      y: mouseY,\n      angle: 0,\n      ...(props.randomFloat && {\n        randomX: Math.random() * 10 - 5,\n        randomY: Math.random() * 10 - 5,\n        randomRotate: Math.random() * 10 - 5\n      })\n    });\n  } else {\n    const last = newTrail[newTrail.length - 1];\n    const dx = mouseX - last.x;\n    const dy = mouseY - last.y;\n    const distance = Math.sqrt(dx * dx + dy * dy);\n\n    if (distance >= props.spacing) {\n      let rawAngle = (Math.atan2(dy, dx) * 180) / Math.PI;\n      if (rawAngle > 90) rawAngle -= 180;\n      else if (rawAngle < -90) rawAngle += 180;\n      const computedAngle = props.followMouseDirection ? rawAngle : 0;\n      const steps = Math.floor(distance / props.spacing);\n\n      for (let i = 1; i <= steps; i++) {\n        const t = (props.spacing * i) / distance;\n        const newX = last.x + dx * t;\n        const newY = last.y + dy * t;\n        newTrail.push({\n          id: idCounter.value++,\n          x: newX,\n          y: newY,\n          angle: computedAngle,\n          ...(props.randomFloat && {\n            randomX: Math.random() * 10 - 5,\n            randomY: Math.random() * 10 - 5,\n            randomRotate: Math.random() * 10 - 5\n          })\n        });\n      }\n    }\n  }\n\n  if (newTrail.length > props.maxPoints) {\n    newTrail = newTrail.slice(newTrail.length - props.maxPoints);\n  }\n\n  trail.value = newTrail;\n  lastMoveTime.value = Date.now();\n};\n\nconst startRemovalInterval = () => {\n  if (removalIntervalId) {\n    clearInterval(removalIntervalId);\n  }\n\n  removalIntervalId = setInterval(() => {\n    if (Date.now() - lastMoveTime.value > 100) {\n      if (trail.value.length > 0) {\n        trail.value = trail.value.slice(1);\n      }\n    }\n  }, props.removalInterval);\n};\n\nonMounted(() => {\n  if (containerRef.value) {\n    containerRef.value.addEventListener('mousemove', handleMouseMove);\n    startRemovalInterval();\n  }\n});\n\nonUnmounted(() => {\n  if (containerRef.value) {\n    containerRef.value.removeEventListener('mousemove', handleMouseMove);\n  }\n  if (removalIntervalId) {\n    clearInterval(removalIntervalId);\n  }\n});\n</script>\n\n<template>\n  <div ref=\"containerRef\" class=\"relative w-full h-full\">\n    <div class=\"absolute inset-0 pointer-events-none\">\n      <Motion\n        v-for=\"item in trail\"\n        :key=\"item.id\"\n        :initial=\"{ opacity: 0, scale: 1, rotate: item.angle }\"\n        :animate=\"{\n          opacity: 1,\n          scale: 1,\n          x: props.randomFloat ? [0, item.randomX || 0, 0] : 0,\n          y: props.randomFloat ? [0, item.randomY || 0, 0] : 0,\n          rotate: props.randomFloat ? [item.angle, item.angle + (item.randomRotate || 0), item.angle] : item.angle\n        }\"\n        :transition=\"{\n          duration: props.randomFloat ? 2 : props.exitDuration,\n          repeat: props.randomFloat ? Infinity : 0,\n          repeatType: props.randomFloat ? 'mirror' : 'loop'\n        }\"\n        class=\"absolute text-3xl whitespace-nowrap select-none\"\n        :style=\"{ left: `${item.x}px`, top: `${item.y}px` }\"\n      >\n        {{ props.text }}\n      </Motion>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.trail-enter-active,\n.trail-leave-active {\n  transition: all 0.5s ease;\n}\n\n.trail-enter-from {\n  opacity: 0;\n  transform: scale(0);\n}\n\n.trail-leave-to {\n  opacity: 0;\n  transform: scale(0);\n}\n</style>\n","path":"TextCursor/TextCursor.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
+{"name":"TextCursor","title":"TextCursor","description":"Make any text element follow your cursor, leaving a trail of copies behind it.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport { Motion } from 'motion-v';\n\ninterface TextCursorProps {\n  text?: string;\n  delay?: number;\n  spacing?: number;\n  followMouseDirection?: boolean;\n  randomFloat?: boolean;\n  exitDuration?: number;\n  removalInterval?: number;\n  maxPoints?: number;\n}\n\ninterface TrailItem {\n  id: number;\n  x: number;\n  y: number;\n  angle: number;\n  randomX?: number;\n  randomY?: number;\n  randomRotate?: number;\n}\n\nconst props = withDefaults(defineProps<TextCursorProps>(), {\n  text: '⚛️',\n  delay: 0.01,\n  spacing: 100,\n  followMouseDirection: true,\n  randomFloat: true,\n  exitDuration: 0.5,\n  removalInterval: 30,\n  maxPoints: 5\n});\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst trail = ref<TrailItem[]>([]);\nconst lastMoveTime = ref(Date.now());\nconst idCounter = ref(0);\n\nlet removalIntervalId: ReturnType<typeof setInterval> | null = null;\n\nconst handleMouseMove = (e: MouseEvent) => {\n  if (!containerRef.value) return;\n\n  const rect = containerRef.value.getBoundingClientRect();\n  const mouseX = e.clientX - rect.left;\n  const mouseY = e.clientY - rect.top;\n\n  let newTrail = [...trail.value];\n\n  if (newTrail.length === 0) {\n    newTrail.push({\n      id: idCounter.value++,\n      x: mouseX,\n      y: mouseY,\n      angle: 0,\n      ...(props.randomFloat && {\n        randomX: Math.random() * 10 - 5,\n        randomY: Math.random() * 10 - 5,\n        randomRotate: Math.random() * 10 - 5\n      })\n    });\n  } else {\n    const last = newTrail[newTrail.length - 1];\n    const dx = mouseX - last.x;\n    const dy = mouseY - last.y;\n    const distance = Math.sqrt(dx * dx + dy * dy);\n\n    if (distance >= props.spacing) {\n      let rawAngle = (Math.atan2(dy, dx) * 180) / Math.PI;\n      if (rawAngle > 90) rawAngle -= 180;\n      else if (rawAngle < -90) rawAngle += 180;\n      const computedAngle = props.followMouseDirection ? rawAngle : 0;\n      const steps = Math.floor(distance / props.spacing);\n\n      for (let i = 1; i <= steps; i++) {\n        const t = (props.spacing * i) / distance;\n        const newX = last.x + dx * t;\n        const newY = last.y + dy * t;\n        newTrail.push({\n          id: idCounter.value++,\n          x: newX,\n          y: newY,\n          angle: computedAngle,\n          ...(props.randomFloat && {\n            randomX: Math.random() * 10 - 5,\n            randomY: Math.random() * 10 - 5,\n            randomRotate: Math.random() * 10 - 5\n          })\n        });\n      }\n    }\n  }\n\n  if (newTrail.length > props.maxPoints) {\n    newTrail = newTrail.slice(newTrail.length - props.maxPoints);\n  }\n\n  trail.value = newTrail;\n  lastMoveTime.value = Date.now();\n};\n\nconst startRemovalInterval = () => {\n  if (removalIntervalId) {\n    clearInterval(removalIntervalId);\n  }\n\n  removalIntervalId = setInterval(() => {\n    if (Date.now() - lastMoveTime.value > 100) {\n      if (trail.value.length > 0) {\n        trail.value = trail.value.slice(1);\n      }\n    }\n  }, props.removalInterval);\n};\n\nonMounted(() => {\n  if (containerRef.value) {\n    containerRef.value.addEventListener('mousemove', handleMouseMove);\n    startRemovalInterval();\n  }\n});\n\nonUnmounted(() => {\n  if (containerRef.value) {\n    containerRef.value.removeEventListener('mousemove', handleMouseMove);\n  }\n  if (removalIntervalId) {\n    clearInterval(removalIntervalId);\n  }\n});\n</script>\n\n<template>\n  <div ref=\"containerRef\" class=\"relative w-full h-full\">\n    <div class=\"absolute inset-0 pointer-events-none\">\n      <Motion\n        v-for=\"item in trail\"\n        :key=\"item.id\"\n        :initial=\"{ opacity: 0, scale: 1, rotate: item.angle }\"\n        :animate=\"{\n          opacity: 1,\n          scale: 1,\n          x: props.randomFloat ? [0, item.randomX || 0, 0] : 0,\n          y: props.randomFloat ? [0, item.randomY || 0, 0] : 0,\n          rotate: props.randomFloat ? [item.angle, item.angle + (item.randomRotate || 0), item.angle] : item.angle\n        }\"\n        :transition=\"{\n          duration: props.randomFloat ? 2 : props.exitDuration,\n          repeat: props.randomFloat ? Infinity : 0,\n          repeatType: props.randomFloat ? 'mirror' : 'loop'\n        }\"\n        class=\"absolute text-3xl whitespace-nowrap select-none\"\n        :style=\"{ left: `${item.x}px`, top: `${item.y}px` }\"\n      >\n        {{ props.text }}\n      </Motion>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.trail-enter-active,\n.trail-leave-active {\n  transition: all 0.5s ease;\n}\n\n.trail-enter-from {\n  opacity: 0;\n  transform: scale(0);\n}\n\n.trail-leave-to {\n  opacity: 0;\n  transform: scale(0);\n}\n</style>\n","path":"TextCursor/TextCursor.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
diff --git a/public/r/TiltedCard.json b/public/r/TiltedCard.json
index 20ecb58..2368b21 100644
--- a/public/r/TiltedCard.json
+++ b/public/r/TiltedCard.json
@@ -1 +1 @@
-{"name":"TiltedCard","title":"TiltedCard","description":"3D perspective tilt card reacting to pointer.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <figure\n    ref=\"cardRef\"\n    class=\"relative w-full h-full [perspective:800px] flex flex-col items-center justify-center\"\n    :style=\"{\n      height: containerHeight,\n      width: containerWidth\n    }\"\n    @mousemove=\"handleMouse\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <div v-if=\"showMobileWarning\" class=\"absolute top-4 text-center text-sm block sm:hidden\">\n      This effect is not optimized for mobile. Check on desktop.\n    </div>\n\n    <Motion\n      tag=\"div\"\n      class=\"relative [transform-style:preserve-3d]\"\n      :style=\"{\n        width: imageWidth,\n        height: imageHeight\n      }\"\n      :animate=\"{\n        rotateX: rotateXValue,\n        rotateY: rotateYValue,\n        scale: scaleValue\n      }\"\n      :transition=\"springTransition\"\n    >\n      <img\n        :src=\"imageSrc\"\n        :alt=\"altText\"\n        class=\"absolute top-0 left-0 object-cover rounded-[15px] will-change-transform [transform:translateZ(0)]\"\n        :style=\"{\n          width: imageWidth,\n          height: imageHeight\n        }\"\n      />\n\n      <Motion\n        v-if=\"displayOverlayContent && overlayContent\"\n        tag=\"div\"\n        class=\"absolute top-0 left-0 z-[2] will-change-transform [transform:translateZ(30px)]\"\n      >\n        <slot name=\"overlay\" />\n      </Motion>\n    </Motion>\n\n    <Motion\n      v-if=\"showTooltip && captionText\"\n      tag=\"figcaption\"\n      class=\"pointer-events-none absolute left-0 top-0 rounded-[4px] bg-white px-[10px] py-[4px] text-[10px] text-[#2d2d2d] opacity-0 z-[3] hidden sm:block\"\n      :animate=\"{\n        x: xValue,\n        y: yValue,\n        opacity: opacityValue,\n        rotate: rotateFigcaptionValue\n      }\"\n      :transition=\"tooltipTransition\"\n    >\n      {{ captionText }}\n    </Motion>\n  </figure>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, useTemplateRef } from 'vue';\nimport { Motion } from 'motion-v';\n\ninterface TiltedCardProps {\n  imageSrc: string;\n  altText?: string;\n  captionText?: string;\n  containerHeight?: string;\n  containerWidth?: string;\n  imageHeight?: string;\n  imageWidth?: string;\n  scaleOnHover?: number;\n  rotateAmplitude?: number;\n  showMobileWarning?: boolean;\n  showTooltip?: boolean;\n  overlayContent?: boolean;\n  displayOverlayContent?: boolean;\n}\n\nconst props = withDefaults(defineProps<TiltedCardProps>(), {\n  altText: 'Tilted card image',\n  captionText: '',\n  containerHeight: '300px',\n  containerWidth: '100%',\n  imageHeight: '300px',\n  imageWidth: '300px',\n  scaleOnHover: 1.1,\n  rotateAmplitude: 14,\n  showMobileWarning: true,\n  showTooltip: true,\n  overlayContent: false,\n  displayOverlayContent: false\n});\n\nconst cardRef = useTemplateRef<HTMLElement>('cardRef');\nconst xValue = ref(0);\nconst yValue = ref(0);\nconst rotateXValue = ref(0);\nconst rotateYValue = ref(0);\nconst scaleValue = ref(1);\nconst opacityValue = ref(0);\nconst rotateFigcaptionValue = ref(0);\nconst lastY = ref(0);\n\nconst springTransition = computed(() => ({\n  type: 'spring' as const,\n  damping: 30,\n  stiffness: 100,\n  mass: 2\n}));\n\nconst tooltipTransition = computed(() => ({\n  type: 'spring' as const,\n  damping: 30,\n  stiffness: 350,\n  mass: 1\n}));\n\nfunction handleMouse(e: MouseEvent) {\n  if (!cardRef.value) return;\n\n  const rect = cardRef.value.getBoundingClientRect();\n  const offsetX = e.clientX - rect.left - rect.width / 2;\n  const offsetY = e.clientY - rect.top - rect.height / 2;\n\n  const rotationX = (offsetY / (rect.height / 2)) * -props.rotateAmplitude;\n  const rotationY = (offsetX / (rect.width / 2)) * props.rotateAmplitude;\n\n  rotateXValue.value = rotationX;\n  rotateYValue.value = rotationY;\n\n  xValue.value = e.clientX - rect.left;\n  yValue.value = e.clientY - rect.top;\n\n  const velocityY = offsetY - lastY.value;\n  rotateFigcaptionValue.value = -velocityY * 0.6;\n  lastY.value = offsetY;\n}\n\nfunction handleMouseEnter() {\n  scaleValue.value = props.scaleOnHover;\n  opacityValue.value = 1;\n}\n\nfunction handleMouseLeave() {\n  opacityValue.value = 0;\n  scaleValue.value = 1;\n  rotateXValue.value = 0;\n  rotateYValue.value = 0;\n  rotateFigcaptionValue.value = 0;\n}\n</script>\n","path":"TiltedCard/TiltedCard.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
+{"name":"TiltedCard","title":"TiltedCard","description":"3D perspective tilt card reacting to pointer.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <figure\n    ref=\"cardRef\"\n    class=\"relative w-full h-full [perspective:800px] flex flex-col items-center justify-center\"\n    :style=\"{\n      height: containerHeight,\n      width: containerWidth\n    }\"\n    @mousemove=\"handleMouse\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <div v-if=\"showMobileWarning\" class=\"absolute top-4 text-center text-sm block sm:hidden\">\n      This effect is not optimized for mobile. Check on desktop.\n    </div>\n\n    <Motion\n      tag=\"div\"\n      class=\"relative [transform-style:preserve-3d]\"\n      :style=\"{\n        width: imageWidth,\n        height: imageHeight\n      }\"\n      :animate=\"{\n        rotateX: rotateXValue,\n        rotateY: rotateYValue,\n        scale: scaleValue\n      }\"\n      :transition=\"springTransition\"\n    >\n      <img\n        :src=\"imageSrc\"\n        :alt=\"altText\"\n        class=\"absolute top-0 left-0 object-cover rounded-[15px] will-change-transform [transform:translateZ(0)]\"\n        :style=\"{\n          width: imageWidth,\n          height: imageHeight\n        }\"\n      />\n\n      <Motion\n        v-if=\"displayOverlayContent && overlayContent\"\n        tag=\"div\"\n        class=\"absolute top-0 left-0 z-[2] will-change-transform [transform:translateZ(30px)]\"\n      >\n        <slot name=\"overlay\" />\n      </Motion>\n    </Motion>\n\n    <Motion\n      v-if=\"showTooltip && captionText\"\n      tag=\"figcaption\"\n      class=\"pointer-events-none absolute left-0 top-0 rounded-[4px] bg-white px-[10px] py-[4px] text-[10px] text-[#2d2d2d] opacity-0 z-[3] hidden sm:block\"\n      :animate=\"{\n        x: xValue,\n        y: yValue,\n        opacity: opacityValue,\n        rotate: rotateFigcaptionValue\n      }\"\n      :transition=\"tooltipTransition\"\n    >\n      {{ captionText }}\n    </Motion>\n  </figure>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, useTemplateRef } from 'vue';\nimport { Motion } from 'motion-v';\n\ninterface TiltedCardProps {\n  imageSrc: string;\n  altText?: string;\n  captionText?: string;\n  containerHeight?: string;\n  containerWidth?: string;\n  imageHeight?: string;\n  imageWidth?: string;\n  scaleOnHover?: number;\n  rotateAmplitude?: number;\n  showMobileWarning?: boolean;\n  showTooltip?: boolean;\n  overlayContent?: boolean;\n  displayOverlayContent?: boolean;\n}\n\nconst props = withDefaults(defineProps<TiltedCardProps>(), {\n  altText: 'Tilted card image',\n  captionText: '',\n  containerHeight: '300px',\n  containerWidth: '100%',\n  imageHeight: '300px',\n  imageWidth: '300px',\n  scaleOnHover: 1.1,\n  rotateAmplitude: 14,\n  showMobileWarning: true,\n  showTooltip: true,\n  overlayContent: false,\n  displayOverlayContent: false\n});\n\nconst cardRef = useTemplateRef<HTMLElement>('cardRef');\nconst xValue = ref(0);\nconst yValue = ref(0);\nconst rotateXValue = ref(0);\nconst rotateYValue = ref(0);\nconst scaleValue = ref(1);\nconst opacityValue = ref(0);\nconst rotateFigcaptionValue = ref(0);\nconst lastY = ref(0);\n\nconst springTransition = computed(() => ({\n  type: 'spring' as const,\n  damping: 30,\n  stiffness: 100,\n  mass: 2\n}));\n\nconst tooltipTransition = computed(() => ({\n  type: 'spring' as const,\n  damping: 30,\n  stiffness: 350,\n  mass: 1\n}));\n\nfunction handleMouse(e: MouseEvent) {\n  if (!cardRef.value) return;\n\n  const rect = cardRef.value.getBoundingClientRect();\n  const offsetX = e.clientX - rect.left - rect.width / 2;\n  const offsetY = e.clientY - rect.top - rect.height / 2;\n\n  const rotationX = (offsetY / (rect.height / 2)) * -props.rotateAmplitude;\n  const rotationY = (offsetX / (rect.width / 2)) * props.rotateAmplitude;\n\n  rotateXValue.value = rotationX;\n  rotateYValue.value = rotationY;\n\n  xValue.value = e.clientX - rect.left;\n  yValue.value = e.clientY - rect.top;\n\n  const velocityY = offsetY - lastY.value;\n  rotateFigcaptionValue.value = -velocityY * 0.6;\n  lastY.value = offsetY;\n}\n\nfunction handleMouseEnter() {\n  scaleValue.value = props.scaleOnHover;\n  opacityValue.value = 1;\n}\n\nfunction handleMouseLeave() {\n  opacityValue.value = 0;\n  scaleValue.value = 1;\n  rotateXValue.value = 0;\n  rotateYValue.value = 0;\n  rotateFigcaptionValue.value = 0;\n}\n</script>\n","path":"TiltedCard/TiltedCard.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
diff --git a/public/r/TrueFocus.json b/public/r/TrueFocus.json
index a185e0d..5f95aa2 100644
--- a/public/r/TrueFocus.json
+++ b/public/r/TrueFocus.json
@@ -1 +1 @@
-{"name":"TrueFocus","title":"TrueFocus","description":"Applies dynamic blur / clarity based over a series of words in order.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { motion } from 'motion-v';\nimport { computed, nextTick, onMounted, onUnmounted, ref, watch, useTemplateRef, type Ref } from 'vue';\n\ninterface TrueFocusProps {\n  sentence?: string;\n  manualMode?: boolean;\n  blurAmount?: number;\n  borderColor?: string;\n  glowColor?: string;\n  animationDuration?: number;\n  pauseBetweenAnimations?: number;\n  index?: Array<number>;\n  syncGroup?: string;\n  defaultBlur?: boolean;\n}\n\nconst props = withDefaults(defineProps<TrueFocusProps>(), {\n  sentence: 'True Focus',\n  manualMode: false,\n  blurAmount: 5,\n  borderColor: 'green',\n  glowColor: 'rgba(0, 255, 0, 0.6)',\n  animationDuration: 0.5,\n  pauseBetweenAnimations: 1,\n  defaultBlur: true\n});\n\nconst words = computed(() => props.sentence.split(' '));\n\nconst currentIndex = props.syncGroup ? getSyncGroupIndex(props.syncGroup) : ref(-1);\nconst lastActiveIndex = ref<number | null>(null);\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst wordRefs = ref<HTMLSpanElement[]>([]);\nconst focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });\n\nlet interval: ReturnType<typeof setInterval> | null = null;\n\nwatch(\n  [currentIndex, () => words.value.length],\n  async () => {\n    if (currentIndex.value === null || currentIndex.value === -1) return;\n\n    let actualWordIndex = currentIndex.value;\n    if (props.index) {\n      actualWordIndex = props.index.findIndex(val => val === currentIndex.value);\n      if (actualWordIndex === -1) return;\n    }\n\n    if (!wordRefs.value[actualWordIndex] || !containerRef.value) return;\n\n    await nextTick();\n\n    const parentRect = containerRef.value.getBoundingClientRect();\n    const activeRect = wordRefs.value[actualWordIndex].getBoundingClientRect();\n\n    focusRect.value = {\n      x: activeRect.left - parentRect.left,\n      y: activeRect.top - parentRect.top,\n      width: activeRect.width,\n      height: activeRect.height\n    };\n  },\n  { immediate: true }\n);\n\nconst handleMouseEnter = (index: number) => {\n  if (props.manualMode) {\n    const mappedIndex = props.index ? props.index[index] : index;\n    lastActiveIndex.value = mappedIndex;\n    currentIndex.value = mappedIndex;\n  }\n};\n\nconst handleMouseLeave = () => {\n  if (props.manualMode) {\n    if (props.defaultBlur) {\n      currentIndex.value = lastActiveIndex.value || 0;\n      return;\n    }\n    currentIndex.value = -1;\n  }\n};\n\nconst setWordRef = (el: HTMLSpanElement | null, index: number) => {\n  if (el) wordRefs.value[index] = el;\n};\n\nconst startInterval = () => {\n  if (interval) clearInterval(interval);\n  if (!props.manualMode) {\n    interval = setInterval(\n      () => {\n        currentIndex.value = (currentIndex.value + 1) % words.value.length;\n      },\n      (props.animationDuration + props.pauseBetweenAnimations) * 1000\n    );\n  }\n};\n\nonMounted(async () => {\n  await nextTick();\n\n  const isOwner = props.syncGroup ? registerSyncGroup(props.syncGroup) : true;\n\n  let initialWordIndex = 0;\n  if (props.index && currentIndex.value !== null && currentIndex.value !== undefined) {\n    const foundIndex = props.index.findIndex(val => val === currentIndex.value);\n    if (foundIndex !== -1) initialWordIndex = foundIndex;\n  }\n\n  if (wordRefs.value[initialWordIndex] && containerRef.value) {\n    const parentRect = containerRef.value.getBoundingClientRect();\n    const activeRect = wordRefs.value[initialWordIndex].getBoundingClientRect();\n    focusRect.value = {\n      x: activeRect.left - parentRect.left,\n      y: activeRect.top - parentRect.top,\n      width: activeRect.width,\n      height: activeRect.height\n    };\n  }\n\n  if (isOwner) {\n    watch(\n      [() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, () => words.value],\n      () => startInterval(),\n      { immediate: true }\n    );\n  }\n});\n\nonUnmounted(() => {\n  if (interval) clearInterval(interval);\n  if (props.syncGroup) unregisterSyncGroup(props.syncGroup);\n});\n</script>\n\n<script lang=\"ts\">\ninterface SyncGroupState {\n  index: Ref<number>;\n  count: number;\n}\n\nexport const syncGroupMap = new Map<string, SyncGroupState>();\n\nexport function getSyncGroupIndex(group: string): Ref<number> {\n  if (!syncGroupMap.has(group)) {\n    syncGroupMap.set(group, { index: ref(-1), count: 0 });\n  }\n  return syncGroupMap.get(group)!.index;\n}\n\nexport function registerSyncGroup(group: string): boolean {\n  const state = syncGroupMap.get(group)!;\n  state.count += 1;\n  return state.count === 1;\n}\n\nexport function unregisterSyncGroup(group: string): void {\n  if (!syncGroupMap.has(group)) return;\n  const state = syncGroupMap.get(group)!;\n  state.count -= 1;\n  if (state.count <= 0) {\n    syncGroupMap.delete(group);\n  }\n}\n</script>\n\n<template>\n  <div class=\"relative flex flex-wrap justify-center items-center gap-[1em]\" ref=\"containerRef\">\n    <span\n      v-for=\"(word, index) in words\"\n      :key=\"props.index ? props.index[index] : index\"\n      :ref=\"el => setWordRef(el as HTMLSpanElement, index)\"\n      class=\"relative font-black text-7xl transition-[filter,color] duration-300 ease-in-out cursor-pointer\"\n      :style=\"{\n        filter:\n          currentIndex === -1 || (props.index ? props.index[index] : index) === currentIndex\n            ? 'blur(0px)'\n            : `blur(${blurAmount}px)`,\n        '--border-color': borderColor,\n        '--glow-color': glowColor,\n        transition: `filter ${animationDuration}s ease`\n      }\"\n      @mouseenter=\"handleMouseEnter(index)\"\n      @mouseleave=\"handleMouseLeave\"\n    >\n      {{ word }}\n    </span>\n\n    <motion.div\n      class=\"top-0 left-0 box-content absolute border-none pointer-events-none\"\n      :animate=\"{\n        x: focusRect.x,\n        y: focusRect.y,\n        width: focusRect.width,\n        height: focusRect.height,\n        opacity: currentIndex >= 0 ? 1 : 0\n      }\"\n      :transition=\"{\n        duration: animationDuration\n      }\"\n      :style=\"{\n        '--border-color': borderColor,\n        '--glow-color': glowColor\n      }\"\n    >\n      <span\n        class=\"top-[-10px] left-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n\n      <span\n        class=\"top-[-10px] right-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n\n      <span\n        class=\"bottom-[-10px] left-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n\n      <span\n        class=\"right-[-10px] bottom-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n    </motion.div>\n  </div>\n</template>\n","path":"TrueFocus/TrueFocus.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
+{"name":"TrueFocus","title":"TrueFocus","description":"Applies dynamic blur / clarity based over a series of words in order.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { motion } from 'motion-v';\nimport { computed, nextTick, onMounted, onUnmounted, ref, watch, useTemplateRef } from 'vue';\n\ninterface TrueFocusProps {\n  sentence?: string;\n  manualMode?: boolean;\n  blurAmount?: number;\n  borderColor?: string;\n  glowColor?: string;\n  animationDuration?: number;\n  pauseBetweenAnimations?: number;\n}\n\nconst props = withDefaults(defineProps<TrueFocusProps>(), {\n  sentence: 'True Focus',\n  manualMode: false,\n  blurAmount: 5,\n  borderColor: 'green',\n  glowColor: 'rgba(0, 255, 0, 0.6)',\n  animationDuration: 0.5,\n  pauseBetweenAnimations: 1\n});\n\nconst words = computed(() => props.sentence.split(' '));\nconst currentIndex = ref(0);\nconst lastActiveIndex = ref<number | null>(null);\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst wordRefs = ref<HTMLSpanElement[]>([]);\nconst focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });\n\nlet interval: ReturnType<typeof setInterval> | null = null;\n\nwatch(\n  [currentIndex, () => words.value.length],\n  async () => {\n    if (currentIndex.value === null || currentIndex.value === -1) return;\n    if (!wordRefs.value[currentIndex.value] || !containerRef.value) return;\n\n    await nextTick();\n\n    const parentRect = containerRef.value.getBoundingClientRect();\n    const activeRect = wordRefs.value[currentIndex.value].getBoundingClientRect();\n\n    focusRect.value = {\n      x: activeRect.left - parentRect.left,\n      y: activeRect.top - parentRect.top,\n      width: activeRect.width,\n      height: activeRect.height\n    };\n  },\n  { immediate: true }\n);\n\nconst handleMouseEnter = (index: number) => {\n  if (props.manualMode) {\n    lastActiveIndex.value = index;\n    currentIndex.value = index;\n  }\n};\n\nconst handleMouseLeave = () => {\n  if (props.manualMode) {\n    currentIndex.value = lastActiveIndex.value || 0;\n  }\n};\n\nconst setWordRef = (el: HTMLSpanElement | null, index: number) => {\n  if (el) {\n    wordRefs.value[index] = el;\n  }\n};\n\nonMounted(async () => {\n  await nextTick();\n\n  if (wordRefs.value[0] && containerRef.value) {\n    const parentRect = containerRef.value.getBoundingClientRect();\n    const activeRect = wordRefs.value[0].getBoundingClientRect();\n\n    focusRect.value = {\n      x: activeRect.left - parentRect.left,\n      y: activeRect.top - parentRect.top,\n      width: activeRect.width,\n      height: activeRect.height\n    };\n  }\n\n  watch(\n    [() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, () => words.value],\n    () => {\n      if (interval) {\n        clearInterval(interval);\n        interval = null;\n      }\n\n      if (!props.manualMode) {\n        interval = setInterval(\n          () => {\n            currentIndex.value = (currentIndex.value + 1) % words.value.length;\n          },\n          (props.animationDuration + props.pauseBetweenAnimations) * 1000\n        );\n      }\n    },\n    { immediate: true }\n  );\n});\n\nonUnmounted(() => {\n  if (interval) {\n    clearInterval(interval);\n  }\n});\n</script>\n\n<template>\n  <div class=\"relative flex flex-wrap justify-center items-center gap-[1em]\" ref=\"containerRef\">\n    <span\n      v-for=\"(word, index) in words\"\n      :key=\"index\"\n      :ref=\"el => setWordRef(el as HTMLSpanElement, index)\"\n      class=\"relative font-black text-7xl transition-[filter,color] duration-300 ease-in-out cursor-pointer\"\n      :style=\"{\n        filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,\n        '--border-color': borderColor,\n        '--glow-color': glowColor,\n        transition: `filter ${animationDuration}s ease`\n      }\"\n      @mouseenter=\"handleMouseEnter(index)\"\n      @mouseleave=\"handleMouseLeave\"\n    >\n      {{ word }}\n    </span>\n\n    <motion.div\n      class=\"top-0 left-0 box-content absolute border-none pointer-events-none\"\n      :animate=\"{\n        x: focusRect.x,\n        y: focusRect.y,\n        width: focusRect.width,\n        height: focusRect.height,\n        opacity: currentIndex >= 0 ? 1 : 0\n      }\"\n      :transition=\"{\n        duration: animationDuration\n      }\"\n      :style=\"{\n        '--border-color': borderColor,\n        '--glow-color': glowColor\n      }\"\n    >\n      <spanx\n        class=\"top-[-10px] left-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></spanx>\n\n      <span\n        class=\"top-[-10px] right-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n\n      <span\n        class=\"bottom-[-10px] left-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n\n      <span\n        class=\"right-[-10px] bottom-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n    </motion.div>\n  </div>\n</template>\n","path":"TrueFocus/TrueFocus.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
diff --git a/src/demo/Animations/OrbitImagesDemo.vue b/src/demo/Animations/OrbitImagesDemo.vue
index fdbfffb..4d899b7 100644
--- a/src/demo/Animations/OrbitImagesDemo.vue
+++ b/src/demo/Animations/OrbitImagesDemo.vue
@@ -23,21 +23,71 @@
       </div>
 
       <Customize>
-        <PreviewSelect title="Shape" v-model="shape" :options="shapeOptions" />
+        <PreviewSelect
+          title="Shape"
+          v-model="shape"
+          :options="shapeOptions"
+        />
 
-        <PreviewSelect title="Direction" v-model="direction" :options="directionOptions" />
+        <PreviewSelect
+          title="Direction"
+          v-model="direction"
+          :options="directionOptions"
+        />
 
-        <PreviewSlider title="Radius X" v-model="radiusX" :min="50" :max="600" :step="10" value-unit="px" />
+        <PreviewSlider
+          title="Radius X"
+          v-model="radiusX"
+          :min="50"
+          :max="600"
+          :step="10"
+          value-unit="px"
+        />
 
-        <PreviewSlider title="Radius Y" v-model="radiusY" :min="50" :max="600" :step="10" value-unit="px" />
+        <PreviewSlider
+          title="Radius Y"
+          v-model="radiusY"
+          :min="50"
+          :max="600"
+          :step="10"
+          value-unit="px"
+        />
 
-        <PreviewSlider title="Radius" v-model="radius" :min="50" :max="600" :step="10" value-unit="px" />
+        <PreviewSlider
+          title="Radius"
+          v-model="radius"
+          :min="50"
+          :max="600"
+          :step="10"
+          value-unit="px"
+        />
 
-        <PreviewSlider title="Rotation" v-model="rotation" :min="-180" :max="180" :step="1" value-unit="°" />
+        <PreviewSlider
+          title="Rotation"
+          v-model="rotation"
+          :min="-180"
+          :max="180"
+          :step="1"
+          value-unit="°"
+        />
 
-        <PreviewSlider title="Duration" v-model="duration" :min="5" :max="120" :step="5" value-unit="s" />
+        <PreviewSlider
+          title="Duration"
+          v-model="duration"
+          :min="5"
+          :max="120"
+          :step="5"
+          value-unit="s"
+        />
 
-        <PreviewSlider title="Item Size" v-model="itemSize" :min="20" :max="120" :step="4" value-unit="px" />
+        <PreviewSlider
+          title="Item Size"
+          v-model="itemSize"
+          :min="20"
+          :max="120"
+          :step="4"
+          value-unit="px"
+        />
 
         <PreviewSwitch title="Fill (Distribute Evenly)" v-model="fill" />
 
@@ -73,7 +123,8 @@ import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
 import PreviewSelect from '../../components/common/PreviewSelect.vue';
 import RefreshButton from '../../components/common/RefreshButton.vue';
-import OrbitImages, { type OrbitShape } from '../../content/Animations/OrbitImages/OrbitImages.vue';
+import OrbitImages from '../../content/Animations/OrbitImages/OrbitImages.vue';
+import type { OrbitShape } from '../../content/Animations/OrbitImages/OrbitImages.vue';
 import { orbitImages } from '@/constants/code/Animations/orbitImagesCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
@@ -119,79 +170,29 @@ const directionOptions = [
 
 const propData = [
   { name: 'images', type: 'string[]', default: '[]', description: 'Array of image URLs to orbit along the path.' },
-  {
-    name: 'altPrefix',
-    type: 'string',
-    default: '"Orbiting image"',
-    description: 'Prefix for auto-generated alt attributes.'
-  },
-  {
-    name: 'shape',
-    type: 'OrbitShape',
-    default: '"ellipse"',
-    description: 'Preset shape: ellipse, circle, square, rectangle, triangle, star, heart, infinity, wave, or custom.'
-  },
-  {
-    name: 'customPath',
-    type: 'string',
-    default: 'undefined',
-    description: 'Custom SVG path string (used when shape="custom").'
-  },
-  {
-    name: 'baseWidth',
-    type: 'number',
-    default: '1400',
-    description: 'Base width for the design coordinate space used for responsive scaling.'
-  },
+  { name: 'altPrefix', type: 'string', default: '"Orbiting image"', description: 'Prefix for auto-generated alt attributes.' },
+  { name: 'shape', type: 'OrbitShape', default: '"ellipse"', description: 'Preset shape: ellipse, circle, square, rectangle, triangle, star, heart, infinity, wave, or custom.' },
+  { name: 'customPath', type: 'string', default: 'undefined', description: 'Custom SVG path string (used when shape="custom").' },
+  { name: 'baseWidth', type: 'number', default: '1400', description: 'Base width for the design coordinate space used for responsive scaling.' },
   { name: 'radiusX', type: 'number', default: '700', description: 'Horizontal radius for ellipse/rectangle shapes.' },
   { name: 'radiusY', type: 'number', default: '170', description: 'Vertical radius for ellipse/rectangle shapes.' },
-  {
-    name: 'radius',
-    type: 'number',
-    default: '300',
-    description: 'Radius for circle, square, triangle, star, heart shapes.'
-  },
+  { name: 'radius', type: 'number', default: '300', description: 'Radius for circle, square, triangle, star, heart shapes.' },
   { name: 'starPoints', type: 'number', default: '5', description: 'Number of points for star shape.' },
   { name: 'starInnerRatio', type: 'number', default: '0.5', description: 'Inner radius ratio for star (0-1).' },
-  {
-    name: 'rotation',
-    type: 'number',
-    default: '-8',
-    description: 'Rotation angle of the entire orbit path in degrees.'
-  },
+  { name: 'rotation', type: 'number', default: '-8', description: 'Rotation angle of the entire orbit path in degrees.' },
   { name: 'duration', type: 'number', default: '40', description: 'Duration of one complete orbit in seconds.' },
   { name: 'itemSize', type: 'number', default: '64', description: 'Width/height of each orbiting item in pixels.' },
   { name: 'direction', type: '"normal" | "reverse"', default: '"normal"', description: 'Animation direction.' },
-  {
-    name: 'fill',
-    type: 'boolean',
-    default: 'true',
-    description: 'Whether to distribute items evenly around the orbit.'
-  },
+  { name: 'fill', type: 'boolean', default: 'true', description: 'Whether to distribute items evenly around the orbit.' },
   { name: 'width', type: 'number | "100%"', default: '100', description: 'Container width in pixels or "100%".' },
   { name: 'height', type: 'number | "auto"', default: '100', description: 'Container height in pixels or "auto".' },
   { name: 'className', type: 'string', default: '""', description: 'Additional CSS class for the container.' },
   { name: 'showPath', type: 'boolean', default: 'false', description: 'Whether to show the orbit path for debugging.' },
-  {
-    name: 'pathColor',
-    type: 'string',
-    default: '"rgba(0,0,0,0.1)"',
-    description: 'Stroke color when showPath is true.'
-  },
+  { name: 'pathColor', type: 'string', default: '"rgba(0,0,0,0.1)"', description: 'Stroke color when showPath is true.' },
   { name: 'pathWidth', type: 'number', default: '2', description: 'Stroke width when showPath is true.' },
-  {
-    name: 'easing',
-    type: 'string',
-    default: '"linear"',
-    description: 'Animation easing: linear, easeIn, easeOut, easeInOut.'
-  },
+  { name: 'easing', type: 'string', default: '"linear"', description: 'Animation easing: linear, easeIn, easeOut, easeInOut.' },
   { name: 'paused', type: 'boolean', default: 'false', description: 'Whether the animation is paused.' },
-  {
-    name: 'responsive',
-    type: 'boolean',
-    default: 'false',
-    description: 'Enable responsive scaling based on container width.'
-  }
+  { name: 'responsive', type: 'boolean', default: 'false', description: 'Enable responsive scaling based on container width.' }
 ];
 
 watch([shape, direction], () => {