{
  "slug": "pixel-card",
  "name": "Pixel Card",
  "description": "Interactive card with synchronized harmonic pixel matrix, cursor proximity excitation, and 3D perspective tilt.",
  "summary": "An interactive card primitive combining a devicePixelRatio-scaled 2D canvas pixel matrix with wave propagation, pointer proximity excitation, a radial spotlight and GSAP quickTo tilt.",
  "category": "cards",
  "tags": [
    "card",
    "pixel",
    "canvas",
    "interactive",
    "3d-tilt",
    "gsap",
    "motion",
    "matrix",
    "spotlight",
    "shimmer"
  ],
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "gsap",
    "@gsap/react"
  ],
  "version": "1.0.0",
  "createdDate": "2026-09-24",
  "updatedDate": "2026-09-24",
  "interactive": true,
  "supportsColor": true,
  "highlights": [
    "Hardware-accelerated sub-pixel 2D canvas with automatic devicePixelRatio Retina scaling",
    "Harmonic wavefront propagation synchronizing pixel emergence directly with cursor coordinates",
    "Cursor proximity excitation boosting shimmer within 120 to 130px depending on the pattern",
    "Buttery GSAP quickTo 3D perspective rotation (rotationX, rotationY, scale) with zero-cost unmount cleanup",
    "6 variants (default, blue, yellow, pink, purple, emerald), overridable via colors, gap, speed and spotlightColor",
    "Zero idle CPU/GPU consumption via automatic ticker sleeping when unhovered"
  ],
  "anatomy": [
    "<div> (Container with transform-style: preserve-3d and isolate; add perspective on a parent for depth)",
    "<div> (Radial Spotlight: dynamic cursor-tracking light glow)",
    "<div> (Luminous Border Sheen: masked gradient highlight tracking pointer position)",
    "<div> (Holographic Glare: diagonal reflection wash)",
    "<canvas> (Sub-pixel calibrated 2D canvas rendering animated matrix pixels)",
    "<div> (Content Layer: elevated z-10 container with translateZ(18px))"
  ],
  "physics": {
    "engine": "GSAP Ticker & Harmonic Canvas Wavefront",
    "description": "Synchronized trigonometric distance-decay wave propagation and Euler size interpolation running on GSAP 60/120fps display ticker.",
    "parameters": [
      {
        "label": "Ticker Engine",
        "value": "GSAP Display Ticker"
      },
      {
        "label": "Tilt Damping",
        "value": "gsap.quickTo (duration 0.45s, power2.out)"
      },
      {
        "label": "Max 3D Tilt",
        "value": "6deg default (maxTilt)"
      },
      {
        "label": "Wavefront Velocity",
        "value": "320px/s radial expansion"
      },
      {
        "label": "Proximity Halo",
        "value": "120 to 130px depending on pattern"
      },
      {
        "label": "Retina Calibration",
        "value": "devicePixelRatio capped at 2x"
      },
      {
        "label": "Idle Overhead",
        "value": "0ms / Sleeping ticker"
      }
    ]
  },
  "accessibility": {
    "role": "region",
    "aria": "The card is focusable unless noFocus is set, in which case it is a plain container out of the tab order. It takes role=\"region\" only when you pass aria-label or aria-labelledby, so give it a name to expose it as a landmark. The pixel canvas is decorative and pointer-events-none.",
    "reducedMotion": "With prefers-reduced-motion, the tilt and the expanding wavefront are disabled so pixels appear at once; the pixel shimmer still animates while hovered or focused.",
    "keyboard": [
      {
        "key": "Tab / Shift+Tab",
        "description": "Focus the card and start the wave from its center. Skipped when noFocus is set (the pink variant sets it by default)."
      }
    ]
  },
  "guidelines": {
    "recommended": [
      "Feature highlight cards and interactive service matrices in high-aesthetic developer landing pages",
      "Interactive pricing plan modules and tier selection cards",
      "Web3, cyber-security, telemetry, and AI agent interface cards"
    ],
    "bestPractices": [
      "Choose variant colors that match your theme primary accent for brand cohesion",
      "Place interactive child elements inside the card without worrying about canvas interference",
      "Keep grid gap between 5px and 8px for the ideal balance between density and performance"
    ]
  },
  "props": [
    {
      "name": "variant",
      "type": "\"default\" | \"blue\" | \"yellow\" | \"pink\" | \"purple\" | \"emerald\"",
      "defaultValue": "\"default\"",
      "description": "Visual color and lighting theme preset for pixels, spotlight, and border glow."
    },
    {
      "name": "pattern",
      "type": "\"wave\" | \"matrix\" | \"scan\" | \"cross\"",
      "defaultValue": "\"wave\"",
      "description": "Shape of the pixel animation that runs while the card is hovered or focused."
    },
    {
      "name": "noise",
      "type": "number",
      "defaultValue": "0",
      "description": "Random variation applied to pixel size and opacity. 0 disables it."
    },
    {
      "name": "gap",
      "type": "number",
      "defaultValue": "variant preset",
      "description": "Pixel grid spacing in CSS pixels. Defaults to the variant preset (6 or 7)."
    },
    {
      "name": "speed",
      "type": "number",
      "defaultValue": "variant preset",
      "description": "Animation speed. Defaults to the variant preset (20 to 30)."
    },
    {
      "name": "colors",
      "type": "string",
      "defaultValue": "undefined",
      "description": "Comma-separated list of hex or rgb color strings overriding the variant pixel palette."
    },
    {
      "name": "enableTilt",
      "type": "boolean",
      "defaultValue": "true",
      "description": "Enables interactive 3D perspective tilt following cursor coordinates."
    },
    {
      "name": "maxTilt",
      "type": "number",
      "defaultValue": "6",
      "description": "Maximum tilt angle in degrees along X and Y axes."
    },
    {
      "name": "enableSpotlight",
      "type": "boolean",
      "defaultValue": "true",
      "description": "Enables dynamic cursor-following radial spotlight glow."
    },
    {
      "name": "spotlightColor",
      "type": "string",
      "defaultValue": "undefined",
      "description": "Custom CSS color for the radial spotlight glow center."
    },
    {
      "name": "enableGlare",
      "type": "boolean",
      "defaultValue": "true",
      "description": "Enables diagonal holographic sheen reflection wash across the card surface."
    },
    {
      "name": "noFocus",
      "type": "boolean",
      "defaultValue": "variant preset",
      "description": "Removes the card from the tab order and skips the focus animation. Defaults to the variant preset (true only for pink)."
    },
    {
      "name": "className",
      "type": "string",
      "defaultValue": "undefined",
      "description": "Additional CSS classes to customize card dimensions, borders, and paddings."
    },
    {
      "name": "children",
      "type": "React.ReactNode",
      "defaultValue": "undefined",
      "description": "Interactive card content, headlines, telemetry, or badges elevated in 3D parallax space."
    }
  ],
  "usage": "import { PixelCard } from \"@/components/ui/pixel-card\";\n\nexport function PixelCardDemo() {\n  return (\n    <PixelCard variant=\"blue\" className=\"h-72 w-64\" aria-label=\"Pixel card\">\n      <h3 className=\"text-lg font-semibold\">Pixel Card</h3>\n    </PixelCard>\n  );\n}",
  "files": [
    {
      "name": "pixel-card.tsx",
      "path": "registry/ui/pixel-card.tsx",
      "code": "\"use client\";\n\nimport React, { useRef, useCallback, useEffect } from \"react\";\nimport gsap from \"gsap\";\nimport { useGSAP } from \"@gsap/react\";\nimport { cn } from \"@/lib/utils\";\n\nif (typeof window !== \"undefined\") {\n  gsap.registerPlugin(useGSAP);\n}\n\nexport type PixelCardVariant =\n  | \"default\"\n  | \"blue\"\n  | \"yellow\"\n  | \"pink\"\n  | \"purple\"\n  | \"emerald\";\n\nexport type PixelCardPattern = \"wave\" | \"matrix\" | \"scan\" | \"cross\";\n\nexport interface PixelCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: PixelCardVariant;\n  pattern?: PixelCardPattern;\n  noise?: number;\n  gap?: number;\n  speed?: number;\n  colors?: string;\n  noFocus?: boolean;\n  enableTilt?: boolean;\n  maxTilt?: number;\n  enableSpotlight?: boolean;\n  spotlightColor?: string;\n  enableGlare?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n}\n\ninterface PixelData {\n  x: number;\n  y: number;\n  color: string;\n  size: number;\n  alpha: number;\n  maxSize: number;\n  phase: number;\n}\n\ninterface VariantConfig {\n  activeColor: string;\n  spotlight: string;\n  borderColor: string;\n  gap: number;\n  speed: number;\n  colors: string;\n  noFocus: boolean;\n}\n\nconst VARIANTS: Record<PixelCardVariant, VariantConfig> = {\n  default: {\n    activeColor: \"rgba(56, 189, 248, 0.08)\",\n    spotlight: \"rgba(56, 189, 248, 0.07)\",\n    borderColor: \"rgba(56, 189, 248, 0.25)\",\n    gap: 6,\n    speed: 25,\n    colors: \"#f8fafc,#cbd5e1,#94a3b8,#38bdf8\",\n    noFocus: false,\n  },\n  blue: {\n    activeColor: \"rgba(14, 165, 233, 0.1)\",\n    spotlight: \"rgba(56, 189, 248, 0.09)\",\n    borderColor: \"rgba(56, 189, 248, 0.3)\",\n    gap: 7,\n    speed: 22,\n    colors: \"#e0f2fe,#7dd3fc,#38bdf8,#0ea5e9\",\n    noFocus: false,\n  },\n  yellow: {\n    activeColor: \"rgba(234, 179, 8, 0.08)\",\n    spotlight: \"rgba(250, 204, 21, 0.07)\",\n    borderColor: \"rgba(250, 204, 21, 0.28)\",\n    gap: 6,\n    speed: 20,\n    colors: \"#fef08a,#fde047,#facc15,#eab308\",\n    noFocus: false,\n  },\n  pink: {\n    activeColor: \"rgba(244, 63, 94, 0.1)\",\n    spotlight: \"rgba(244, 63, 94, 0.08)\",\n    borderColor: \"rgba(251, 113, 133, 0.28)\",\n    gap: 6,\n    speed: 30,\n    colors: \"#fecdd3,#fda4af,#fb7185,#f43f5e\",\n    noFocus: true,\n  },\n  purple: {\n    activeColor: \"rgba(168, 85, 247, 0.1)\",\n    spotlight: \"rgba(192, 132, 252, 0.08)\",\n    borderColor: \"rgba(192, 132, 252, 0.28)\",\n    gap: 6,\n    speed: 24,\n    colors: \"#f3e8ff,#d8b4fe,#c084fc,#a855f7\",\n    noFocus: false,\n  },\n  emerald: {\n    activeColor: \"rgba(16, 185, 129, 0.1)\",\n    spotlight: \"rgba(52, 211, 153, 0.08)\",\n    borderColor: \"rgba(52, 211, 153, 0.28)\",\n    gap: 6,\n    speed: 22,\n    colors: \"#d1fae5,#6ee7b7,#34d399,#10b981\",\n    noFocus: false,\n  },\n};\n\nfunction getPointerPosition(\n  card: HTMLDivElement,\n  event: React.MouseEvent<HTMLDivElement>,\n) {\n  const rect = card.getBoundingClientRect();\n  return {\n    x: rect.width > 0\n      ? (event.clientX - rect.left) * card.offsetWidth / rect.width\n      : 0,\n    y: rect.height > 0\n      ? (event.clientY - rect.top) * card.offsetHeight / rect.height\n      : 0,\n  };\n}\n\nexport const PixelCard = React.forwardRef<HTMLDivElement, PixelCardProps>(\n  (\n    {\n      variant = \"default\",\n      pattern = \"wave\",\n      noise = 0,\n      gap,\n      speed,\n      colors,\n      noFocus,\n      enableTilt = true,\n      maxTilt = 6,\n      enableSpotlight = true,\n      spotlightColor,\n      enableGlare = true,\n      className,\n      children,\n      onMouseMove,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref,\n  ) => {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const canvasRef = useRef<HTMLCanvasElement | null>(null);\n    const pixelsRef = useRef<PixelData[]>([]);\n    const isHoveredRef = useRef(false);\n    const animatingRef = useRef(false);\n\n    const pointerRef = useRef({\n      x: 0,\n      y: 0,\n      entryTime: 0,\n    });\n\n    const targetPointerRef = useRef({\n      x: 0,\n      y: 0,\n    });\n\n    const rotXRef = useRef<gsap.QuickToFunc | null>(null);\n    const rotYRef = useRef<gsap.QuickToFunc | null>(null);\n    const scaleRef = useRef<gsap.QuickToFunc | null>(null);\n\n    const isReducedMotion = useRef(\n      typeof window !== \"undefined\" &&\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches,\n    ).current;\n\n    const variantCfg = VARIANTS[variant] || VARIANTS.default;\n    const finalGap = gap ?? variantCfg.gap;\n    const finalSpeed = speed ?? variantCfg.speed;\n    const finalColors = colors ?? variantCfg.colors;\n    const finalNoFocus = noFocus ?? variantCfg.noFocus;\n    const finalSpotlightColor = spotlightColor ?? variantCfg.spotlight;\n\n    const initPixels = useCallback(() => {\n      const container = containerRef.current;\n      const canvas = canvasRef.current;\n      if (!container || !canvas) return;\n\n      const width = container.offsetWidth;\n      const height = container.offsetHeight;\n      if (width <= 0 || height <= 0) return;\n\n      const dpr = Math.min(\n        typeof window !== \"undefined\" ? window.devicePixelRatio || 1 : 1,\n        2,\n      );\n      canvas.width = Math.floor(width * dpr);\n      canvas.height = Math.floor(height * dpr);\n      canvas.style.width = `${width}px`;\n      canvas.style.height = `${height}px`;\n\n      const ctx = canvas.getContext(\"2d\");\n      if (!ctx) return;\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n      const step = Math.max(4, parseInt(finalGap.toString(), 10) || 6);\n      const cols = Math.floor(width / step);\n      const rows = Math.floor(height / step);\n      const xOffset = Math.floor((width - (cols - 1) * step) / 2);\n      const yOffset = Math.floor((height - (rows - 1) * step) / 2);\n\n      const colorList = finalColors\n        .split(\",\")\n        .map((c) => c.trim())\n        .filter(Boolean);\n      const pixelGrid: PixelData[] = [];\n\n      for (let col = 0; col < cols; col++) {\n        for (let row = 0; row < rows; row++) {\n          const x = xOffset + col * step;\n          const y = yOffset + row * step;\n          const color =\n            colorList[Math.floor(Math.random() * colorList.length)] ||\n            \"#38bdf8\";\n          const maxSize = 1.1 + Math.random() * 1.3;\n          pixelGrid.push({\n            x,\n            y,\n            color,\n            size: 0,\n            alpha: 0,\n            maxSize,\n            phase: Math.random() * Math.PI * 2,\n          });\n        }\n      }\n      pixelsRef.current = pixelGrid;\n    }, [finalColors, finalGap]);\n\n    const tick = useCallback(\n      (time: number, deltaTime: number) => {\n        const canvas = canvasRef.current;\n        if (!canvas) return;\n        const ctx = canvas.getContext(\"2d\");\n        if (!ctx) return;\n\n        const width = parseFloat(canvas.style.width) || canvas.width;\n        const height = parseFloat(canvas.style.height) || canvas.height;\n\n        const isHovered = isHoveredRef.current;\n        const pointer = pointerRef.current;\n        const targetPointer = targetPointerRef.current;\n\n        pointer.x += (targetPointer.x - pointer.x) * 0.15;\n        pointer.y += (targetPointer.y - pointer.y) * 0.15;\n\n        const pixels = pixelsRef.current;\n        const dt = Math.min(deltaTime, 33.33);\n        const factor = Math.min(1, 0.12 * (dt / 16.67));\n\n        ctx.clearRect(0, 0, width, height);\n\n        let hasVisiblePixels = false;\n        const elapsed = time - pointer.entryTime;\n        const waveRadius = isReducedMotion ? 99999 : elapsed * 320;\n        const effectiveSpeed = finalSpeed * 0.05;\n\n        for (let i = 0; i < pixels.length; i++) {\n          const p = pixels[i];\n          let targetSize = 0;\n          let targetAlpha = 0;\n\n          if (isHovered) {\n            const dx = p.x - pointer.x;\n            const dy = p.y - pointer.y;\n            const dist = Math.sqrt(dx * dx + dy * dy);\n\n            if (pattern === \"wave\") {\n              if (dist <= waveRadius) {\n                const waveIntensity = Math.min(\n                  1,\n                  Math.max(0, (waveRadius - dist) / 45),\n                );\n                const proximity = Math.max(0, 1 - dist / 130);\n                const proximityBoost = proximity * proximity;\n                const harmonicWave =\n                  Math.sin(time * effectiveSpeed + p.phase) * 0.5 + 0.5;\n                const pulse =\n                  Math.sin(time * (effectiveSpeed * 1.2) - dist * 0.03) * 0.5 +\n                  0.5;\n\n                targetSize =\n                  p.maxSize *\n                  waveIntensity *\n                  (0.3 + 0.55 * harmonicWave + proximityBoost * 0.65);\n                targetAlpha = Math.min(\n                  1,\n                  0.2 + 0.65 * pulse + proximityBoost * 0.4,\n                );\n              }\n            } else if (pattern === \"matrix\") {\n              const colOffset = Math.sin(p.x * 0.08) * 120;\n              const streamY =\n                ((time * (effectiveSpeed * 160) + colOffset) % (height + 120)) -\n                60;\n              const streamDist = Math.abs(p.y - streamY);\n              const streamIntensity = Math.max(0, 1 - streamDist / 60);\n              const proximity = Math.max(0, 1 - dist / 120);\n              const pulse =\n                Math.sin(time * (effectiveSpeed * 2) + p.phase) * 0.5 + 0.5;\n\n              targetSize =\n                p.maxSize * (0.2 + 0.8 * streamIntensity + proximity * 0.5);\n              targetAlpha = Math.min(\n                1,\n                0.2 + 0.8 * streamIntensity * pulse + proximity * 0.4,\n              );\n            } else if (pattern === \"scan\") {\n              const scanAngle = time * (effectiveSpeed * 0.9);\n              const cx = width / 2;\n              const cy = height / 2;\n              const relX = p.x - cx;\n              const relY = p.y - cy;\n              const beamDist = Math.abs(\n                relX * Math.cos(scanAngle) + relY * Math.sin(scanAngle),\n              );\n              const beamIntensity = Math.max(0, 1 - beamDist / 45);\n              const proximity = Math.max(0, 1 - dist / 120);\n\n              targetSize =\n                p.maxSize * (0.25 + 0.75 * beamIntensity + proximity * 0.5);\n              targetAlpha = Math.min(\n                1,\n                0.2 + 0.8 * beamIntensity + proximity * 0.4,\n              );\n            } else if (pattern === \"cross\") {\n              const lineDist = Math.min(Math.abs(dx), Math.abs(dy));\n              const lineIntensity = Math.max(0, 1 - lineDist / 32);\n              const proximity = Math.max(0, 1 - dist / 130);\n              const pulse =\n                Math.sin(time * (effectiveSpeed * 1.5) - dist * 0.035) * 0.5 +\n                0.5;\n\n              targetSize =\n                p.maxSize * (0.25 + 0.75 * lineIntensity + proximity * 0.5);\n              targetAlpha = Math.min(\n                1,\n                0.2 + 0.8 * lineIntensity * pulse + proximity * 0.4,\n              );\n            }\n\n            if (noise > 0) {\n              const noiseSeed =\n                Math.sin(p.x * 12.9898 + p.y * 78.233 + time * 14) * 43758.5453;\n              const pseudoRand = noiseSeed - Math.floor(noiseSeed);\n              const noiseDelta = (pseudoRand - 0.5) * noise * 1.1;\n              targetSize = Math.max(0, targetSize * (1 + noiseDelta));\n              targetAlpha = Math.min(\n                1,\n                Math.max(0, targetAlpha * (1 + noiseDelta * 0.7)),\n              );\n            }\n          }\n\n          p.size += (targetSize - p.size) * factor;\n          p.alpha += (targetAlpha - p.alpha) * factor;\n\n          if (!isHovered && p.size < 0.05) {\n            p.size = 0;\n            p.alpha = 0;\n          }\n\n          if (p.size > 0.04 && p.alpha > 0.01) {\n            hasVisiblePixels = true;\n            const offset = (p.maxSize - p.size) * 0.5;\n            ctx.globalAlpha = Math.min(1, Math.max(0, p.alpha));\n            ctx.fillStyle = p.color;\n            ctx.fillRect(p.x + offset, p.y + offset, p.size, p.size);\n          }\n        }\n\n        if (!isHovered && !hasVisiblePixels) {\n          animatingRef.current = false;\n          gsap.ticker.remove(tick);\n          ctx.clearRect(0, 0, width, height);\n        }\n      },\n      [finalSpeed, isReducedMotion, noise, pattern],\n    );\n\n    const startAnimation = useCallback(() => {\n      if (!animatingRef.current) {\n        animatingRef.current = true;\n        gsap.ticker.add(tick);\n      }\n    }, [tick]);\n\n    useGSAP(\n      () => {\n        const card = containerRef.current;\n        if (!card) return;\n\n        if (isReducedMotion || !enableTilt) return;\n\n        rotXRef.current = gsap.quickTo(card, \"rotationX\", {\n          duration: 0.45,\n          ease: \"power2.out\",\n        });\n        rotYRef.current = gsap.quickTo(card, \"rotationY\", {\n          duration: 0.45,\n          ease: \"power2.out\",\n        });\n        scaleRef.current = gsap.quickTo(card, \"scale\", {\n          duration: 0.45,\n          ease: \"power2.out\",\n        });\n\n        return () => {\n          rotXRef.current = null;\n          rotYRef.current = null;\n          scaleRef.current = null;\n          animatingRef.current = false;\n          gsap.ticker.remove(tick);\n        };\n      },\n      {\n        scope: containerRef,\n        dependencies: [enableTilt, isReducedMotion, tick],\n      },\n    );\n\n    useEffect(() => {\n      initPixels();\n\n      const container = containerRef.current;\n      if (!container) return;\n\n      const observer = new ResizeObserver(() => {\n        initPixels();\n      });\n      observer.observe(container);\n\n      return () => {\n        observer.disconnect();\n        animatingRef.current = false;\n        gsap.ticker.remove(tick);\n      };\n    }, [initPixels, tick]);\n\n    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n      const card = containerRef.current;\n      if (!card) return;\n\n      const { x, y } = getPointerPosition(card, e);\n\n      targetPointerRef.current.x = x;\n      targetPointerRef.current.y = y;\n\n      card.style.setProperty(\"--pointer-x\", `${x}px`);\n      card.style.setProperty(\"--pointer-y\", `${y}px`);\n\n      if (\n        enableTilt &&\n        !isReducedMotion &&\n        rotXRef.current &&\n        rotYRef.current &&\n        scaleRef.current\n      ) {\n        const nx = x / (card.offsetWidth || 1) * 2 - 1;\n        const ny = y / (card.offsetHeight || 1) * 2 - 1;\n        const clampedX = Math.max(-1, Math.min(1, nx));\n        const clampedY = Math.max(-1, Math.min(1, ny));\n\n        rotXRef.current(-clampedY * maxTilt);\n        rotYRef.current(clampedX * maxTilt);\n        scaleRef.current(1.008);\n      }\n\n      onMouseMove?.(e);\n    };\n\n    const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n      const card = containerRef.current;\n      if (!card) return;\n\n      const { x, y } = getPointerPosition(card, e);\n\n      pointerRef.current.x = x;\n      pointerRef.current.y = y;\n      targetPointerRef.current.x = x;\n      targetPointerRef.current.y = y;\n      pointerRef.current.entryTime = gsap.ticker.time;\n      isHoveredRef.current = true;\n\n      card.style.setProperty(\"--pointer-x\", `${x}px`);\n      card.style.setProperty(\"--pointer-y\", `${y}px`);\n      card.style.setProperty(\"--spotlight-opacity\", \"1\");\n\n      startAnimation();\n      onMouseEnter?.(e);\n    };\n\n    const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n      isHoveredRef.current = false;\n      const card = containerRef.current;\n      if (card) {\n        card.style.setProperty(\"--spotlight-opacity\", \"0\");\n      }\n\n      if (\n        enableTilt &&\n        !isReducedMotion &&\n        rotXRef.current &&\n        rotYRef.current &&\n        scaleRef.current\n      ) {\n        rotXRef.current(0);\n        rotYRef.current(0);\n        scaleRef.current(1);\n      }\n\n      onMouseLeave?.(e);\n    };\n\n    const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {\n      if (\n        finalNoFocus ||\n        (e.relatedTarget && e.currentTarget.contains(e.relatedTarget as Node))\n      ) {\n        return;\n      }\n\n      const card = containerRef.current;\n      if (card) {\n        const cx = card.offsetWidth / 2;\n        const cy = card.offsetHeight / 2;\n        pointerRef.current.x = cx;\n        pointerRef.current.y = cy;\n        targetPointerRef.current.x = cx;\n        targetPointerRef.current.y = cy;\n        pointerRef.current.entryTime = gsap.ticker.time;\n\n        card.style.setProperty(\"--pointer-x\", `${cx}px`);\n        card.style.setProperty(\"--pointer-y\", `${cy}px`);\n        card.style.setProperty(\"--spotlight-opacity\", \"1\");\n      }\n\n      isHoveredRef.current = true;\n      startAnimation();\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n      if (\n        finalNoFocus ||\n        (e.relatedTarget && e.currentTarget.contains(e.relatedTarget as Node))\n      ) {\n        return;\n      }\n\n      const card = containerRef.current;\n      if (card) {\n        card.style.setProperty(\"--spotlight-opacity\", \"0\");\n      }\n\n      isHoveredRef.current = false;\n      onBlur?.(e);\n    };\n\n    return (\n      <div\n        ref={(node) => {\n          containerRef.current = node;\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n        }}\n        tabIndex={finalNoFocus ? -1 : 0}\n        role={\n          !finalNoFocus && (props[\"aria-label\"] || props[\"aria-labelledby\"])\n            ? \"region\"\n            : undefined\n        }\n        onMouseMove={handleMouseMove}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={finalNoFocus ? undefined : handleFocus}\n        onBlur={finalNoFocus ? undefined : handleBlur}\n        className={cn(\n          \"group relative isolate flex flex-col items-center justify-center overflow-hidden rounded-2xl border border-white/8 bg-black/80 text-zinc-100 select-none\",\n          \"transition-[border-color,box-shadow] duration-500 hover:border-white/20 hover:shadow-2xl hover:shadow-black/60\",\n          \"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sky-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-black\",\n          \"transform-3d will-change-transform\",\n          className,\n        )}\n        {...props}\n      >\n        {enableSpotlight && (\n          <div\n            className=\"pointer-events-none absolute -inset-px rounded-[inherit] transition-opacity duration-500 ease-out\"\n            style={{\n              opacity: \"var(--spotlight-opacity, 0)\",\n              background: `radial-gradient(320px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), ${finalSpotlightColor}, transparent 70%)`,\n            }}\n          />\n        )}\n        <div\n          className=\"pointer-events-none absolute -inset-px rounded-[inherit] border border-transparent transition-opacity duration-500 ease-out\"\n          style={{\n            opacity: \"var(--spotlight-opacity, 0)\",\n            background: `radial-gradient(280px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), ${variantCfg.borderColor}, transparent 65%) border-box`,\n            WebkitMask:\n              \"linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)\",\n            WebkitMaskComposite: \"xor\",\n            maskComposite: \"exclude\",\n          }}\n        />\n        {enableGlare && (\n          <div\n            className=\"pointer-events-none absolute inset-0 rounded-[inherit] transition-opacity duration-500 ease-out\"\n            style={{\n              opacity: \"var(--spotlight-opacity, 0)\",\n              background:\n                \"linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 45%, rgba(255, 255, 255, 0.01) 100%)\",\n            }}\n          />\n        )}\n        <canvas\n          ref={canvasRef}\n          className=\"pointer-events-none absolute inset-0 block h-full w-full rounded-[inherit]\"\n        />\n        {children && (\n          <div className=\"relative z-10 flex h-full w-full flex-col items-center justify-center transform-3d transform-[translateZ(18px)] pointer-events-auto\">\n            {children}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nPixelCard.displayName = \"PixelCard\";\n\nexport default PixelCard;\n",
      "content": "\"use client\";\n\nimport React, { useRef, useCallback, useEffect } from \"react\";\nimport gsap from \"gsap\";\nimport { useGSAP } from \"@gsap/react\";\nimport { cn } from \"@/lib/utils\";\n\nif (typeof window !== \"undefined\") {\n  gsap.registerPlugin(useGSAP);\n}\n\nexport type PixelCardVariant =\n  | \"default\"\n  | \"blue\"\n  | \"yellow\"\n  | \"pink\"\n  | \"purple\"\n  | \"emerald\";\n\nexport type PixelCardPattern = \"wave\" | \"matrix\" | \"scan\" | \"cross\";\n\nexport interface PixelCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: PixelCardVariant;\n  pattern?: PixelCardPattern;\n  noise?: number;\n  gap?: number;\n  speed?: number;\n  colors?: string;\n  noFocus?: boolean;\n  enableTilt?: boolean;\n  maxTilt?: number;\n  enableSpotlight?: boolean;\n  spotlightColor?: string;\n  enableGlare?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n}\n\ninterface PixelData {\n  x: number;\n  y: number;\n  color: string;\n  size: number;\n  alpha: number;\n  maxSize: number;\n  phase: number;\n}\n\ninterface VariantConfig {\n  activeColor: string;\n  spotlight: string;\n  borderColor: string;\n  gap: number;\n  speed: number;\n  colors: string;\n  noFocus: boolean;\n}\n\nconst VARIANTS: Record<PixelCardVariant, VariantConfig> = {\n  default: {\n    activeColor: \"rgba(56, 189, 248, 0.08)\",\n    spotlight: \"rgba(56, 189, 248, 0.07)\",\n    borderColor: \"rgba(56, 189, 248, 0.25)\",\n    gap: 6,\n    speed: 25,\n    colors: \"#f8fafc,#cbd5e1,#94a3b8,#38bdf8\",\n    noFocus: false,\n  },\n  blue: {\n    activeColor: \"rgba(14, 165, 233, 0.1)\",\n    spotlight: \"rgba(56, 189, 248, 0.09)\",\n    borderColor: \"rgba(56, 189, 248, 0.3)\",\n    gap: 7,\n    speed: 22,\n    colors: \"#e0f2fe,#7dd3fc,#38bdf8,#0ea5e9\",\n    noFocus: false,\n  },\n  yellow: {\n    activeColor: \"rgba(234, 179, 8, 0.08)\",\n    spotlight: \"rgba(250, 204, 21, 0.07)\",\n    borderColor: \"rgba(250, 204, 21, 0.28)\",\n    gap: 6,\n    speed: 20,\n    colors: \"#fef08a,#fde047,#facc15,#eab308\",\n    noFocus: false,\n  },\n  pink: {\n    activeColor: \"rgba(244, 63, 94, 0.1)\",\n    spotlight: \"rgba(244, 63, 94, 0.08)\",\n    borderColor: \"rgba(251, 113, 133, 0.28)\",\n    gap: 6,\n    speed: 30,\n    colors: \"#fecdd3,#fda4af,#fb7185,#f43f5e\",\n    noFocus: true,\n  },\n  purple: {\n    activeColor: \"rgba(168, 85, 247, 0.1)\",\n    spotlight: \"rgba(192, 132, 252, 0.08)\",\n    borderColor: \"rgba(192, 132, 252, 0.28)\",\n    gap: 6,\n    speed: 24,\n    colors: \"#f3e8ff,#d8b4fe,#c084fc,#a855f7\",\n    noFocus: false,\n  },\n  emerald: {\n    activeColor: \"rgba(16, 185, 129, 0.1)\",\n    spotlight: \"rgba(52, 211, 153, 0.08)\",\n    borderColor: \"rgba(52, 211, 153, 0.28)\",\n    gap: 6,\n    speed: 22,\n    colors: \"#d1fae5,#6ee7b7,#34d399,#10b981\",\n    noFocus: false,\n  },\n};\n\nfunction getPointerPosition(\n  card: HTMLDivElement,\n  event: React.MouseEvent<HTMLDivElement>,\n) {\n  const rect = card.getBoundingClientRect();\n  return {\n    x: rect.width > 0\n      ? (event.clientX - rect.left) * card.offsetWidth / rect.width\n      : 0,\n    y: rect.height > 0\n      ? (event.clientY - rect.top) * card.offsetHeight / rect.height\n      : 0,\n  };\n}\n\nexport const PixelCard = React.forwardRef<HTMLDivElement, PixelCardProps>(\n  (\n    {\n      variant = \"default\",\n      pattern = \"wave\",\n      noise = 0,\n      gap,\n      speed,\n      colors,\n      noFocus,\n      enableTilt = true,\n      maxTilt = 6,\n      enableSpotlight = true,\n      spotlightColor,\n      enableGlare = true,\n      className,\n      children,\n      onMouseMove,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref,\n  ) => {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const canvasRef = useRef<HTMLCanvasElement | null>(null);\n    const pixelsRef = useRef<PixelData[]>([]);\n    const isHoveredRef = useRef(false);\n    const animatingRef = useRef(false);\n\n    const pointerRef = useRef({\n      x: 0,\n      y: 0,\n      entryTime: 0,\n    });\n\n    const targetPointerRef = useRef({\n      x: 0,\n      y: 0,\n    });\n\n    const rotXRef = useRef<gsap.QuickToFunc | null>(null);\n    const rotYRef = useRef<gsap.QuickToFunc | null>(null);\n    const scaleRef = useRef<gsap.QuickToFunc | null>(null);\n\n    const isReducedMotion = useRef(\n      typeof window !== \"undefined\" &&\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches,\n    ).current;\n\n    const variantCfg = VARIANTS[variant] || VARIANTS.default;\n    const finalGap = gap ?? variantCfg.gap;\n    const finalSpeed = speed ?? variantCfg.speed;\n    const finalColors = colors ?? variantCfg.colors;\n    const finalNoFocus = noFocus ?? variantCfg.noFocus;\n    const finalSpotlightColor = spotlightColor ?? variantCfg.spotlight;\n\n    const initPixels = useCallback(() => {\n      const container = containerRef.current;\n      const canvas = canvasRef.current;\n      if (!container || !canvas) return;\n\n      const width = container.offsetWidth;\n      const height = container.offsetHeight;\n      if (width <= 0 || height <= 0) return;\n\n      const dpr = Math.min(\n        typeof window !== \"undefined\" ? window.devicePixelRatio || 1 : 1,\n        2,\n      );\n      canvas.width = Math.floor(width * dpr);\n      canvas.height = Math.floor(height * dpr);\n      canvas.style.width = `${width}px`;\n      canvas.style.height = `${height}px`;\n\n      const ctx = canvas.getContext(\"2d\");\n      if (!ctx) return;\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n      const step = Math.max(4, parseInt(finalGap.toString(), 10) || 6);\n      const cols = Math.floor(width / step);\n      const rows = Math.floor(height / step);\n      const xOffset = Math.floor((width - (cols - 1) * step) / 2);\n      const yOffset = Math.floor((height - (rows - 1) * step) / 2);\n\n      const colorList = finalColors\n        .split(\",\")\n        .map((c) => c.trim())\n        .filter(Boolean);\n      const pixelGrid: PixelData[] = [];\n\n      for (let col = 0; col < cols; col++) {\n        for (let row = 0; row < rows; row++) {\n          const x = xOffset + col * step;\n          const y = yOffset + row * step;\n          const color =\n            colorList[Math.floor(Math.random() * colorList.length)] ||\n            \"#38bdf8\";\n          const maxSize = 1.1 + Math.random() * 1.3;\n          pixelGrid.push({\n            x,\n            y,\n            color,\n            size: 0,\n            alpha: 0,\n            maxSize,\n            phase: Math.random() * Math.PI * 2,\n          });\n        }\n      }\n      pixelsRef.current = pixelGrid;\n    }, [finalColors, finalGap]);\n\n    const tick = useCallback(\n      (time: number, deltaTime: number) => {\n        const canvas = canvasRef.current;\n        if (!canvas) return;\n        const ctx = canvas.getContext(\"2d\");\n        if (!ctx) return;\n\n        const width = parseFloat(canvas.style.width) || canvas.width;\n        const height = parseFloat(canvas.style.height) || canvas.height;\n\n        const isHovered = isHoveredRef.current;\n        const pointer = pointerRef.current;\n        const targetPointer = targetPointerRef.current;\n\n        pointer.x += (targetPointer.x - pointer.x) * 0.15;\n        pointer.y += (targetPointer.y - pointer.y) * 0.15;\n\n        const pixels = pixelsRef.current;\n        const dt = Math.min(deltaTime, 33.33);\n        const factor = Math.min(1, 0.12 * (dt / 16.67));\n\n        ctx.clearRect(0, 0, width, height);\n\n        let hasVisiblePixels = false;\n        const elapsed = time - pointer.entryTime;\n        const waveRadius = isReducedMotion ? 99999 : elapsed * 320;\n        const effectiveSpeed = finalSpeed * 0.05;\n\n        for (let i = 0; i < pixels.length; i++) {\n          const p = pixels[i];\n          let targetSize = 0;\n          let targetAlpha = 0;\n\n          if (isHovered) {\n            const dx = p.x - pointer.x;\n            const dy = p.y - pointer.y;\n            const dist = Math.sqrt(dx * dx + dy * dy);\n\n            if (pattern === \"wave\") {\n              if (dist <= waveRadius) {\n                const waveIntensity = Math.min(\n                  1,\n                  Math.max(0, (waveRadius - dist) / 45),\n                );\n                const proximity = Math.max(0, 1 - dist / 130);\n                const proximityBoost = proximity * proximity;\n                const harmonicWave =\n                  Math.sin(time * effectiveSpeed + p.phase) * 0.5 + 0.5;\n                const pulse =\n                  Math.sin(time * (effectiveSpeed * 1.2) - dist * 0.03) * 0.5 +\n                  0.5;\n\n                targetSize =\n                  p.maxSize *\n                  waveIntensity *\n                  (0.3 + 0.55 * harmonicWave + proximityBoost * 0.65);\n                targetAlpha = Math.min(\n                  1,\n                  0.2 + 0.65 * pulse + proximityBoost * 0.4,\n                );\n              }\n            } else if (pattern === \"matrix\") {\n              const colOffset = Math.sin(p.x * 0.08) * 120;\n              const streamY =\n                ((time * (effectiveSpeed * 160) + colOffset) % (height + 120)) -\n                60;\n              const streamDist = Math.abs(p.y - streamY);\n              const streamIntensity = Math.max(0, 1 - streamDist / 60);\n              const proximity = Math.max(0, 1 - dist / 120);\n              const pulse =\n                Math.sin(time * (effectiveSpeed * 2) + p.phase) * 0.5 + 0.5;\n\n              targetSize =\n                p.maxSize * (0.2 + 0.8 * streamIntensity + proximity * 0.5);\n              targetAlpha = Math.min(\n                1,\n                0.2 + 0.8 * streamIntensity * pulse + proximity * 0.4,\n              );\n            } else if (pattern === \"scan\") {\n              const scanAngle = time * (effectiveSpeed * 0.9);\n              const cx = width / 2;\n              const cy = height / 2;\n              const relX = p.x - cx;\n              const relY = p.y - cy;\n              const beamDist = Math.abs(\n                relX * Math.cos(scanAngle) + relY * Math.sin(scanAngle),\n              );\n              const beamIntensity = Math.max(0, 1 - beamDist / 45);\n              const proximity = Math.max(0, 1 - dist / 120);\n\n              targetSize =\n                p.maxSize * (0.25 + 0.75 * beamIntensity + proximity * 0.5);\n              targetAlpha = Math.min(\n                1,\n                0.2 + 0.8 * beamIntensity + proximity * 0.4,\n              );\n            } else if (pattern === \"cross\") {\n              const lineDist = Math.min(Math.abs(dx), Math.abs(dy));\n              const lineIntensity = Math.max(0, 1 - lineDist / 32);\n              const proximity = Math.max(0, 1 - dist / 130);\n              const pulse =\n                Math.sin(time * (effectiveSpeed * 1.5) - dist * 0.035) * 0.5 +\n                0.5;\n\n              targetSize =\n                p.maxSize * (0.25 + 0.75 * lineIntensity + proximity * 0.5);\n              targetAlpha = Math.min(\n                1,\n                0.2 + 0.8 * lineIntensity * pulse + proximity * 0.4,\n              );\n            }\n\n            if (noise > 0) {\n              const noiseSeed =\n                Math.sin(p.x * 12.9898 + p.y * 78.233 + time * 14) * 43758.5453;\n              const pseudoRand = noiseSeed - Math.floor(noiseSeed);\n              const noiseDelta = (pseudoRand - 0.5) * noise * 1.1;\n              targetSize = Math.max(0, targetSize * (1 + noiseDelta));\n              targetAlpha = Math.min(\n                1,\n                Math.max(0, targetAlpha * (1 + noiseDelta * 0.7)),\n              );\n            }\n          }\n\n          p.size += (targetSize - p.size) * factor;\n          p.alpha += (targetAlpha - p.alpha) * factor;\n\n          if (!isHovered && p.size < 0.05) {\n            p.size = 0;\n            p.alpha = 0;\n          }\n\n          if (p.size > 0.04 && p.alpha > 0.01) {\n            hasVisiblePixels = true;\n            const offset = (p.maxSize - p.size) * 0.5;\n            ctx.globalAlpha = Math.min(1, Math.max(0, p.alpha));\n            ctx.fillStyle = p.color;\n            ctx.fillRect(p.x + offset, p.y + offset, p.size, p.size);\n          }\n        }\n\n        if (!isHovered && !hasVisiblePixels) {\n          animatingRef.current = false;\n          gsap.ticker.remove(tick);\n          ctx.clearRect(0, 0, width, height);\n        }\n      },\n      [finalSpeed, isReducedMotion, noise, pattern],\n    );\n\n    const startAnimation = useCallback(() => {\n      if (!animatingRef.current) {\n        animatingRef.current = true;\n        gsap.ticker.add(tick);\n      }\n    }, [tick]);\n\n    useGSAP(\n      () => {\n        const card = containerRef.current;\n        if (!card) return;\n\n        if (isReducedMotion || !enableTilt) return;\n\n        rotXRef.current = gsap.quickTo(card, \"rotationX\", {\n          duration: 0.45,\n          ease: \"power2.out\",\n        });\n        rotYRef.current = gsap.quickTo(card, \"rotationY\", {\n          duration: 0.45,\n          ease: \"power2.out\",\n        });\n        scaleRef.current = gsap.quickTo(card, \"scale\", {\n          duration: 0.45,\n          ease: \"power2.out\",\n        });\n\n        return () => {\n          rotXRef.current = null;\n          rotYRef.current = null;\n          scaleRef.current = null;\n          animatingRef.current = false;\n          gsap.ticker.remove(tick);\n        };\n      },\n      {\n        scope: containerRef,\n        dependencies: [enableTilt, isReducedMotion, tick],\n      },\n    );\n\n    useEffect(() => {\n      initPixels();\n\n      const container = containerRef.current;\n      if (!container) return;\n\n      const observer = new ResizeObserver(() => {\n        initPixels();\n      });\n      observer.observe(container);\n\n      return () => {\n        observer.disconnect();\n        animatingRef.current = false;\n        gsap.ticker.remove(tick);\n      };\n    }, [initPixels, tick]);\n\n    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n      const card = containerRef.current;\n      if (!card) return;\n\n      const { x, y } = getPointerPosition(card, e);\n\n      targetPointerRef.current.x = x;\n      targetPointerRef.current.y = y;\n\n      card.style.setProperty(\"--pointer-x\", `${x}px`);\n      card.style.setProperty(\"--pointer-y\", `${y}px`);\n\n      if (\n        enableTilt &&\n        !isReducedMotion &&\n        rotXRef.current &&\n        rotYRef.current &&\n        scaleRef.current\n      ) {\n        const nx = x / (card.offsetWidth || 1) * 2 - 1;\n        const ny = y / (card.offsetHeight || 1) * 2 - 1;\n        const clampedX = Math.max(-1, Math.min(1, nx));\n        const clampedY = Math.max(-1, Math.min(1, ny));\n\n        rotXRef.current(-clampedY * maxTilt);\n        rotYRef.current(clampedX * maxTilt);\n        scaleRef.current(1.008);\n      }\n\n      onMouseMove?.(e);\n    };\n\n    const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n      const card = containerRef.current;\n      if (!card) return;\n\n      const { x, y } = getPointerPosition(card, e);\n\n      pointerRef.current.x = x;\n      pointerRef.current.y = y;\n      targetPointerRef.current.x = x;\n      targetPointerRef.current.y = y;\n      pointerRef.current.entryTime = gsap.ticker.time;\n      isHoveredRef.current = true;\n\n      card.style.setProperty(\"--pointer-x\", `${x}px`);\n      card.style.setProperty(\"--pointer-y\", `${y}px`);\n      card.style.setProperty(\"--spotlight-opacity\", \"1\");\n\n      startAnimation();\n      onMouseEnter?.(e);\n    };\n\n    const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n      isHoveredRef.current = false;\n      const card = containerRef.current;\n      if (card) {\n        card.style.setProperty(\"--spotlight-opacity\", \"0\");\n      }\n\n      if (\n        enableTilt &&\n        !isReducedMotion &&\n        rotXRef.current &&\n        rotYRef.current &&\n        scaleRef.current\n      ) {\n        rotXRef.current(0);\n        rotYRef.current(0);\n        scaleRef.current(1);\n      }\n\n      onMouseLeave?.(e);\n    };\n\n    const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {\n      if (\n        finalNoFocus ||\n        (e.relatedTarget && e.currentTarget.contains(e.relatedTarget as Node))\n      ) {\n        return;\n      }\n\n      const card = containerRef.current;\n      if (card) {\n        const cx = card.offsetWidth / 2;\n        const cy = card.offsetHeight / 2;\n        pointerRef.current.x = cx;\n        pointerRef.current.y = cy;\n        targetPointerRef.current.x = cx;\n        targetPointerRef.current.y = cy;\n        pointerRef.current.entryTime = gsap.ticker.time;\n\n        card.style.setProperty(\"--pointer-x\", `${cx}px`);\n        card.style.setProperty(\"--pointer-y\", `${cy}px`);\n        card.style.setProperty(\"--spotlight-opacity\", \"1\");\n      }\n\n      isHoveredRef.current = true;\n      startAnimation();\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n      if (\n        finalNoFocus ||\n        (e.relatedTarget && e.currentTarget.contains(e.relatedTarget as Node))\n      ) {\n        return;\n      }\n\n      const card = containerRef.current;\n      if (card) {\n        card.style.setProperty(\"--spotlight-opacity\", \"0\");\n      }\n\n      isHoveredRef.current = false;\n      onBlur?.(e);\n    };\n\n    return (\n      <div\n        ref={(node) => {\n          containerRef.current = node;\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n        }}\n        tabIndex={finalNoFocus ? -1 : 0}\n        role={\n          !finalNoFocus && (props[\"aria-label\"] || props[\"aria-labelledby\"])\n            ? \"region\"\n            : undefined\n        }\n        onMouseMove={handleMouseMove}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={finalNoFocus ? undefined : handleFocus}\n        onBlur={finalNoFocus ? undefined : handleBlur}\n        className={cn(\n          \"group relative isolate flex flex-col items-center justify-center overflow-hidden rounded-2xl border border-white/8 bg-black/80 text-zinc-100 select-none\",\n          \"transition-[border-color,box-shadow] duration-500 hover:border-white/20 hover:shadow-2xl hover:shadow-black/60\",\n          \"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sky-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-black\",\n          \"transform-3d will-change-transform\",\n          className,\n        )}\n        {...props}\n      >\n        {enableSpotlight && (\n          <div\n            className=\"pointer-events-none absolute -inset-px rounded-[inherit] transition-opacity duration-500 ease-out\"\n            style={{\n              opacity: \"var(--spotlight-opacity, 0)\",\n              background: `radial-gradient(320px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), ${finalSpotlightColor}, transparent 70%)`,\n            }}\n          />\n        )}\n        <div\n          className=\"pointer-events-none absolute -inset-px rounded-[inherit] border border-transparent transition-opacity duration-500 ease-out\"\n          style={{\n            opacity: \"var(--spotlight-opacity, 0)\",\n            background: `radial-gradient(280px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), ${variantCfg.borderColor}, transparent 65%) border-box`,\n            WebkitMask:\n              \"linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)\",\n            WebkitMaskComposite: \"xor\",\n            maskComposite: \"exclude\",\n          }}\n        />\n        {enableGlare && (\n          <div\n            className=\"pointer-events-none absolute inset-0 rounded-[inherit] transition-opacity duration-500 ease-out\"\n            style={{\n              opacity: \"var(--spotlight-opacity, 0)\",\n              background:\n                \"linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 45%, rgba(255, 255, 255, 0.01) 100%)\",\n            }}\n          />\n        )}\n        <canvas\n          ref={canvasRef}\n          className=\"pointer-events-none absolute inset-0 block h-full w-full rounded-[inherit]\"\n        />\n        {children && (\n          <div className=\"relative z-10 flex h-full w-full flex-col items-center justify-center transform-3d transform-[translateZ(18px)] pointer-events-auto\">\n            {children}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nPixelCard.displayName = \"PixelCard\";\n\nexport default PixelCard;\n",
      "type": "registry:ui",
      "target": "@ui/pixel-card.tsx"
    }
  ],
  "type": "registry:ui",
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "title": "Pixel Card"
}