{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "ReflectiveCard-JS-CSS",
	"title": "ReflectiveCard",
	"description": "Card with dynamic webcam reflection and glare effects that respond to cursor movement.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:file",
			"path": "ReflectiveCard.css",
			"target": "@components/ReflectiveCard.css",
			"content": ".reflective-card-container {\n  position: relative;\n  width: 320px;\n  height: 500px;\n  border-radius: 20px;\n  overflow: hidden;\n  background: #1a1a1a;\n  box-shadow:\n    0 20px 50px rgba(0, 0, 0, 0.5),\n    0 0 0 1px rgba(255, 255, 255, 0.1) inset;\n  isolation: isolate;\n  font-family: 'Inter', sans-serif;\n}\n\n.reflective-svg-filters {\n  position: absolute;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n  opacity: 0;\n}\n\n.reflective-video {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transform: scale(1.2) scaleX(-1);\n\n  filter: saturate(var(--saturation, 0)) contrast(120%) brightness(110%) blur(var(--blur-strength, 12px))\n    url(#metallic-displacement);\n\n  z-index: 0;\n  opacity: 0.9;\n  transition: filter 0.3s ease;\n}\n\n.reflective-noise {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  opacity: var(--roughness, 0.4);\n  pointer-events: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n  mix-blend-mode: overlay;\n}\n\n.reflective-sheen {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  background: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 0.4) 0%,\n    rgba(255, 255, 255, 0.1) 40%,\n    rgba(255, 255, 255, 0) 50%,\n    rgba(255, 255, 255, 0.1) 60%,\n    rgba(255, 255, 255, 0.3) 100%\n  );\n  pointer-events: none;\n  mix-blend-mode: overlay;\n  opacity: var(--metalness, 1);\n}\n\n.reflective-border {\n  position: absolute;\n  inset: 0;\n  border-radius: 20px;\n  padding: 1px;\n  background: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 0.8) 0%,\n    rgba(255, 255, 255, 0.2) 50%,\n    rgba(255, 255, 255, 0.6) 100%\n  );\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  mask-composite: exclude;\n  z-index: 20;\n  pointer-events: none;\n}\n\n.reflective-content {\n  position: relative;\n  z-index: 10;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 32px;\n  color: var(--text-color, white);\n  background: var(--overlay-color, rgba(255, 255, 255, 0.05));\n}\n\n.card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n  padding-bottom: 16px;\n}\n\n.security-badge {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  padding: 4px 8px;\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 4px;\n  border: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.status-icon {\n  opacity: 0.8;\n}\n\n.card-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: end;\n  align-items: center;\n  text-align: center;\n  gap: 24px;\n  margin-bottom: 2em;\n}\n\n.user-name {\n  font-size: 24px;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  margin: 0 0 8px 0;\n  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n.user-role {\n  font-size: 12px;\n  letter-spacing: 0.2em;\n  opacity: 0.7;\n  margin: 0;\n  text-transform: uppercase;\n}\n\n.card-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  border-top: 1px solid rgba(255, 255, 255, 0.2);\n  padding-top: 24px;\n}\n\n.id-section {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.label {\n  font-size: 9px;\n  letter-spacing: 0.1em;\n  opacity: 0.6;\n}\n\n.value {\n  font-family: monospace;\n  font-size: 14px;\n  letter-spacing: 0.05em;\n}\n\n.fingerprint-icon {\n  opacity: 0.4;\n}\n"
		},
		{
			"type": "registry:component",
			"path": "ReflectiveCard.jsx",
			"content": "import { useEffect, useRef } from 'react';\nimport './ReflectiveCard.css';\nimport { Fingerprint, Activity, Lock } from 'lucide-react';\n\nconst ReflectiveCard = ({\n  blurStrength = 12,\n  color = 'white',\n  metalness = 1,\n  roughness = 0.4,\n  overlayColor = 'rgba(255, 255, 255, 0.1)',\n  displacementStrength = 20,\n  noiseScale = 1,\n  specularConstant = 1.2,\n  grayscale = 1,\n  glassDistortion = 0,\n  className = '',\n  style = {}\n}) => {\n  const videoRef = useRef(null);\n\n  useEffect(() => {\n    let stream = null;\n\n    const startWebcam = async () => {\n      try {\n        stream = await navigator.mediaDevices.getUserMedia({\n          video: {\n            width: { ideal: 640 },\n            height: { ideal: 480 },\n            facingMode: 'user'\n          }\n        });\n\n        if (videoRef.current) {\n          videoRef.current.srcObject = stream;\n        }\n      } catch (err) {\n        console.error('Error accessing webcam:', err);\n      }\n    };\n\n    startWebcam();\n\n    return () => {\n      if (stream) {\n        stream.getTracks().forEach(track => track.stop());\n      }\n    };\n  }, []);\n\n  const baseFrequency = 0.03 / Math.max(0.1, noiseScale);\n  const saturation = 1 - Math.max(0, Math.min(1, grayscale));\n\n  const cssVariables = {\n    '--blur-strength': `${blurStrength}px`,\n    '--metalness': metalness,\n    '--roughness': roughness,\n    '--overlay-color': overlayColor,\n    '--text-color': color,\n    '--saturation': saturation\n  };\n\n  return (\n    <div className={`reflective-card-container ${className}`} style={{ ...style, ...cssVariables }}>\n      <svg className=\"reflective-svg-filters\" aria-hidden=\"true\">\n        <defs>\n          <filter id=\"metallic-displacement\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n            <feTurbulence type=\"turbulence\" baseFrequency={baseFrequency} numOctaves=\"2\" result=\"noise\" />\n            <feColorMatrix in=\"noise\" type=\"luminanceToAlpha\" result=\"noiseAlpha\" />\n            <feDisplacementMap\n              in=\"SourceGraphic\"\n              in2=\"noise\"\n              scale={displacementStrength}\n              xChannelSelector=\"R\"\n              yChannelSelector=\"G\"\n              result=\"rippled\"\n            />\n            <feSpecularLighting\n              in=\"noiseAlpha\"\n              surfaceScale={displacementStrength}\n              specularConstant={specularConstant}\n              specularExponent=\"20\"\n              lightingColor=\"#ffffff\"\n              result=\"light\"\n            >\n              <fePointLight x=\"0\" y=\"0\" z=\"300\" />\n            </feSpecularLighting>\n            <feComposite in=\"light\" in2=\"rippled\" operator=\"in\" result=\"light-effect\" />\n            <feBlend in=\"light-effect\" in2=\"rippled\" mode=\"screen\" result=\"metallic-result\" />\n            <feColorMatrix\n              in=\"SourceAlpha\"\n              type=\"matrix\"\n              values=\"0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0\"\n              result=\"solidAlpha\"\n            />\n            <feMorphology in=\"solidAlpha\" operator=\"erode\" radius=\"45\" result=\"erodedAlpha\" />\n            <feGaussianBlur in=\"erodedAlpha\" stdDeviation=\"10\" result=\"blurredMap\" />\n            <feComponentTransfer in=\"blurredMap\" result=\"glassMap\">\n              <feFuncA type=\"linear\" slope=\"0.5\" intercept=\"0\" />\n            </feComponentTransfer>\n            <feDisplacementMap\n              in=\"metallic-result\"\n              in2=\"glassMap\"\n              scale={glassDistortion}\n              xChannelSelector=\"A\"\n              yChannelSelector=\"A\"\n              result=\"final\"\n            />\n          </filter>\n        </defs>\n      </svg>\n\n      <video ref={videoRef} autoPlay playsInline muted className=\"reflective-video\" />\n\n      <div className=\"reflective-noise\" />\n      <div className=\"reflective-sheen\" />\n      <div className=\"reflective-border\" />\n\n      <div className=\"reflective-content\">\n        <div className=\"card-header\">\n          <div className=\"security-badge\">\n            <Lock size={14} className=\"security-icon\" />\n            <span>SECURE ACCESS</span>\n          </div>\n          <Activity className=\"status-icon\" size={20} />\n        </div>\n\n        <div className=\"card-body\">\n          <div className=\"user-info\">\n            <h2 className=\"user-name\">ALEXANDER DOE</h2>\n            <p className=\"user-role\">SENIOR DEVELOPER</p>\n          </div>\n        </div>\n\n        <div className=\"card-footer\">\n          <div className=\"id-section\">\n            <span className=\"label\">ID NUMBER</span>\n            <span className=\"value\">8901-2345-6789</span>\n          </div>\n          <div className=\"fingerprint-section\">\n            <Fingerprint size={32} className=\"fingerprint-icon\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ReflectiveCard;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"lucide-react@^0.542.0"
	]
}