{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "ReflectiveCard-TS-TW",
	"title": "ReflectiveCard",
	"description": "Card with dynamic webcam reflection and glare effects that respond to cursor movement.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "ReflectiveCard/ReflectiveCard.tsx",
			"content": "import React, { useEffect, useRef, useState } from 'react';\nimport { Fingerprint, User, Activity, Lock } from 'lucide-react';\n\ninterface ReflectiveCardProps {\n  blurStrength?: number;\n  color?: string;\n  metalness?: number;\n  roughness?: number;\n  overlayColor?: string;\n  displacementStrength?: number;\n  noiseScale?: number;\n  specularConstant?: number;\n  grayscale?: number;\n  glassDistortion?: number;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst ReflectiveCard: React.FC<ReflectiveCardProps> = ({\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<HTMLVideoElement>(null);\n  const [streamActive, setStreamActive] = useState(false);\n\n  useEffect(() => {\n    let stream: MediaStream | null = 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          setStreamActive(true);\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  } as React.CSSProperties;\n\n  return (\n    <div\n      className={`relative w-[320px] h-[500px] rounded-[20px] overflow-hidden bg-[#1a1a1a] shadow-[0_20px_50px_rgba(0,0,0,0.5),0_0_0_1px_rgba(255,255,255,0.1)_inset] isolate font-sans ${className}`}\n      style={{ ...style, ...cssVariables }}\n    >\n      <svg className=\"absolute w-0 h-0 pointer-events-none opacity-0\" 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\n        ref={videoRef}\n        autoPlay\n        playsInline\n        muted\n        className=\"absolute top-0 left-0 w-full h-full object-cover scale-[1.2] -scale-x-100 z-0 opacity-90 transition-[filter] duration-300\"\n        style={{\n          filter:\n            'saturate(var(--saturation, 0)) contrast(120%) brightness(110%) blur(var(--blur-strength, 12px)) url(#metallic-displacement)'\n        }}\n      />\n\n      <div className=\"absolute inset-0 z-10 opacity-[var(--roughness,0.4)] pointer-events-none bg-[url('data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20200%20200%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cfilter%20id%3D%27noiseFilter%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.8%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url(%23noiseFilter)%27%2F%3E%3C%2Fsvg%3E')] mix-blend-overlay\" />\n\n      <div className=\"absolute inset-0 z-20 bg-[linear-gradient(135deg,rgba(255,255,255,0.4)_0%,rgba(255,255,255,0.1)_40%,rgba(255,255,255,0)_50%,rgba(255,255,255,0.1)_60%,rgba(255,255,255,0.3)_100%)] pointer-events-none mix-blend-overlay opacity-[var(--metalness,1)]\" />\n\n      <div className=\"absolute inset-0 rounded-[20px] p-[1px] bg-[linear-gradient(135deg,rgba(255,255,255,0.8)_0%,rgba(255,255,255,0.2)_50%,rgba(255,255,255,0.6)_100%)] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] [mask-composite:exclude] z-20 pointer-events-none\" />\n\n      <div className=\"relative z-10 h-full flex flex-col justify-between p-8 text-[var(--text-color,white)] bg-[var(--overlay-color,rgba(255,255,255,0.05))]\">\n        <div className=\"flex justify-between items-center border-b border-white/20 pb-4\">\n          <div className=\"flex items-center gap-1.5 text-[10px] font-bold tracking-[0.1em] px-2 py-1 bg-white/10 rounded border border-white/20\">\n            <Lock size={14} className=\"opacity-80\" />\n            <span>SECURE ACCESS</span>\n          </div>\n          <Activity className=\"opacity-80\" size={20} />\n        </div>\n\n        <div className=\"flex-1 flex flex-col justify-end items-center text-center gap-6 mb-8\">\n          <div className=\"text-center\">\n            <h2 className=\"text-2xl font-bold tracking-[0.05em] m-0 mb-2 drop-shadow-md\">ALEXANDER DOE</h2>\n            <p className=\"text-xs tracking-[0.2em] opacity-70 m-0 uppercase\">SENIOR DEVELOPER</p>\n          </div>\n        </div>\n\n        <div className=\"flex justify-between items-end border-t border-white/20 pt-6\">\n          <div className=\"flex flex-col gap-1\">\n            <span className=\"text-[9px] tracking-[0.1em] opacity-60\">ID NUMBER</span>\n            <span className=\"font-mono text-sm tracking-[0.05em]\">8901-2345-6789</span>\n          </div>\n          <div className=\"opacity-40\">\n            <Fingerprint size={32} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ReflectiveCard;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"lucide-react@^0.542.0"
	]
}