{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tilt-card-demo",
  "title": "3D Tilt Card Demo",
  "description": "Demo usage for the 3D Tilt Card component",
  "registryDependencies": [
    "@spectrumui/tilt-card"
  ],
  "files": [
    {
      "path": "app/registry/tilt-card/tilt-card-demo.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport Image from \"next/image\"\nimport { TiltCard, TiltCardItem } from \"@/components/spectrumui/tilt-card\"\n\nexport default function TiltCardDemo() {\n  return (\n    <div className=\"flex w-full flex-col items-center gap-5 py-10\">\n      <TiltCard className=\"w-full max-w-sm p-6\" containerClassName=\"w-full max-w-sm\">\n        <TiltCardItem\n          depth={50}\n          className=\"text-xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-100\"\n        >\n          Aurora Headphones\n        </TiltCardItem>\n        <TiltCardItem\n          depth={30}\n          className=\"mt-1 text-sm text-neutral-500 dark:text-neutral-400\"\n        >\n          Studio sound with adaptive noise cancellation.\n        </TiltCardItem>\n        <TiltCardItem depth={80} className=\"mt-4\">\n          <Image\n            src=\"/product/product1.jpg\"\n            alt=\"Aurora Headphones product shot\"\n            width={640}\n            height={416}\n            className=\"h-52 w-full rounded-xl object-cover\"\n          />\n        </TiltCardItem>\n        {/* preserve-3d keeps the nested TiltCardItem depths from flattening */}\n        <div\n          className=\"mt-5 flex items-center justify-between\"\n          style={{ transformStyle: \"preserve-3d\" }}\n        >\n          <TiltCardItem\n            depth={40}\n            className=\"text-lg font-bold text-neutral-900 dark:text-neutral-100\"\n          >\n            $249\n          </TiltCardItem>\n          <TiltCardItem depth={60}>\n            <button\n              type=\"button\"\n              className=\"rounded-full bg-neutral-900 px-4 py-2 text-xs font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-neutral-950 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200 dark:focus-visible:ring-neutral-300\"\n            >\n              Buy now →\n            </button>\n          </TiltCardItem>\n        </div>\n      </TiltCard>\n\n      <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n        Move the pointer across the card — layers lift at different depths\n      </p>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/tilt-card-demo.tsx"
    }
  ],
  "type": "registry:component"
}