{
  "name": "tilt-card",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "tilt-card.tsx",
      "content": "\"use client\";\r\n\r\nimport { css } from \"@yugnex/core\";\r\nimport { useRef, type CSSProperties, type MouseEvent, type ReactNode } from \"react\";\r\n\r\nconst wrapperClass = css({\r\n  perspective: \"1200px\",\r\n});\r\n\r\nconst cardClass = css({\r\n  transformStyle: \"preserve-3d\",\r\n  willChange: \"transform\",\r\n});\r\n\r\nexport interface TiltCardProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n  style?: CSSProperties;\r\n  /** Max rotation in degrees at the card's edge. */\r\n  maxTilt?: number;\r\n}\r\n\r\n/**\r\n * Wraps children in a mouse-tracked 3D perspective tilt. Transform is written\r\n * directly to the DOM node (not via React state) so tracking stays 1:1 with\r\n * the cursor at 60fps; only the return-to-neutral on mouseleave gets a CSS\r\n * transition, giving it a magnetic snap-back feel.\r\n */\r\nexport function TiltCard({ children, className, style, maxTilt = 10 }: TiltCardProps) {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n\r\n  function handleMouseMove(event: MouseEvent<HTMLDivElement>) {\r\n    const el = ref.current;\r\n    if (!el) return;\r\n    const rect = el.getBoundingClientRect();\r\n    const x = (event.clientX - rect.left) / rect.width;\r\n    const y = (event.clientY - rect.top) / rect.height;\r\n    const rotateY = (x - 0.5) * maxTilt * 2;\r\n    const rotateX = (0.5 - y) * maxTilt * 2;\r\n    el.style.transition = \"transform 0ms\";\r\n    el.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;\r\n  }\r\n\r\n  function handleMouseLeave() {\r\n    const el = ref.current;\r\n    if (!el) return;\r\n    el.style.transition = \"transform 400ms cubic-bezier(0.2, 0, 0, 1)\";\r\n    el.style.transform = \"rotateX(0deg) rotateY(0deg) scale(1)\";\r\n  }\r\n\r\n  return (\r\n    <div className={wrapperClass} style={style}>\r\n      <div\r\n        ref={ref}\r\n        className={className ? `${cardClass} ${className}` : cardClass}\r\n        onMouseMove={handleMouseMove}\r\n        onMouseLeave={handleMouseLeave}\r\n      >\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}