{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "holographic-wall-shadcnui",
  "type": "registry:ui",
  "title": "Holographic Wall",
  "description": "Black wall with Pharaonic hieroglyphs and golden cursor light reflection",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/holographic-wall.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { MouseEvent, useEffect, useState } from \"react\";\n\ntype HolographicWallProps = {\n  intensity?: number;\n  radius?: number;\n};\n\n// Pharaonic hieroglyphic symbols\nconst HIEROGLYPHS = [\n  \"𓄿\",\n  \"𓇋\",\n  \"𓅱\",\n  \"𓃀\",\n  \"𓊪\",\n  \"𓆑\",\n  \"𓅓\",\n  \"𓈖\",\n  \"𓂋\",\n  \"𓉔\",\n  \"𓎛\",\n  \"𓐍\",\n  \"𓄡\",\n  \"𓋴\",\n  \"𓈙\",\n  \"𓈎\",\n  \"𓎡\",\n  \"𓎼\",\n  \"𓏏\",\n  \"𓂧\",\n];\n\nexport function HolographicWall({\n  intensity = 0.8,\n  radius = 200,\n}: HolographicWallProps) {\n  const [mousePosition, setMousePosition] = useState<{\n    x: number;\n    y: number;\n  } | null>(null);\n  const [letters, setLetters] = useState<\n    Array<{ char: string; x: number; y: number }>\n  >([]);\n\n  useEffect(() => {\n    // Generate random letters across the wall\n    const gridSize = 20;\n    const spacingX = window.innerWidth / gridSize;\n    const spacingY = 400 / gridSize;\n    const newLetters: Array<{ char: string; x: number; y: number }> = [];\n\n    for (let i = 0; i < gridSize; i++) {\n      for (let j = 0; j < gridSize; j++) {\n        newLetters.push({\n          char: HIEROGLYPHS[Math.floor(Math.random() * HIEROGLYPHS.length)],\n          x: i * spacingX,\n          y: j * spacingY,\n        });\n      }\n    }\n    setLetters(newLetters);\n  }, []);\n\n  const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n    setMousePosition({ x, y });\n  };\n\n  const handleMouseLeave = () => {\n    setMousePosition(null);\n  };\n\n  return (\n    <div\n      onMouseMove={handleMouseMove}\n      onMouseLeave={handleMouseLeave}\n      className=\"relative h-96 w-full overflow-hidden rounded-2xl border border-border bg-black\"\n    >\n      {/* Pharaonic hieroglyphs on the wall */}\n      <div className=\"absolute inset-0\">\n        {letters.map((letter, index) => {\n          const distance = mousePosition\n            ? Math.sqrt(\n                Math.pow(letter.x - mousePosition.x, 2) +\n                  Math.pow(letter.y - mousePosition.y, 2)\n              )\n            : Infinity;\n\n          const letterIntensity =\n            mousePosition && distance < radius\n              ? Math.max(0, 1 - distance / radius) * intensity\n              : 0;\n\n          return (\n            <motion.div\n              key={index}\n              initial={{ opacity: 0.15 }}\n              animate={{\n                opacity:\n                  mousePosition && distance < radius\n                    ? 0.15 + letterIntensity\n                    : 0.15,\n                scale: mousePosition && distance < radius ? 1.3 : 1,\n                color:\n                  mousePosition && distance < radius\n                    ? `rgba(255, 215, 0, ${0.3 + letterIntensity})`\n                    : \"rgba(200, 200, 200, 0.15)\",\n              }}\n              transition={{\n                type: \"spring\",\n                stiffness: 500,\n                damping: 30,\n              }}\n              className=\"absolute text-sm pointer-events-none select-none\"\n              style={{\n                left: letter.x,\n                top: letter.y,\n                textShadow:\n                  mousePosition && distance < radius\n                    ? `0 0 ${letterIntensity * 25}px rgba(255, 215, 0, ${letterIntensity})`\n                    : \"none\",\n              }}\n            >\n              {letter.char}\n            </motion.div>\n          );\n        })}\n      </div>\n\n      {/* Golden cursor light reflection - only around cursor */}\n      {mousePosition && (\n        <motion.div\n          initial={{ opacity: 0 }}\n          animate={{ opacity: intensity }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: 0.3 }}\n          className=\"absolute inset-0 pointer-events-none\"\n        >\n          {/* Additional halo effect for extra glow */}\n          <div\n            className=\"absolute\"\n            style={{\n              left: mousePosition.x,\n              top: mousePosition.y,\n              width: `${radius * 2}px`,\n              height: `${radius * 2}px`,\n              transform: \"translate(-50%, -50%)\",\n              background:\n                \"radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, rgba(255, 215, 0, 0.3) 30%, transparent 70%)\",\n              filter: \"blur(40px)\",\n            }}\n          />\n        </motion.div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/uitripled/holographic-wall-shadcnui.tsx"
    }
  ]
}