{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sliced-text",
  "type": "registry:component",
  "title": "Sliced Text",
  "description": "Heading sliced horizontally that re-aligns on hover (KokonutUI, MIT), bridged to contract tokens.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://design.subconscious.ai/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/components/sliced-text.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @dorianbaffier\n * @description: Sliced Text\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport { motion } from \"framer-motion\";\nimport { cn } from \"@/registry/lib/utils\";\n\ninterface SlicedTextProps {\n  text: string;\n  className?: string;\n  containerClassName?: string;\n  splitSpacing?: number;\n}\n\nconst SlicedText: React.FC<SlicedTextProps> = ({\n  text = \"Sliced Text\",\n  className = \"\",\n  containerClassName = \"\",\n  splitSpacing = 2,\n}) => (\n  <motion.div\n    className={cn(\n      \"relative inline-block w-full text-center\",\n      containerClassName\n    )}\n    initial=\"default\"\n    whileHover=\"hover\"\n  >\n    <motion.div\n      className={cn(\"absolute -ml-0.5 w-full text-4xl\", className)}\n      transition={{ duration: 0.1 }}\n      variants={{\n        default: {\n          clipPath: \"inset(0 0 50% 0)\",\n          y: -splitSpacing / 2,\n          opacity: 1,\n        },\n        hover: {\n          clipPath: \"inset(0 0 0 0)\",\n          y: 0,\n          opacity: 0,\n        },\n      }}\n    >\n      {text}\n    </motion.div>\n    <motion.div\n      className={cn(\"absolute w-full text-4xl\", className)}\n      transition={{ duration: 0.1 }}\n      variants={{\n        default: {\n          clipPath: \"inset(50% 0 0 0)\",\n          y: splitSpacing / 2,\n          opacity: 1,\n        },\n        hover: {\n          clipPath: \"inset(0 0 0 0)\",\n          y: 0,\n          opacity: 1,\n        },\n      }}\n    >\n      {text}\n    </motion.div>\n\n    <div className={cn(\"invisible text-4xl\", className)}>{text}</div>\n  </motion.div>\n);\n\nexport default SlicedText;\n"
    }
  ]
}