{
  "name": "holographic-card",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "holographic-card.tsx",
      "content": "import * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport './holographic-card.css';\n\nexport interface GlitchTextProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  text: string;\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';\n  theme?: {\n    c1?: string;\n    c2?: string;\n  };\n}\n\nexport const GlitchText = React.forwardRef<HTMLHeadingElement, GlitchTextProps>(\n  ({ className, text, as: Comp = 'h1', theme, style, ...props }, ref) => {\n    const customStyle = {\n      ...(theme?.c1 ? { '--holo-c1': theme.c1 } : {}),\n      ...(theme?.c2 ? { '--holo-c2': theme.c2 } : {}),\n      ...style,\n    } as React.CSSProperties;\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn('holographic-glitch', className)}\n        data-text={text}\n        style={customStyle}\n        {...props}\n      >\n        {text}\n      </Comp>\n    );\n  }\n);\nGlitchText.displayName = 'GlitchText';\n\nexport interface HolographicCardProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  buttonText?: string;\n  buttonHref?: string;\n  theme?: {\n    c1?: string;\n    c2?: string;\n    c3?: string;\n  };\n}\n\nexport const HolographicCard = React.forwardRef<\n  HTMLDivElement,\n  HolographicCardProps\n>(\n  (\n    {\n      className,\n      title,\n      description,\n      buttonText,\n      buttonHref,\n      children,\n      theme,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const customStyle = {\n      ...(theme?.c1 ? { '--holo-c1': theme.c1 } : {}),\n      ...(theme?.c2 ? { '--holo-c2': theme.c2 } : {}),\n      ...(theme?.c3 ? { '--holo-c3': theme.c3 } : {}),\n      ...style,\n    } as React.CSSProperties;\n\n    return (\n      <div className='holographic-card-wrapper flex h-full w-full items-center justify-center p-8'>\n        <div\n          ref={ref}\n          className={cn(\n            'holographic-card w-full max-w-[420px] p-10 text-white',\n            className\n          )}\n          style={customStyle}\n          {...props}\n        >\n          {title && <h2 className='mb-4 text-2xl font-bold'>{title}</h2>}\n\n          {description && (\n            <p className='leading-relaxed opacity-85'>{description}</p>\n          )}\n\n          {children}\n\n          {buttonText && (\n            <a\n              href={buttonHref || '#'}\n              className='holographic-btn mt-8 px-7 py-3 text-sm'\n            >\n              {buttonText}\n            </a>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\nHolographicCard.displayName = 'HolographicCard';\n",
      "type": "registry:ui"
    },
    {
      "path": "holographic-card.tsx",
      "content": "import * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport './holographic-card.css';\n\nexport interface GlitchTextProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  text: string;\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';\n  theme?: {\n    c1?: string;\n    c2?: string;\n  };\n}\n\nexport const GlitchText = React.forwardRef<HTMLHeadingElement, GlitchTextProps>(\n  ({ className, text, as: Comp = 'h1', theme, style, ...props }, ref) => {\n    const customStyle = {\n      ...(theme?.c1 ? { '--holo-c1': theme.c1 } : {}),\n      ...(theme?.c2 ? { '--holo-c2': theme.c2 } : {}),\n      ...style,\n    } as React.CSSProperties;\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn('holographic-glitch', className)}\n        data-text={text}\n        style={customStyle}\n        {...props}\n      >\n        {text}\n      </Comp>\n    );\n  }\n);\nGlitchText.displayName = 'GlitchText';\n\nexport interface HolographicCardProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  buttonText?: string;\n  buttonHref?: string;\n  theme?: {\n    c1?: string;\n    c2?: string;\n    c3?: string;\n  };\n}\n\nexport const HolographicCard = React.forwardRef<\n  HTMLDivElement,\n  HolographicCardProps\n>(\n  (\n    {\n      className,\n      title,\n      description,\n      buttonText,\n      buttonHref,\n      children,\n      theme,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const customStyle = {\n      ...(theme?.c1 ? { '--holo-c1': theme.c1 } : {}),\n      ...(theme?.c2 ? { '--holo-c2': theme.c2 } : {}),\n      ...(theme?.c3 ? { '--holo-c3': theme.c3 } : {}),\n      ...style,\n    } as React.CSSProperties;\n\n    return (\n      <div className='holographic-card-wrapper flex h-full w-full items-center justify-center p-8'>\n        <div\n          ref={ref}\n          className={cn(\n            'holographic-card w-full max-w-[420px] p-10 text-white',\n            className\n          )}\n          style={customStyle}\n          {...props}\n        >\n          {title && <h2 className='mb-4 text-2xl font-bold'>{title}</h2>}\n\n          {description && (\n            <p className='leading-relaxed opacity-85'>{description}</p>\n          )}\n\n          {children}\n\n          {buttonText && (\n            <a\n              href={buttonHref || '#'}\n              className='holographic-btn mt-8 px-7 py-3 text-sm'\n            >\n              {buttonText}\n            </a>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\nHolographicCard.displayName = 'HolographicCard';\n",
      "type": "registry:ui"
    },
    {
      "path": "holographic-card.css",
      "content": "@reference \"../../app/globals.css\";\n\n/* background grain overlay */\n.holographic-grain-overlay {\n  position: absolute;\n  inset: 0;\n  background: repeating-radial-gradient(\n    circle,\n    rgba(255, 255, 255, 0.05) 0 1px,\n    transparent 1px 2px\n  );\n  mix-blend-mode: overlay;\n  pointer-events: none;\n  opacity: 0.35;\n  animation: holographic-grain 0.25s steps(2) infinite;\n}\n\n@keyframes holographic-grain {\n  to {\n    transform: translate(2px, -2px);\n  }\n}\n\n/* glitch title */\n.holographic-glitch {\n  position: relative;\n  font-weight: 900;\n  letter-spacing: 0.08em;\n}\n.holographic-glitch::before,\n.holographic-glitch::after {\n  content: attr(data-text);\n  position: absolute;\n  inset: 0;\n  opacity: 0.8;\n}\n.holographic-glitch::before {\n  color: var(--holo-c1, #38bdf8);\n  transform: translate(3px, -2px);\n  mix-blend-mode: screen;\n  animation: holographic-glitch-anim 2s infinite alternate;\n}\n.holographic-glitch::after {\n  color: var(--holo-c2, #a855f7);\n  transform: translate(-3px, 2px);\n  mix-blend-mode: screen;\n  animation: holographic-glitch-anim 1.5s infinite alternate-reverse;\n}\n\n@keyframes holographic-glitch-anim {\n  0% {\n    clip-path: inset(0 0 70% 0);\n  }\n  25% {\n    clip-path: inset(20% 0 40% 0);\n  }\n  50% {\n    clip-path: inset(40% 0 20% 0);\n  }\n  75% {\n    clip-path: inset(10% 0 60% 0);\n  }\n  100% {\n    clip-path: inset(0 0 0 0);\n  }\n}\n\n/* holographic card */\n.holographic-card-wrapper {\n  perspective: 1000px;\n}\n\n.holographic-card {\n  border-radius: 28px;\n  background: linear-gradient(\n    120deg,\n    rgba(255, 255, 255, 0.08),\n    rgba(255, 255, 255, 0.02)\n  );\n  backdrop-filter: blur(16px);\n  /* The shadow colors use the default theme values, but fall back gracefully */\n  box-shadow:\n    0 0 50px rgba(56, 189, 248, 0.35),\n    inset 0 0 35px rgba(255, 255, 255, 0.15);\n  transform-style: preserve-3d;\n  animation: holographic-float 6s ease-in-out infinite;\n  position: relative;\n}\n\n.holographic-card::before {\n  content: '';\n  position: absolute;\n  inset: -2px;\n  border-radius: 30px;\n  background: linear-gradient(\n    120deg,\n    transparent 20%,\n    var(--holo-c1, #38bdf8),\n    var(--holo-c2, #a855f7),\n    var(--holo-c3, #22c55e),\n    transparent 80%\n  );\n  filter: blur(25px);\n  opacity: 0.4;\n  z-index: -1;\n  animation: holographic-holo 4s linear infinite;\n  background-size: 400% 100%;\n}\n\n@keyframes holographic-holo {\n  to {\n    background-position: 400% 0;\n  }\n}\n\n@keyframes holographic-float {\n  0%,\n  100% {\n    transform: rotateX(12deg) rotateY(-10deg) translateY(0);\n  }\n  50% {\n    transform: rotateX(18deg) rotateY(12deg) translateY(-25px);\n  }\n}\n\n/* holographic button */\n.holographic-btn {\n  display: inline-block;\n  border-radius: 999px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  color: white;\n  text-decoration: none;\n  background: linear-gradient(\n    90deg,\n    var(--holo-c1, #38bdf8),\n    var(--holo-c2, #a855f7),\n    var(--holo-c3, #22c55e)\n  );\n  background-size: 300% 100%;\n  animation: holographic-holo 3s linear infinite;\n  /* Shadow color matches default c2 */\n  box-shadow: 0 0 25px rgba(168, 85, 247, 0.6);\n}\n",
      "type": "registry:ui"
    }
  ]
}