{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "holographic-card",
  "title": "holographic-card",
  "description": "An interactive card with a holographic gradient and mouse‑reactive tilt effect.",
  "dependencies": [
    "react",
    "motion"
  ],
  "files": [
    {
      "path": "registry/eldoraui/holographic-card.tsx",
      "content": "\"use client\"\n\nimport React, { useRef, useState } from \"react\"\nimport {\n  motion,\n  useMotionTemplate,\n  useMotionValue,\n  useSpring,\n  useTransform,\n} from \"motion/react\"\n\n// ==========================================\n// ==== Component Interface ================\n// ==========================================\nexport interface HolographicCardProps {\n  id?: string\n  width?: number\n  height?: number\n  imageSrc: string\n  // -- Hover Image --\n  hoverImageSrc?: string\n  hoverImageEase?: string\n  // -- Content Strings --\n  topText?: React.ReactNode\n  bottomText?: React.ReactNode\n  // -- Text Layout / Global --\n  mirrorBottomText?: boolean\n  isRTL?: boolean\n  textOverlayPadding?: string\n  // -- Top Text Config --\n  topTextVertical?: boolean\n  topTextWeight?: number | string\n  topTextFontSize?: string | number\n  topTextLetterSpacing?: string | number\n  topTextColor?: string\n  topTextHoverColor?: string\n  topTextClassName?: string\n  // -- Bottom Text Config --\n  bottomTextVertical?: boolean\n  bottomTextWeight?: number | string\n  bottomTextFontSize?: string | number\n  bottomTextLetterSpacing?: string | number\n  bottomTextColor?: string\n  bottomTextHoverColor?: string\n  bottomTextClassName?: string\n  // -- Base Visuals --\n  borderRadius?: number\n  borderWidth?: number\n  borderColor?: string\n  backgroundColor?: string\n  imageOpacity?: number\n  maxImageWidthPct?: number\n  // -- Pattern Props --\n  patternColor?: string\n  patternOpacity?: number\n  patternSize?: number\n  patternDotSize?: number\n  // -- Hologram --\n  enableHologram?: boolean\n  hologramOpacity?: number\n  holographicGradient?: string\n  // -- Interaction --\n  enableTilt?: boolean\n  enableDrag?: boolean\n  dragConstraints?: React.RefObject<Element>\n  className?: string\n  style?: React.CSSProperties\n}\n\n// ==========================================\n// ==== Component Implementation ===========\n// ==========================================\nconst HolographicCard: React.FC<HolographicCardProps> = ({\n  id = \"namer-ui-holographic-card\",\n  width = 320,\n  height = 480,\n  imageSrc,\n  hoverImageSrc,\n  hoverImageEase = \"0.3s\",\n  // Content\n  topText,\n  bottomText,\n  // Layout\n  mirrorBottomText = true,\n  isRTL = false,\n  textOverlayPadding = \"1.375rem 1.325rem\",\n  // Top Text Defaults\n  topTextVertical = true,\n  topTextWeight = 700,\n  topTextFontSize = \"1.5rem\",\n  topTextLetterSpacing = \"0.1em\",\n  topTextColor = \"#fff\",\n  topTextHoverColor = \"#FBE75F\",\n  topTextClassName = \"\",\n  // Bottom Text Defaults\n  bottomTextVertical = true,\n  bottomTextWeight = 700,\n  bottomTextFontSize = \"1.5rem\",\n  bottomTextLetterSpacing = \"0.1em\",\n  bottomTextColor = \"#fff\",\n  bottomTextHoverColor = \"#FBE75F\",\n  bottomTextClassName = \"\",\n  // Base Visuals\n  borderRadius = 24,\n  borderWidth = 1,\n  borderColor = \"rgba(255,255,255,0.1)\",\n  backgroundColor = \"#000\",\n  imageOpacity = 0.9,\n  maxImageWidthPct = 1,\n  // Pattern\n  patternColor = \"#000\",\n  patternOpacity = 0.15,\n  patternSize = 3,\n  patternDotSize = 1,\n  // Hologram / Interaction\n  enableHologram = true,\n  hologramOpacity = 0.4,\n  holographicGradient = \"linear-gradient(135deg, transparent 35%, rgba(255,0,128,0.4) 45%, rgba(0,255,255,0.4) 55%, transparent 65%)\",\n  enableTilt = true,\n  enableDrag = false,\n  dragConstraints,\n  className = \"\",\n  style,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [isHovered, setIsHovered] = useState(false)\n\n  // === Tilt Logic ===\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n  const mouseX = useSpring(x, { stiffness: 200, damping: 25 })\n  const mouseY = useSpring(y, { stiffness: 200, damping: 25 })\n  const rotateX = useTransform(\n    mouseY,\n    [-0.5, 0.5],\n    enableTilt ? [12, -12] : [0, 0]\n  )\n  const rotateY = useTransform(\n    mouseX,\n    [-0.5, 0.5],\n    enableTilt ? [-12, 12] : [0, 0]\n  )\n\n  // Hologram gradients - EXACTLY like original\n  const bgX = useTransform(mouseX, [-0.5, 0.5], [\"0%\", \"100%\"])\n  const bgY = useTransform(mouseY, [-0.5, 0.5], [\"0%\", \"100%\"])\n  const shineX = useTransform(mouseX, [-0.5, 0.5], [\"0%\", \"100%\"])\n  const shineY = useTransform(mouseY, [-0.5, 0.5], [\"0%\", \"100%\"])\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current || !enableTilt) return\n    const rect = containerRef.current.getBoundingClientRect()\n    const xPct = (e.clientX - rect.left) / rect.width - 0.5\n    const yPct = (e.clientY - rect.top) / rect.height - 0.5\n    x.set(xPct)\n    y.set(yPct)\n  }\n\n  const handleMouseLeave = () => {\n    x.set(0)\n    y.set(0)\n    setIsHovered(false)\n  }\n\n  const handleDragStart = () => {\n    if (typeof document !== \"undefined\") document.body.style.cursor = \"grabbing\"\n  }\n\n  const handleDragEnd = () => {\n    if (typeof document !== \"undefined\") document.body.style.cursor = \"default\"\n  }\n\n  // === Hover Colors ===\n  const topTextHoverColorFinal = topTextHoverColor || topTextColor\n  const bottomTextHoverColorFinal = bottomTextHoverColor || bottomTextColor\n\n  // === Alignment Logic ===\n  const bottomJustify = isRTL !== mirrorBottomText ? \"flex-start\" : \"flex-end\"\n\n  // === Scoped IDs ===\n  const wrapperClass = `holo-card-wrapper-${id}`\n  const cardBodyClass = `holo-card-body-${id}`\n  const patternClass = `holo-pattern-${id}`\n\n  return (\n    <>\n      <style>{`\n        .${wrapperClass} {\n          position: relative;\n          width: ${width}px;\n          height: ${height}px;\n          perspective: 1200px;\n          font-family: inherit;\n          user-select: none;\n          cursor: ${enableDrag ? \"grab\" : \"default\"};\n        }\n        .${cardBodyClass} {\n          position: absolute;\n          inset: 0;\n          overflow: hidden;\n          background-color: ${backgroundColor};\n          border-radius: ${borderRadius}px;\n          border: ${borderWidth}px solid ${borderColor};\n          box-shadow: 0 10px 40px -10px rgba(0,0,0,0.8);\n        }\n        .${patternClass} {\n          position: absolute;\n          inset: 0;\n          z-index: 10;\n          pointer-events: none;\n          opacity: ${patternOpacity};\n          background-image: radial-gradient(circle, ${patternColor} ${patternDotSize}px, transparent ${patternDotSize}px);\n          background-size: ${patternSize}px ${patternSize}px;\n        }\n      `}</style>\n      <motion.div\n        drag={enableDrag}\n        dragConstraints={dragConstraints}\n        dragElastic={0.1}\n        whileHover={enableDrag ? { scale: 1.02, cursor: \"grab\" } : undefined}\n        whileTap={enableDrag ? { cursor: \"grabbing\" } : undefined}\n        onDragStart={handleDragStart}\n        onDragEnd={handleDragEnd}\n        className={`${wrapperClass} ${className}`}\n        style={style}\n      >\n        <motion.div\n          ref={containerRef}\n          onMouseMove={handleMouseMove}\n          onMouseLeave={handleMouseLeave}\n          onMouseEnter={() => setIsHovered(true)}\n          style={{\n            rotateX,\n            rotateY,\n            transformStyle: \"preserve-3d\",\n            width: \"100%\",\n            height: \"100%\",\n          }}\n          className=\"relative\"\n        >\n          {/* CARD BODY - EXACT SAME LAYERING AS ORIGINAL */}\n          <div className={cardBodyClass}>\n            {/* Pattern */}\n            <div className={patternClass} />\n\n            {/* Background Image 1 (Base) - z-0 like original */}\n            <div\n              className=\"pointer-events-none absolute inset-0 z-0 flex items-center justify-center\"\n              style={{ opacity: imageOpacity }}\n            >\n              <img\n                src={imageSrc}\n                alt=\"\"\n                draggable={false}\n                className=\"h-full w-full object-cover\"\n                style={{\n                  width: `${maxImageWidthPct * 100}%`,\n                  height: \"auto\",\n                  maxHeight: \"100%\",\n                }}\n              />\n            </div>\n\n            {/* Background Image 2 (Hover Reveal) - z-0 like original */}\n            {hoverImageSrc && (\n              <div\n                className=\"pointer-events-none absolute inset-0 z-0 flex items-center justify-center\"\n                style={{\n                  opacity: isHovered ? imageOpacity : 0,\n                  transition: `opacity ${hoverImageEase} ease`,\n                }}\n              >\n                <img\n                  src={hoverImageSrc}\n                  alt=\"\"\n                  draggable={false}\n                  className=\"h-full w-full object-cover\"\n                  style={{\n                    width: `${maxImageWidthPct * 100}%`,\n                    height: \"auto\",\n                    maxHeight: \"100%\",\n                  }}\n                />\n              </div>\n            )}\n\n            {/* Hologram Overlay - z-20 like original, mix-blend-color-dodge */}\n            {enableHologram && (\n              <motion.div\n                className=\"pointer-events-none absolute inset-0 z-20 mix-blend-color-dodge\"\n                style={{\n                  background: holographicGradient,\n                  backgroundSize: \"200% 200%\",\n                  backgroundPositionX: bgX,\n                  backgroundPositionY: bgY,\n                  opacity: hologramOpacity,\n                }}\n              />\n            )}\n\n            {/* TEXT CONTENT - z-30 like original */}\n            <div className=\"pointer-events-none absolute inset-0 z-30\">\n              {/* --- TOP TEXT --- */}\n              {topText && (\n                <div\n                  className={topTextClassName}\n                  style={{\n                    position: \"absolute\",\n                    top: 0,\n                    [isRTL ? \"right\" : \"left\"]: 0,\n                    padding: textOverlayPadding,\n                    color: isHovered ? topTextHoverColorFinal : topTextColor,\n                    fontWeight: topTextWeight,\n                    fontSize: topTextFontSize,\n                    letterSpacing: topTextLetterSpacing,\n                    writingMode: topTextVertical\n                      ? \"vertical-rl\"\n                      : \"horizontal-tb\",\n                    textOrientation: topTextVertical ? \"mixed\" : undefined,\n                    textShadow: isHovered\n                      ? `0 0 15px ${topTextHoverColorFinal}`\n                      : \"none\",\n                    transition: \"all 0.3s ease\",\n                  }}\n                >\n                  {topText}\n                </div>\n              )}\n\n              {/* --- BOTTOM TEXT --- */}\n              {bottomText && (\n                <div\n                  style={{\n                    position: \"absolute\",\n                    bottom: 0,\n                    left: 0,\n                    right: 0,\n                    padding: textOverlayPadding,\n                    display: \"flex\",\n                    justifyContent: bottomJustify,\n                    transform: mirrorBottomText ? \"scale(-1, -1)\" : \"none\",\n                  }}\n                >\n                  <div\n                    className={bottomTextClassName}\n                    style={{\n                      color: isHovered\n                        ? bottomTextHoverColorFinal\n                        : bottomTextColor,\n                      fontWeight: bottomTextWeight,\n                      fontSize: bottomTextFontSize,\n                      letterSpacing: bottomTextLetterSpacing,\n                      writingMode: bottomTextVertical\n                        ? \"vertical-rl\"\n                        : \"horizontal-tb\",\n                      textOrientation: bottomTextVertical ? \"mixed\" : undefined,\n                      textShadow: isHovered\n                        ? `0 0 15px ${bottomTextHoverColorFinal}`\n                        : \"none\",\n                      transition: \"all 0.3s ease\",\n                    }}\n                  >\n                    {bottomText}\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* GLARE - z-40 like original, EXACTLY on top, NO image fading */}\n          <motion.div\n            className=\"pointer-events-none absolute inset-0 z-40\"\n            style={{\n              borderRadius,\n              background: useMotionTemplate`radial-gradient(circle at ${shineX} ${shineY}, rgba(255,255,255,0.2) 0%, transparent 60%)`,\n              mixBlendMode: \"overlay\",\n            }}\n          />\n        </motion.div>\n      </motion.div>\n    </>\n  )\n}\n\nexport default HolographicCard\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}