{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "hero-3d-tilt-interactive-canvas",
  "title": "Hero 3d Tilt Interactive Canvas",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/hero-3d-tilt-interactive-canvas/Hero3dTiltInteractiveCanvas.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ArrowRight, Code2, Cpu, Layers, MousePointerClick, Zap } from 'lucide-vue-next'\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  class?: string\n}\n\nconst props = withDefaults(defineProps<Hero3dTiltInteractiveCanvasProps>(), {\n  title: 'Fluid 3D Spatial Architecture rendered in pure CSS.',\n  description:\n    '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})\n\nconst cardRef = ref<HTMLDivElement | null>(null)\nconst rotateX = ref(0)\nconst rotateY = ref(0)\nconst glareX = ref(50)\nconst glareY = ref(50)\nconst isHovering = ref(false)\n\nfunction handleMouseMove(e: MouseEvent) {\n  if (!cardRef.value) return\n  const rect = cardRef.value.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  rotateY.value = Number(((x - centerX) / (centerX / 14)).toFixed(2))\n  rotateX.value = Number((-(y - centerY) / (centerY / 14)).toFixed(2))\n\n  glareX.value = Number(((x / rect.width) * 100).toFixed(1))\n  glareY.value = Number(((y / rect.height) * 100).toFixed(1))\n}\n\nfunction handleMouseEnter() {\n  isHovering.value = true\n}\n\nfunction handleMouseLeave() {\n  isHovering.value = false\n  rotateX.value = 0\n  rotateY.value = 0\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-3d-tilt-interactive-canvas\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#3d-spatial\"\n          class=\"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 class=\"text-primary size-3.5\" />\n          <span>Spatial 3D Design Engineering</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h1 class=\"text-foreground text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n          {{ title }}\n        </h1>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n\n        <div class=\"flex flex-wrap items-center justify-center gap-3 pt-2\">\n          <Button size=\"lg\" class=\"gap-2 shadow-xs\">\n            <span>{{ primaryActionLabel }}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n          <Button variant=\"outline\" size=\"lg\" class=\"gap-2\">\n            <Code2 class=\"size-4\" />\n            <span>{{ secondaryActionLabel }}</span>\n          </Button>\n        </div>\n      </div>\n\n      <!-- 3D Perspective Stage Container -->\n      <div class=\"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          class=\"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          @mousemove=\"handleMouseMove\"\n          @mouseenter=\"handleMouseEnter\"\n          @mouseleave=\"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            class=\"pointer-events-none absolute inset-0 transition-opacity duration-300\"\n            :class=\"isHovering ? 'opacity-100' : 'opacity-0'\"\n          />\n\n          <!-- Layer 1: Base Grid Info -->\n          <div class=\"border-border flex items-center justify-between border-b pb-4\">\n            <div class=\"flex items-center gap-2\">\n              <Layers class=\"text-primary size-4\" />\n              <span class=\"text-foreground text-sm font-bold\">Spatial Component Viewport</span>\n            </div>\n            <Badge variant=\"outline\" class=\"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 class=\"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              class=\"border-border/90 bg-muted/40 space-y-2 rounded-xl border p-4 shadow-md transition-transform\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <Cpu class=\"text-primary size-4\" />\n                <span class=\"text-foreground text-xs font-bold\">GPU Accelerated Matrix</span>\n              </div>\n              <p class=\"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              class=\"border-primary/30 bg-primary/5 space-y-2 rounded-xl border p-4 shadow-lg transition-transform\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <Zap class=\"text-success size-4\" />\n                <span class=\"text-foreground text-xs font-bold\">Specular Ray Diffusion</span>\n              </div>\n              <p class=\"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            class=\"border-border/80 bg-background/90 mt-6 flex items-center justify-between rounded-lg border p-3 text-xs\"\n          >\n            <div class=\"text-muted-foreground flex items-center gap-2\">\n              <MousePointerClick class=\"text-primary size-3.5\" />\n              <span>Hover and move cursor to orient viewport</span>\n            </div>\n            <span class=\"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</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero-3d-tilt-interactive-canvas/Hero3dTiltInteractiveCanvas.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero-3d-tilt-interactive-canvas/index.ts",
      "content": "export { default as Hero3dTiltInteractiveCanvas } from './Hero3dTiltInteractiveCanvas.vue'\nexport type { Hero3dTiltInteractiveCanvasProps } from './Hero3dTiltInteractiveCanvas.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero-3d-tilt-interactive-canvas/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/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"
}