{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-hover-tilt-cards",
  "title": "Feature Hover Tilt Cards",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-hover-tilt-cards/FeatureHoverTiltCards.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Cpu, Eye, Layers, LayoutGrid, Zap } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface FeatureHoverTiltCardsProps {\n  className?: string\n}\n\nexport function FeatureHoverTiltCards({ className }: FeatureHoverTiltCardsProps) {\n  const [rotations, setRotations] = React.useState<Record<number, { rx: number; ry: number }>>({\n    0: { rx: 0, ry: 0 },\n    1: { rx: 0, ry: 0 },\n    2: { rx: 0, ry: 0 },\n  })\n\n  const [tokenScale, setTokenScale] = React.useState(100)\n  const [isPulsing, setIsPulsing] = React.useState(false)\n  const [activeMirror, setActiveMirror] = React.useState<'vue' | 'react'>('vue')\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>, index: number) => {\n    const card = e.currentTarget\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    setRotations((prev) => ({\n      ...prev,\n      [index]: { rx: rotateX, ry: rotateY },\n    }))\n  }\n\n  const handleMouseLeave = (index: number) => {\n    setRotations((prev) => ({\n      ...prev,\n      [index]: { rx: 0, ry: 0 },\n    }))\n  }\n\n  const triggerSpringTest = () => {\n    setIsPulsing(true)\n    setTimeout(() => setIsPulsing(false), 600)\n  }\n\n  return (\n    <section\n      data-slot=\"feature-hover-tilt-cards\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      <div className=\"mx-auto max-w-7xl space-y-12\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <Eye className=\"text-primary size-3.5\" />\n            Tactile Physics &amp; Surface Depth\n          </Badge>\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            Engineered for tactile feedback &amp; micro-interactions.\n          </h2>\n          <p className=\"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 className=\"grid grid-cols-1 gap-6 [perspective:1200px] lg:grid-cols-3\">\n          {/* Card 1: Unbundled Token Inspector */}\n          <div\n            className=\"transition-transform duration-200 ease-out will-change-transform\"\n            style={{\n              transform: `perspective(1000px) rotateX(${rotations[0].rx}deg) rotateY(${rotations[0].ry}deg)`,\n            }}\n            onMouseMove={(e) => handleMouseMove(e, 0)}\n            onMouseLeave={() => handleMouseLeave(0)}\n          >\n            <Card className=\"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              <div className=\"space-y-3\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"bg-primary/10 text-primary flex size-9 items-center justify-center rounded-xl font-mono\">\n                    <Layers className=\"size-4\" />\n                  </div>\n                  <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                    Zero Bloat\n                  </Badge>\n                </div>\n\n                <h3 className=\"text-foreground font-mono text-lg font-bold\">Unbundled Code Ownership</h3>\n                <p className=\"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 className=\"border-border bg-muted/30 mt-4 space-y-2 rounded-xl border p-3.5\">\n                  <div className=\"flex items-center justify-between font-mono text-xs\">\n                    <span className=\"text-muted-foreground\">Tree-Shake Efficiency:</span>\n                    <span className=\"text-success font-bold\">{tokenScale}%</span>\n                  </div>\n                  <input\n                    type=\"range\"\n                    min=\"50\"\n                    max=\"100\"\n                    value={tokenScale}\n                    onChange={(e) => setTokenScale(Number(e.target.value))}\n                    className=\"accent-primary bg-border h-1.5 w-full cursor-pointer rounded-lg\"\n                  />\n                  <p className=\"text-muted-foreground font-mono text-xs\">\n                    Unused variants automatically pruned at compile time.\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"border-border/60 text-muted-foreground flex items-center justify-between border-t pt-4 font-mono text-xs\">\n                <span>0 dependencies added</span>\n                <span className=\"text-primary font-semibold\">&check; Pure Source</span>\n              </div>\n            </Card>\n          </div>\n\n          {/* Card 2: Spring Velocity Simulator */}\n          <div\n            className=\"transition-transform duration-200 ease-out will-change-transform\"\n            style={{\n              transform: `perspective(1000px) rotateX(${rotations[1].rx}deg) rotateY(${rotations[1].ry}deg)`,\n            }}\n            onMouseMove={(e) => handleMouseMove(e, 1)}\n            onMouseLeave={() => handleMouseLeave(1)}\n          >\n            <Card className=\"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              <div className=\"space-y-3\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"bg-warning/10 text-warning flex size-9 items-center justify-center rounded-xl font-mono\">\n                    <Zap className=\"size-4\" />\n                  </div>\n                  <Badge variant=\"outline\" className=\"border-warning/20 bg-warning/10 text-warning font-mono text-xs\">\n                    Fluid Motion\n                  </Badge>\n                </div>\n\n                <h3 className=\"text-foreground font-mono text-lg font-bold\">Spring Physics Engine</h3>\n                <p className=\"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 className=\"border-border bg-muted/30 mt-4 space-y-3 rounded-xl border p-3.5 text-center\">\n                  <div\n                    className={cn(\n                      '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                      isPulsing ? 'bg-success ring-success/30 scale-125 rotate-12 ring-4' : 'scale-100',\n                    )}\n                  >\n                    <Cpu className=\"size-5\" />\n                  </div>\n\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    className=\"h-8 w-full font-mono text-xs\"\n                    onClick={triggerSpringTest}\n                  >\n                    Trigger Spring Impulse\n                  </Button>\n                </div>\n              </div>\n\n              <div className=\"border-border/60 text-muted-foreground flex items-center justify-between border-t pt-4 font-mono text-xs\">\n                <span>Duration: 180ms</span>\n                <span className=\"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            className=\"transition-transform duration-200 ease-out will-change-transform\"\n            style={{\n              transform: `perspective(1000px) rotateX(${rotations[2].rx}deg) rotateY(${rotations[2].ry}deg)`,\n            }}\n            onMouseMove={(e) => handleMouseMove(e, 2)}\n            onMouseLeave={() => handleMouseLeave(2)}\n          >\n            <Card className=\"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              <div className=\"space-y-3\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"bg-info/10 text-info flex size-9 items-center justify-center rounded-xl font-mono\">\n                    <LayoutGrid className=\"size-4\" />\n                  </div>\n                  <Badge variant=\"outline\" className=\"border-info/20 bg-info/10 text-info font-mono text-xs\">\n                    1:1 Parity\n                  </Badge>\n                </div>\n\n                <h3 className=\"text-foreground font-mono text-lg font-bold\">Dual-Framework Compiler</h3>\n                <p className=\"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 className=\"border-border bg-muted/30 mt-4 space-y-2 rounded-xl border p-3 font-mono text-xs\">\n                  <div className=\"bg-background border-border flex items-center gap-1 rounded-lg border p-1\">\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'flex-1 rounded py-1 text-center transition-colors',\n                        activeMirror === 'vue'\n                          ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                          : 'text-muted-foreground',\n                      )}\n                      onClick={() => setActiveMirror('vue')}\n                    >\n                      Vue 3.5 SFC\n                    </button>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'flex-1 rounded py-1 text-center transition-colors',\n                        activeMirror === 'react'\n                          ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                          : 'text-muted-foreground',\n                      )}\n                      onClick={() => setActiveMirror('react')}\n                    >\n                      React 19 JSX\n                    </button>\n                  </div>\n                  <p className=\"text-muted-foreground pt-1 text-xs\">\n                    {activeMirror === 'vue' ? '<script setup lang=\"ts\"> + Reka UI' : \"'use client' + Radix UI\"}\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"border-border/60 text-muted-foreground flex items-center justify-between border-t pt-4 font-mono text-xs\">\n                <span>AST Verified</span>\n                <span className=\"text-primary font-semibold\">&check; 100% Match</span>\n              </div>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport default FeatureHoverTiltCards\n",
      "type": "registry:block",
      "target": "~/components/blocks/FeatureHoverTiltCards.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/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"
  ]
}