{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "holographic",
  "title": "Holographic Scan Reveal",
  "description": "component for the Holographic Scan Reveal",
  "dependencies": [
    "next-themes",
    "framer-motion"
  ],
  "files": [
    {
      "path": "app/registry/animatedtext/components/hologram-text.tsx",
      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { motion } from \"framer-motion\"\nimport { useMemo } from \"react\"\nimport { useTheme } from \"next-themes\"\n\ntype Props = {\n  text?: string\n  scanDuration?: number\n  chromaJitter?: number\n}\n\nexport function HologramText({\n  text = \"SPECTRUM UI\",\n  scanDuration = 1800,\n  chromaJitter = 0.8\n}: Props) {\n  const chars = useMemo(() => text.split(\"\"), [text])\n  const { theme } = useTheme()\n\n  // Choose base and glow colors depending on mode\n  const baseColor = theme === \"dark\" ? \"#eee\" : \"#111\"\n  const glowLight = theme === \"dark\"\n    ? \"rgba(255,255,255,0.4)\"\n    : \"rgba(0,0,0,0.25)\"\n  const glowHeavy = theme === \"dark\"\n    ? \"rgba(255,255,255,0.2)\"\n    : \"rgba(0,0,0,0.15)\"\n\n  return (\n    <motion.div\n      className=\"relative\"\n      aria-label={text}\n      role=\"img\"\n      initial={{ opacity: 0, y: 10 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.5, ease: \"easeOut\" }}\n    >\n      <div className=\"flex select-none items-center justify-center gap-[0.04em] font-bold tracking-tight text-[clamp(32px,6vw,72px)]\">\n        {chars.map((c, i) => (\n          <span key={i} className=\"relative inline-block\">\n            <span\n              className=\"layer base\"\n              style={\n                {\n                  \"--i\": i,\n                  \"--scanMs\": `${scanDuration}ms`,\n                  \"--baseColor\": baseColor,\n                  \"--glowLight\": glowLight,\n                  \"--glowHeavy\": glowHeavy\n                } as React.CSSProperties\n              }\n            >\n              {c === \" \" ? \"\\u00A0\" : c}\n            </span>\n\n            <span\n              className=\"layer red\"\n              style={\n                {\n                  \"--i\": i,\n                  \"--jit\": chromaJitter,\n                  \"--scanMs\": `${scanDuration}ms`,\n                } as React.CSSProperties\n              }\n              aria-hidden=\"true\"\n            >\n              {c === \" \" ? \"\\u00A0\" : c}\n            </span>\n            <span\n              className=\"layer cyan\"\n              style={\n                {\n                  \"--i\": i,\n                  \"--jit\": chromaJitter,\n                  \"--scanMs\": `${scanDuration}ms`,\n                } as React.CSSProperties\n              }\n              aria-hidden=\"true\"\n            >\n              {c === \" \" ? \"\\u00A0\" : c}\n            </span>\n\n            <span\n              className=\"layer scanline\"\n              style={\n                {\n                  \"--i\": i,\n                  \"--scanMs\": `${scanDuration}ms`,\n                } as React.CSSProperties\n              }\n              aria-hidden=\"true\"\n            >\n              {c === \" \" ? \"\\u00A0\" : c}\n            </span>\n          </span>\n        ))}\n      </div>\n\n      <style jsx>{`\n        .layer {\n          position: absolute;\n          top: 0;\n          left: 0;\n          will-change: transform, filter, opacity, clip-path;\n        }\n        .base {\n          position: relative;\n          color: var(--baseColor);\n          display: inline-block;\n          animation: scan var(--scanMs) calc(var(--i) * 45ms) ease-out both,\n                     flicker var(--scanMs) calc(var(--i) * 45ms) steps(1) infinite;\n          text-shadow: 0 0 8px var(--glowLight), 0 0 16px var(--glowHeavy);\n        }\n\n        .red, .cyan {\n          display: inline-block;\n          color: transparent;\n          mix-blend-mode: screen;\n          opacity: 0;\n          animation:\n            chroma var(--scanMs) calc(var(--i) * 45ms) ease-out both,\n            jitter calc(var(--scanMs) * 0.8) calc(var(--i) * 45ms) ease-out both;\n        }\n        .red { text-shadow: 0 0 0 rgba(255, 60, 60, 0.95); }\n        .cyan { text-shadow: 0 0 0 rgba(60, 255, 255, 0.95); }\n\n        .scanline {\n          display: inline-block;\n          color: transparent;\n          background: linear-gradient(rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);\n          background-size: 100% 4px;\n          animation: scanline-anim var(--scanMs) calc(var(--i) * 45ms) ease-out both;\n          mix-blend-mode: overlay;\n          opacity: 0;\n        }\n\n        @keyframes scan {\n          0% {\n            color: transparent;\n            -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 50%, transparent 60%);\n            mask-image: linear-gradient(90deg, transparent 40%, #000 50%, transparent 60%);\n            -webkit-mask-size: 200% 100%;\n            mask-size: 200% 100%;\n            -webkit-mask-position: -100% 0;\n            mask-position: -100% 0;\n            letter-spacing: 0.04em;\n            filter: contrast(1) brightness(0.5);\n            transform: translateY(-4px);\n          }\n          60% {\n            color: var(--baseColor);\n            -webkit-mask-position: 100% 0;\n            mask-position: 100% 0;\n            letter-spacing: 0.005em;\n            filter: contrast(1.2) brightness(1.1);\n            transform: translateY(0);\n          }\n          100% {\n            color: var(--baseColor);\n            -webkit-mask-image: none;\n            mask-image: none;\n            letter-spacing: 0;\n            filter: none;\n            transform: translateY(0);\n          }\n        }\n        @keyframes chroma {\n          0% { opacity: 0; }\n          30% { opacity: 0.8; }\n          60% { opacity: 0.45; }\n          100% { opacity: 0; }\n        }\n        @keyframes jitter {\n          0% {\n            transform: translate(\n              calc((var(--jit) * 1px) * (cos(var(--i)))),\n              calc((var(--jit) * 1px) * (sin(var(--i))))\n            );\n            filter: blur(0.5px);\n          }\n          50% {\n            transform: translate(\n              calc((var(--jit) * 4px) * (cos(var(--i) * 3.1))),\n              calc((var(--jit) * 3px) * (sin(var(--i) * 2.6)))\n            );\n            filter: blur(1.2px);\n          }\n          100% {\n            transform: translate(0,0);\n            filter: blur(0);\n          }\n        }\n        @keyframes flicker {\n          0%, 100% { opacity: 1; }\n          2% { opacity: 0.9; }\n          4% { opacity: 1; }\n          6% { opacity: 0.95; }\n          8% { opacity: 1; }\n          10% { opacity: 0.9; }\n          12% { opacity: 1; }\n          14% { opacity: 0.92; }\n          16% { opacity: 1; }\n          18% { opacity: 0.98; }\n          20% { opacity: 1; }\n          22% { opacity: 0.9; }\n          24% { opacity: 1; }\n          26% { opacity: 0.95; }\n          28% { opacity: 1; }\n          30% { opacity: 0.9; }\n          32% { opacity: 1; }\n          34% { opacity: 0.92; }\n          36% { opacity: 1; }\n          38% { opacity: 0.98; }\n          40% { opacity: 1; }\n          42% { opacity: 0.9; }\n          44% { opacity: 1; }\n          46% { opacity: 0.95; }\n          48% { opacity: 1; }\n          50% { opacity: 0.9; }\n          52% { opacity: 1; }\n          54% { opacity: 0.92; }\n          56% { opacity: 1; }\n          58% { opacity: 0.98; }\n          60% { opacity: 1; }\n          62% { opacity: 0.9; }\n          64% { opacity: 1; }\n          66% { opacity: 0.95; }\n          68% { opacity: 1; }\n          70% { opacity: 0.9; }\n          72% { opacity: 1; }\n          74% { opacity: 0.92; }\n          76% { opacity: 1; }\n          78% { opacity: 0.98; }\n          80% { opacity: 1; }\n          82% { opacity: 0.9; }\n          84% { opacity: 1; }\n          86% { opacity: 0.95; }\n          88% { opacity: 1; }\n          90% { opacity: 0.9; }\n          92% { opacity: 1; }\n          94% { opacity: 0.92; }\n          96% { opacity: 1; }\n          98% { opacity: 0.98; }\n        }\n        @keyframes scanline-anim {\n          0% {\n            transform: translateY(-100%);\n            opacity: 0;\n          }\n          30% {\n            opacity: 0.6;\n          }\n          60% {\n            transform: translateY(100%);\n            opacity: 0.3;\n          }\n          100% {\n            opacity: 0;\n          }\n        }\n      `}</style>\n    </motion.div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/hologram-text.tsx"
    }
  ],
  "type": "registry:component"
}