{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "TiltedCard-JS-TW",
	"title": "TiltedCard",
	"description": "3D perspective tilt card reacting to pointer.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "TiltedCard/TiltedCard.jsx",
			"content": "import { useRef, useState } from 'react';\nimport { motion, useMotionValue, useSpring } from 'motion/react';\n\nconst springValues = {\n  damping: 30,\n  stiffness: 100,\n  mass: 2\n};\n\nexport default function TiltedCard({\n  imageSrc,\n  altText = 'Tilted card image',\n  captionText = '',\n  containerHeight = '300px',\n  containerWidth = '100%',\n  imageHeight = '300px',\n  imageWidth = '300px',\n  scaleOnHover = 1.1,\n  rotateAmplitude = 14,\n  showMobileWarning = true,\n  showTooltip = true,\n  overlayContent = null,\n  displayOverlayContent = false\n}) {\n  const ref = useRef(null);\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n  const rotateX = useSpring(useMotionValue(0), springValues);\n  const rotateY = useSpring(useMotionValue(0), springValues);\n  const scale = useSpring(1, springValues);\n  const opacity = useSpring(0);\n  const rotateFigcaption = useSpring(0, {\n    stiffness: 350,\n    damping: 30,\n    mass: 1\n  });\n\n  const [lastY, setLastY] = useState(0);\n\n  function handleMouse(e) {\n    if (!ref.current) return;\n\n    const rect = ref.current.getBoundingClientRect();\n    const offsetX = e.clientX - rect.left - rect.width / 2;\n    const offsetY = e.clientY - rect.top - rect.height / 2;\n\n    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;\n    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;\n\n    rotateX.set(rotationX);\n    rotateY.set(rotationY);\n\n    x.set(e.clientX - rect.left);\n    y.set(e.clientY - rect.top);\n\n    const velocityY = offsetY - lastY;\n    rotateFigcaption.set(-velocityY * 0.6);\n    setLastY(offsetY);\n  }\n\n  function handleMouseEnter() {\n    scale.set(scaleOnHover);\n    opacity.set(1);\n  }\n\n  function handleMouseLeave() {\n    opacity.set(0);\n    scale.set(1);\n    rotateX.set(0);\n    rotateY.set(0);\n    rotateFigcaption.set(0);\n  }\n\n  return (\n    <figure\n      ref={ref}\n      className=\"relative w-full h-full [perspective:800px] flex flex-col items-center justify-center\"\n      style={{\n        height: containerHeight,\n        width: containerWidth\n      }}\n      onMouseMove={handleMouse}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {showMobileWarning && (\n        <div className=\"absolute top-4 text-center text-sm block sm:hidden\">\n          This effect is not optimized for mobile. Check on desktop.\n        </div>\n      )}\n\n      <motion.div\n        className=\"relative [transform-style:preserve-3d]\"\n        style={{\n          width: imageWidth,\n          height: imageHeight,\n          rotateX,\n          rotateY,\n          scale\n        }}\n      >\n        <motion.img\n          src={imageSrc}\n          alt={altText}\n          className=\"absolute top-0 left-0 object-cover rounded-[15px] will-change-transform [transform:translateZ(0)]\"\n          style={{\n            width: imageWidth,\n            height: imageHeight\n          }}\n        />\n\n        {displayOverlayContent && overlayContent && (\n          <motion.div className=\"absolute top-0 left-0 z-[2] will-change-transform [transform:translateZ(30px)]\">\n            {overlayContent}\n          </motion.div>\n        )}\n      </motion.div>\n\n      {showTooltip && (\n        <motion.figcaption\n          className=\"pointer-events-none absolute left-0 top-0 rounded-[4px] bg-white px-[10px] py-[4px] text-[10px] text-[#2d2d2d] opacity-0 z-[3] hidden sm:block\"\n          style={{\n            x,\n            y,\n            opacity,\n            rotate: rotateFigcaption\n          }}\n        >\n          {captionText}\n        </motion.figcaption>\n      )}\n    </figure>\n  );\n}\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"motion@^12.23.12"
	]
}