{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-3d-tilt-interactive-canvas",
  "title": "Hero 3d Tilt Interactive Canvas",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/hero-3d-tilt-interactive-canvas/Hero3dTiltInteractiveCanvas.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Code2, Cpu, Layers, MousePointerClick, Zap } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\n\nexport interface Hero3dTiltInteractiveCanvasProps {\n  title?: string\n  description?: string\n  primaryActionLabel?: string\n  secondaryActionLabel?: string\n  className?: string\n}\n\nexport function Hero3dTiltInteractiveCanvas({\n  title = 'Fluid 3D Spatial Architecture rendered in pure CSS.',\n  description = 'Experience zero-latency hardware-accelerated 3D perspective transforms with dynamic specular reflections and layered z-depth primitives.',\n  primaryActionLabel = 'Explore 3D Primitives',\n  secondaryActionLabel = 'Copy CSS Matrix Code',\n  className,\n}: Hero3dTiltInteractiveCanvasProps) {\n  const cardRef = React.useRef<HTMLDivElement | null>(null)\n  const [rotateX, setRotateX] = React.useState(0)\n  const [rotateY, setRotateY] = React.useState(0)\n  const [glareX, setGlareX] = React.useState(50)\n  const [glareY, setGlareY] = React.useState(50)\n  const [isHovering, setIsHovering] = React.useState(false)\n\n  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {\n    if (!cardRef.current) return\n    const rect = cardRef.current.getBoundingClientRect()\n    const x = e.clientX - rect.left\n    const y = e.clientY - rect.top\n\n    const centerX = rect.width / 2\n    const centerY = rect.height / 2\n\n    // Limit max rotation to +/- 14 degrees\n    setRotateY(Number(((x - centerX) / (centerX / 14)).toFixed(2)))\n    setRotateX(Number((-(y - centerY) / (centerY / 14)).toFixed(2)))\n\n    setGlareX(Number(((x / rect.width) * 100).toFixed(1)))\n    setGlareY(Number(((y / rect.height) * 100).toFixed(1)))\n  }\n\n  function handleMouseEnter() {\n    setIsHovering(true)\n  }\n\n  function handleMouseLeave() {\n    setIsHovering(false)\n    setRotateX(0)\n    setRotateY(0)\n  }\n\n  return (\n    <section\n      data-slot=\"hero-3d-tilt-interactive-canvas\"\n      className={cn('bg-background relative overflow-hidden py-16 sm:py-24', className)}\n    >\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <a\n            href=\"#3d-spatial\"\n            className=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n          >\n            <Layers className=\"text-primary size-3.5\" />\n            <span>Spatial 3D Design Engineering</span>\n            <ArrowRight className=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n          </a>\n\n          <h1 className=\"text-foreground text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl\">{title}</h1>\n\n          <p className=\"text-muted-foreground text-base sm:text-lg\">{description}</p>\n\n          <div className=\"flex flex-wrap items-center justify-center gap-3 pt-2\">\n            <Button size=\"lg\" className=\"gap-2 shadow-xs\">\n              <span>{primaryActionLabel}</span>\n              <ArrowRight className=\"size-4\" />\n            </Button>\n            <Button variant=\"outline\" size=\"lg\" className=\"gap-2\">\n              <Code2 className=\"size-4\" />\n              <span>{secondaryActionLabel}</span>\n            </Button>\n          </div>\n        </div>\n\n        {/* 3D Perspective Stage Container */}\n        <div className=\"mt-14 flex flex-col items-center justify-center [perspective:1200px]\">\n          <div\n            ref={cardRef}\n            style={{\n              transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,\n              transition: isHovering ? 'transform 100ms ease-out' : 'transform 500ms cubic-bezier(0.16, 1, 0.3, 1)',\n            }}\n            className=\"border-border bg-card relative w-full max-w-2xl cursor-crosshair overflow-hidden rounded-2xl border p-8 shadow-xl select-none [transform-style:preserve-3d]\"\n            onMouseMove={handleMouseMove}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n          >\n            {/* Dynamic Specular Reflection / Glare Gradient */}\n            <div\n              style={{\n                background: `radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255,255,255,0.12) 0%, transparent 60%)`,\n              }}\n              className={cn(\n                'pointer-events-none absolute inset-0 transition-opacity duration-300',\n                isHovering ? 'opacity-100' : 'opacity-0',\n              )}\n            />\n\n            {/* Layer 1: Base Grid Info */}\n            <div className=\"border-border flex items-center justify-between border-b pb-4\">\n              <div className=\"flex items-center gap-2\">\n                <Layers className=\"text-primary size-4\" />\n                <span className=\"text-foreground text-sm font-bold\">Spatial Component Viewport</span>\n              </div>\n              <Badge variant=\"outline\" className=\"border-border text-muted-foreground font-mono text-xs\">\n                Pitch: {rotateX}&deg; &bull; Yaw: {rotateY}&deg;\n              </Badge>\n            </div>\n\n            {/* Layer 2: Floating 3D Cards & Primitives (Preserve-3d + translateZ) */}\n            <div className=\"mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n              {/* Floating Badge Card 1 */}\n              <div\n                style={{ transform: 'translateZ(35px)' }}\n                className=\"border-border/90 bg-muted/40 space-y-2 rounded-xl border p-4 shadow-md transition-transform\"\n              >\n                <div className=\"flex items-center gap-2\">\n                  <Cpu className=\"text-primary size-4\" />\n                  <span className=\"text-foreground text-xs font-bold\">GPU Accelerated Matrix</span>\n                </div>\n                <p className=\"text-muted-foreground text-xs leading-relaxed\">\n                  Zero JavaScript bundle runtime. Calculated via pure CSS 3D matrix transforms.\n                </p>\n              </div>\n\n              {/* Floating Badge Card 2 */}\n              <div\n                style={{ transform: 'translateZ(50px)' }}\n                className=\"border-primary/30 bg-primary/5 space-y-2 rounded-xl border p-4 shadow-lg transition-transform\"\n              >\n                <div className=\"flex items-center gap-2\">\n                  <Zap className=\"text-success size-4\" />\n                  <span className=\"text-foreground text-xs font-bold\">Specular Ray Diffusion</span>\n                </div>\n                <p className=\"text-muted-foreground text-xs leading-relaxed\">\n                  Dynamic light reflection calculates azimuth angles relative to mouse coordinates.\n                </p>\n              </div>\n            </div>\n\n            {/* Bottom Telemetry Bar */}\n            <div\n              style={{ transform: 'translateZ(25px)' }}\n              className=\"border-border/80 bg-background/90 mt-6 flex items-center justify-between rounded-lg border p-3 text-xs\"\n            >\n              <div className=\"text-muted-foreground flex items-center gap-2\">\n                <MousePointerClick className=\"text-primary size-3.5\" />\n                <span>Hover and move cursor to orient viewport</span>\n              </div>\n              <span className=\"text-foreground font-mono text-xs font-bold\">\n                {isHovering ? 'Tracking Live' : 'Hover to Orbit'}\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/hero-3d-tilt-interactive-canvas/Hero3dTiltInteractiveCanvas.tsx"
    },
    {
      "path": "packages/registry-react/blocks/hero-3d-tilt-interactive-canvas/index.ts",
      "content": "export { Hero3dTiltInteractiveCanvas } from './Hero3dTiltInteractiveCanvas'\nexport type { Hero3dTiltInteractiveCanvasProps } from './Hero3dTiltInteractiveCanvas'\n",
      "type": "registry:block",
      "target": "~/components/blocks/hero-3d-tilt-interactive-canvas/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json"
  ],
  "description": "Hero section with hardware-accelerated 3D tilt perspective card, specular light glare, and multi-layer z-depth primitives.",
  "categories": [
    "hero",
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "hero"
}