{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "link-reveal",
  "title": "Link Reveal",
  "description": "Link reveal effect",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/pioneerui/link-reveal.tsx",
      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { motion } from \"framer-motion\"\n\ninterface Link {\n  text: string\n  href: string\n  color?: string\n}\n\ninterface RevealLinksProps {\n  links?: Link[]\n  className?: string\n  style?: React.CSSProperties\n  duration?: number\n  stagger?: number\n  showUnderline?: boolean\n  variant?: \"slide\" | \"flip\" | \"fade\" | \"perspective\" | \"split\" | \"creative\"\n  direction?: \"up\" | \"down\" | \"left\" | \"right\"\n  textColor?: string\n  underlineColor?: string\n  underlineHeight?: number\n  fontSize?: number\n  fontWeight?: string\n  letterSpacing?: string\n  textTransform?: \"none\" | \"uppercase\" | \"lowercase\" | \"capitalize\"\n}\n\nexport const RevealLinks: React.FC<RevealLinksProps> = ({\n  links = [\n    { text: \"Home\", href: \"#\" },\n    { text: \"About\", href: \"#\" },\n    { text: \"Projects\", href: \"#\" },\n    { text: \"Contact\", href: \"#\" },\n  ],\n  className = \"\",\n  style = {},\n  duration = 0.3,\n  stagger = 0.02,\n  showUnderline = true,\n  variant = \"slide\",\n  direction = \"up\",\n  textColor = \"currentColor\",\n  underlineColor = \"currentColor\",\n  underlineHeight = 2,\n  fontSize = 16,\n  fontWeight = \"normal\",\n  letterSpacing = \"normal\",\n  textTransform = \"none\",\n}) => {\n  const getVariants = () => {\n    switch (variant) {\n      case \"flip\":\n        return {\n          initial: { rotateX: 0 },\n          hover: { rotateX: 360 },\n        }\n      case \"fade\":\n        return {\n          initial: { opacity: 1 },\n          hover: { opacity: 0 },\n        }\n      case \"perspective\":\n        return {\n          initial: { rotateX: 0, y: 0 },\n          hover: { rotateX: -90, y: -8 },\n        }\n      case \"split\":\n        return {\n          initial: { letterSpacing: letterSpacing },\n          hover: { letterSpacing: \"0.5em\" },\n        }\n      case \"creative\":\n        return {\n          initial: { scale: 1, rotate: 0 },\n          hover: { scale: 1.2, rotate: 5 },\n        }\n      default: // slide\n        return {\n          initial: { y: 0 },\n          hover: { y: direction === \"up\" ? \"-100%\" : \"100%\" },\n        }\n    }\n  }\n\n  const baseStyle: React.CSSProperties = {\n    fontSize,\n    fontWeight,\n    letterSpacing,\n    textTransform,\n    ...style,\n  }\n\n  return (\n    <section className={`grid place-content-center gap-6 px-8 py-24 ${className}`}>\n      {links.map((link) => (\n        <motion.a\n          key={link.text}\n          href={link.href}\n          className=\"relative block overflow-hidden whitespace-nowrap\"\n          initial=\"initial\"\n          whileHover=\"hover\"\n          style={baseStyle}\n        >\n          <motion.div\n            className=\"relative z-10\"\n            variants={getVariants()}\n            transition={{\n              duration,\n              ease: [0.215, 0.61, 0.355, 1],\n            }}\n          >\n            {link.text.split(\"\").map((letter, index) => (\n              <motion.span\n                key={index}\n                variants={{\n                  initial: { opacity: 1 },\n                  hover: { opacity: 1 },\n                }}\n                transition={{\n                  duration,\n                  delay: stagger * index,\n                }}\n                style={{ color: textColor }}\n                className=\"inline-block\"\n              >\n                {letter}\n              </motion.span>\n            ))}\n          </motion.div>\n\n          <div className=\"absolute inset-0\">\n            {link.text.split(\"\").map((letter, index) => (\n              <motion.span\n                key={index}\n                variants={{\n                  initial: { y: \"100%\", opacity: 0 },\n                  hover: { y: 0, opacity: 1 },\n                }}\n                transition={{\n                  duration,\n                  delay: stagger * index,\n                }}\n                className={`inline-block ${link.color ? `bg-gradient-to-r ${link.color} bg-clip-text text-transparent` : \"\"}`}\n                style={{ color: link.color ? undefined : textColor }}\n              >\n                {letter}\n              </motion.span>\n            ))}\n          </div>\n\n          {showUnderline && (\n            <motion.div\n              variants={{\n                initial: { scaleX: 0 },\n                hover: { scaleX: 1 },\n              }}\n              transition={{ duration }}\n              className=\"absolute bottom-0 left-0 right-0 origin-left\"\n              style={{\n                height: underlineHeight,\n                background: link.color ? `linear-gradient(to right, ${link.color})` : underlineColor,\n              }}\n            />\n          )}\n        </motion.a>\n      ))}\n    </section>\n  )\n}\n\n",
      "type": "registry:ui",
      "target": "components/pioneerui/link-reveal.tsx"
    }
  ],
  "type": "registry:ui"
}