{
  "name": "text-shimmer-wave",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion-v"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "TextShimmerWave.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion } from 'motion-v'\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string\n    class?: string\n    duration?: number\n    zDistance?: number\n    xDistance?: number\n    yDistance?: number\n    spread?: number\n    scaleDistance?: number\n    rotateYDistance?: number\n    transition?: Record<string, string | number | boolean>\n  }>(),\n  {\n    as: 'p',\n    duration: 1,\n    zDistance: 10,\n    xDistance: 2,\n    yDistance: -2,\n    spread: 1,\n    scaleDistance: 1.1,\n    rotateYDistance: 10,\n  },\n)\n\nconst slots = useSlots()\nconst children = computed(() => {\n  const defaultSlot = slots.default?.()\n  if (!defaultSlot) return ''\n  return defaultSlot\n    .map((vnode) => (typeof vnode.children === 'string' ? vnode.children : ''))\n    .join('')\n})\n\nconst chars = computed(() => children.value.split(''))\n</script>\n\n<template>\n  <component\n    :is=\"props.as\"\n    :class=\"\n      cn(\n        'relative inline-block perspective-normal',\n        '[--base-color:#a1a1aa] [--base-gradient-color:#000]',\n        'dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff]',\n        props.class,\n      )\n    \"\n    :style=\"{ color: 'var(--base-color)' }\"\n  >\n    <Motion\n      v-for=\"(char, i) in chars\"\n      :key=\"i\"\n      as=\"span\"\n      :class=\"cn('inline-block whitespace-pre transform-3d')\"\n      :initial=\"{\n        translateZ: 0,\n        scale: 1,\n        rotateY: 0,\n        color: 'var(--base-color)',\n      }\"\n      :animate=\"{\n        translateZ: [0, props.zDistance, 0],\n        translateX: [0, props.xDistance, 0],\n        translateY: [0, props.yDistance, 0],\n        scale: [1, props.scaleDistance, 1],\n        rotateY: [0, props.rotateYDistance, 0],\n        color: [\n          'var(--base-color)',\n          'var(--base-gradient-color)',\n          'var(--base-color)',\n        ],\n      }\"\n      :transition=\"{\n        duration: props.duration,\n        repeat: Infinity,\n        repeatDelay: (children.length * 0.05) / props.spread,\n        delay: (i * props.duration * (1 / props.spread)) / children.length,\n        ease: 'easeInOut',\n        ...props.transition,\n      }\"\n    >\n      {{ char }}\n    </Motion>\n  </component>\n</template>\n",
      "type": "registry:ui"
    }
  ]
}