{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tilt-card",
  "title": "Tilt Card",
  "description": "A 3D card that tilts toward the pointer with a moving glare.",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/tilt-card.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { gsap, motionScale, useGSAP } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\ntype TiltCardProps = React.ComponentProps<\"div\"> & {\n  /** Maximum tilt in degrees. */\n  max?: number;\n  /** A light glare that follows the pointer across the surface. */\n  glare?: boolean;\n};\n\n/** A surface that tilts toward the pointer in 3D with a following glare, then settles back elastically (GSAP). */\nfunction TiltCard({ className, max = 10, glare = true, children, ...props }: TiltCardProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  useGSAP(\n    () => {\n      const el = ref.current;\n      if (!el) return;\n      gsap.set(el, { transformPerspective: 900, \"--glare-x\": \"50%\", \"--glare-y\": \"50%\" });\n    },\n    { scope: ref },\n  );\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"tilt-card\"\n      className={cn(\"relative overflow-hidden rounded-2xl border border-border bg-card shadow-raised will-change-transform [transform-style:preserve-3d]\", className)}\n      onPointerMove={(e) => {\n        const scale = motionScale(e.currentTarget);\n        if (!scale) return;\n        const r = e.currentTarget.getBoundingClientRect();\n        const px = (e.clientX - r.left) / r.width;\n        const py = (e.clientY - r.top) / r.height;\n        const k = max * Math.min(scale, 1.5);\n        gsap.to(e.currentTarget, { rotateY: (px - 0.5) * 2 * k, rotateX: (0.5 - py) * 2 * k, \"--glare-x\": `${px * 100}%`, \"--glare-y\": `${py * 100}%`, duration: 0.45, ease: \"cue\", overwrite: \"auto\" });\n      }}\n      onPointerLeave={(e) => gsap.to(e.currentTarget, { rotateX: 0, rotateY: 0, duration: 0.9, ease: \"elastic.out(1, 0.4)\" })}\n      {...props}\n    >\n      {children}\n      {glare && (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 [background:radial-gradient(circle_at_var(--glare-x,50%)_var(--glare-y,50%),color-mix(in_oklch,var(--foreground),transparent_88%),transparent_55%)] group-hover/tilt:opacity-100 [[data-slot=tilt-card]:hover>&]:opacity-100\"\n        />\n      )}\n    </div>\n  );\n}\n\nexport { TiltCard };\nexport type { TiltCardProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/tilt-card",
  "categories": [
    "effects"
  ],
  "type": "registry:ui"
}