{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-hover-tilt-cards",
  "title": "Feature Hover Tilt Cards",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-hover-tilt-cards/FeatureHoverTiltCards.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, reactive, ref } from 'vue'\nimport {\n  Activity,\n  ArrowRight,\n  CheckCircle2,\n  Code2,\n  Cpu,\n  Database,\n  Eye,\n  Layers,\n  LayoutGrid,\n  Maximize2,\n  Terminal,\n  Zap,\n} from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\n// Interactive card state tracking for 3D perspective effect\nconst cardRotations = reactive<Record<number, { rx: number; ry: number; active: boolean }>>({\n  0: { rx: 0, ry: 0, active: false },\n  1: { rx: 0, ry: 0, active: false },\n  2: { rx: 0, ry: 0, active: false },\n})\n\nfunction handleMouseMove(e: MouseEvent, index: number) {\n  const card = e.currentTarget as HTMLElement\n  const rect = card.getBoundingClientRect()\n  const x = e.clientX - rect.left\n  const y = e.clientY - rect.top\n  const centerX = rect.width / 2\n  const centerY = rect.height / 2\n\n  const rotateX = ((y - centerY) / centerY) * -7\n  const rotateY = ((x - centerX) / centerX) * 7\n\n  cardRotations[index] = { rx: rotateX, ry: rotateY, active: true }\n}\n\nfunction handleMouseLeave(index: number) {\n  cardRotations[index] = { rx: 0, ry: 0, active: false }\n}\n\n// Card 1 Interactive Token Scale Slider\nconst tokenScale = ref(100)\n\n// Card 2 Interactive Spring Frequency\nconst springFrequency = ref(180)\nconst isPulsing = ref(false)\n\nfunction triggerSpringTest() {\n  isPulsing.value = true\n  setTimeout(() => (isPulsing.value = false), 600)\n}\n\n// Card 3 Interactive Framework Output Toggle\nconst activeMirror = ref<'vue' | 'react'>('vue')\n\n// Kept in script: a literal `<script` inside a template interpolation trips\n// prettier's HTML parser (it looks like a real tag open).\nconst mirrorBadges = {\n  vue: '<script setup lang=\"ts\"> + Reka UI',\n  react: \"'use client' + Radix UI\",\n} as const\n</script>\n\n<template>\n  <section\n    data-slot=\"feature-hover-tilt-cards\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <div class=\"mx-auto max-w-7xl space-y-12\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <Eye class=\"text-primary size-3.5\" />\n          Tactile Physics &amp; Surface Depth\n        </Badge>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          Engineered for tactile feedback &amp; micro-interactions.\n        </h2>\n        <p class=\"text-muted-foreground text-base\">\n          Hover over each workbench card to experience hardware-accelerated 3D depth and live interactive physics.\n        </p>\n      </div>\n\n      <!-- 3D Perspective Tilt Cards Grid -->\n      <div class=\"grid grid-cols-1 gap-6 [perspective:1200px] lg:grid-cols-3\">\n        <!-- Card 1: Unbundled Token Inspector -->\n        <div\n          class=\"transition-transform duration-200 ease-out will-change-transform\"\n          :style=\"{\n            transform: `perspective(1000px) rotateX(${cardRotations[0].rx}deg) rotateY(${cardRotations[0].ry}deg)`,\n          }\"\n          @mousemove=\"(e) => handleMouseMove(e, 0)\"\n          @mouseleave=\"() => handleMouseLeave(0)\"\n        >\n          <Card\n            class=\"border-border bg-card/95 hover:border-primary/50 relative flex h-full flex-col justify-between space-y-6 overflow-hidden rounded-2xl p-6 text-left shadow-xl transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n          >\n            <div class=\"space-y-3\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"bg-primary/10 text-primary flex size-9 items-center justify-center rounded-xl font-mono\">\n                  <Layers class=\"size-4\" />\n                </div>\n                <Badge variant=\"outline\" class=\"font-mono text-xs\">Zero Bloat</Badge>\n              </div>\n\n              <h3 class=\"text-foreground font-mono text-lg font-bold\">Unbundled Code Ownership</h3>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                AST-level code generation puts pristine component source directly in your repository.\n              </p>\n\n              <!-- Interactive Token Scale Slider -->\n              <div class=\"border-border bg-muted/30 mt-4 space-y-2 rounded-xl border p-3.5\">\n                <div class=\"flex items-center justify-between font-mono text-xs\">\n                  <span class=\"text-muted-foreground\">Tree-Shake Efficiency:</span>\n                  <span class=\"text-success font-bold\">{{ tokenScale }}%</span>\n                </div>\n                <input\n                  v-model=\"tokenScale\"\n                  type=\"range\"\n                  min=\"50\"\n                  max=\"100\"\n                  class=\"accent-primary bg-border h-1.5 w-full cursor-pointer rounded-lg\"\n                />\n                <p class=\"text-muted-foreground font-mono text-xs\">\n                  Unused variants automatically pruned at compile time.\n                </p>\n              </div>\n            </div>\n\n            <div\n              class=\"border-border/60 text-muted-foreground flex items-center justify-between border-t pt-4 font-mono text-xs\"\n            >\n              <span>0 dependencies added</span>\n              <span class=\"text-primary font-semibold\">&check; Pure Source</span>\n            </div>\n          </Card>\n        </div>\n\n        <!-- Card 2: Spring Velocity Simulator -->\n        <div\n          class=\"transition-transform duration-200 ease-out will-change-transform\"\n          :style=\"{\n            transform: `perspective(1000px) rotateX(${cardRotations[1].rx}deg) rotateY(${cardRotations[1].ry}deg)`,\n          }\"\n          @mousemove=\"(e) => handleMouseMove(e, 1)\"\n          @mouseleave=\"() => handleMouseLeave(1)\"\n        >\n          <Card\n            class=\"border-border bg-card/95 hover:border-primary/50 relative flex h-full flex-col justify-between space-y-6 overflow-hidden rounded-2xl p-6 text-left shadow-xl transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n          >\n            <div class=\"space-y-3\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"bg-warning/10 text-warning flex size-9 items-center justify-center rounded-xl font-mono\">\n                  <Zap class=\"size-4\" />\n                </div>\n                <Badge variant=\"outline\" class=\"border-warning/20 bg-warning/10 text-warning font-mono text-xs\">\n                  Fluid Motion\n                </Badge>\n              </div>\n\n              <h3 class=\"text-foreground font-mono text-lg font-bold\">Spring Physics Engine</h3>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                Calibrated cubic-bezier curves for tactile, zero-overshoot micro-interactions.\n              </p>\n\n              <!-- Interactive Spring Trigger Box -->\n              <div class=\"border-border bg-muted/30 mt-4 space-y-3 rounded-xl border p-3.5 text-center\">\n                <div\n                  class=\"bg-primary text-primary-foreground mx-auto flex size-12 items-center justify-center rounded-2xl font-mono text-sm font-bold shadow-md transition-colors duration-300\"\n                  :class=\"isPulsing ? 'bg-success ring-success/30 scale-125 rotate-12 ring-4' : 'scale-100'\"\n                >\n                  <Cpu class=\"size-5\" />\n                </div>\n\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 w-full font-mono text-xs\" @click=\"triggerSpringTest\">\n                  Trigger Spring Impulse\n                </Button>\n              </div>\n            </div>\n\n            <div\n              class=\"border-border/60 text-muted-foreground flex items-center justify-between border-t pt-4 font-mono text-xs\"\n            >\n              <span>Duration: 180ms</span>\n              <span class=\"text-success font-semibold\">&check; 60fps Native</span>\n            </div>\n          </Card>\n        </div>\n\n        <!-- Card 3: Dual-Framework Mirror Comparator -->\n        <div\n          class=\"transition-transform duration-200 ease-out will-change-transform\"\n          :style=\"{\n            transform: `perspective(1000px) rotateX(${cardRotations[2].rx}deg) rotateY(${cardRotations[2].ry}deg)`,\n          }\"\n          @mousemove=\"(e) => handleMouseMove(e, 2)\"\n          @mouseleave=\"() => handleMouseLeave(2)\"\n        >\n          <Card\n            class=\"border-border bg-card/95 hover:border-primary/50 relative flex h-full flex-col justify-between space-y-6 overflow-hidden rounded-2xl p-6 text-left shadow-xl transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n          >\n            <div class=\"space-y-3\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"bg-info/10 text-info flex size-9 items-center justify-center rounded-xl font-mono\">\n                  <LayoutGrid class=\"size-4\" />\n                </div>\n                <Badge variant=\"outline\" class=\"border-info/20 bg-info/10 text-info font-mono text-xs\">\n                  1:1 Parity\n                </Badge>\n              </div>\n\n              <h3 class=\"text-foreground font-mono text-lg font-bold\">Dual-Framework Compiler</h3>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                Identical DOM attributes, variants, and keyboard ergonomics across Vue 3.5 &amp; React 19.\n              </p>\n\n              <!-- Interactive Framework Switcher -->\n              <div class=\"border-border bg-muted/30 mt-4 space-y-2 rounded-xl border p-3 font-mono text-xs\">\n                <div class=\"bg-background border-border flex items-center gap-1 rounded-lg border p-1\">\n                  <button\n                    type=\"button\"\n                    class=\"flex-1 rounded py-1 text-center transition-colors\"\n                    :class=\"\n                      activeMirror === 'vue'\n                        ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                        : 'text-muted-foreground'\n                    \"\n                    @click=\"activeMirror = 'vue'\"\n                  >\n                    Vue 3.5 SFC\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"flex-1 rounded py-1 text-center transition-colors\"\n                    :class=\"\n                      activeMirror === 'react'\n                        ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                        : 'text-muted-foreground'\n                    \"\n                    @click=\"activeMirror = 'react'\"\n                  >\n                    React 19 JSX\n                  </button>\n                </div>\n                <p class=\"text-muted-foreground pt-1 text-xs\">\n                  {{ mirrorBadges[activeMirror] }}\n                </p>\n              </div>\n            </div>\n\n            <div\n              class=\"border-border/60 text-muted-foreground flex items-center justify-between border-t pt-4 font-mono text-xs\"\n            >\n              <span>AST Verified</span>\n              <span class=\"text-primary font-semibold\">&check; 100% Match</span>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FeatureHoverTiltCards.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "3D perspective tilt workbench cards with dynamic mouse tracking, interactive token efficiency sliders, spring impulse testing, and dual-framework parity inspect.",
  "categories": [
    "marketing"
  ]
}