{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "layered-text",
  "type": "registry:ui",
  "title": "Layered Text",
  "description": "Layered text effect with offset shadows, customizable styling, and animations.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/layered-text.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface LayeredTextProps {\n  text: string;\n  layers?: string[];\n  offsetX?: number;\n  offsetY?: number;\n  strokeWidth?: number;\n  animate?: boolean;\n  animationDuration?: number;\n  className?: string;\n}\n\nconst LayeredText: React.FC<LayeredTextProps> = ({\n  text,\n  layers = ['#10B981', '#3B82F6', '#EF4444'],\n  offsetX = 6,\n  offsetY = 6,\n  strokeWidth = 4,\n  animate = true,\n  animationDuration = 0.6,\n  className,\n}) => {\n  return (\n    <div className={cn('relative inline-block', className)}>\n      <div className='relative select-none tracking-[-0.02em]'>\n        {layers.map((color, index) => (\n          <motion.div\n            key={`layer-${index}`}\n            className='absolute top-0 left-0'\n            style={{\n              color,\n              transform: `translate(${offsetX * (layers.length - index)}px, ${\n                offsetY * (layers.length - index)\n              }px)`,\n              zIndex: index,\n            }}\n            initial={animate ? { opacity: 0 } : undefined}\n            animate={animate ? { opacity: 1 } : undefined}\n            transition={\n              animate\n                ? {\n                    duration: animationDuration,\n                    delay: index * 0.1,\n                    ease: 'easeOut',\n                  }\n                : undefined\n            }\n          >\n            {text}\n          </motion.div>\n        ))}\n\n        <motion.div\n          className={cn('relative', className)}\n          style={\n            {\n              WebkitTextStroke: `${strokeWidth}px var(--stroke-color)`,\n              paintOrder: 'stroke fill',\n              zIndex: layers.length,\n            } as React.CSSProperties\n          }\n          initial={animate ? { opacity: 0 } : undefined}\n          animate={animate ? { opacity: 1 } : undefined}\n          transition={\n            animate\n              ? {\n                  duration: animationDuration,\n                  delay: layers.length * 0.1,\n                  ease: 'easeOut',\n                }\n              : undefined\n          }\n        >\n          {text}\n        </motion.div>\n      </div>\n    </div>\n  );\n};\n\nexport { LayeredText };\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}