{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "TiltedCard-JS-CSS",
	"title": "TiltedCard",
	"description": "3D perspective tilt card reacting to pointer.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:file",
			"path": "TiltedCard.css",
			"target": "@components/TiltedCard.css",
			"content": ".tilted-card-figure {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  perspective: 800px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.tilted-card-mobile-alert {\n  position: absolute;\n  top: 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  display: none;\n}\n\n@media (max-width: 640px) {\n  .tilted-card-mobile-alert {\n    display: block;\n  }\n  .tilted-card-caption {\n    display: none;\n  }\n}\n\n.tilted-card-inner {\n  position: relative;\n  transform-style: preserve-3d;\n}\n\n.tilted-card-img {\n  position: absolute;\n  top: 0;\n  left: 0;\n  object-fit: cover;\n  border-radius: 15px;\n  will-change: transform;\n  transform: translateZ(0);\n}\n\n.tilted-card-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  will-change: transform;\n  transform: translateZ(30px);\n}\n\n.tilted-card-caption {\n  pointer-events: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 4px;\n  background-color: #fff;\n  padding: 4px 10px;\n  font-size: 10px;\n  color: #2d2d2d;\n  opacity: 0;\n  z-index: 3;\n}\n"
		},
		{
			"type": "registry:component",
			"path": "TiltedCard.jsx",
			"content": "import { useRef, useState } from 'react';\nimport { motion, useMotionValue, useSpring } from 'motion/react';\nimport './TiltedCard.css';\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\n  const x = useMotionValue();\n  const y = useMotionValue();\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=\"tilted-card-figure\"\n      style={{\n        height: containerHeight,\n        width: containerWidth\n      }}\n      onMouseMove={handleMouse}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {showMobileWarning && (\n        <div className=\"tilted-card-mobile-alert\">This effect is not optimized for mobile. Check on desktop.</div>\n      )}\n\n      <motion.div\n        className=\"tilted-card-inner\"\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=\"tilted-card-img\"\n          style={{\n            width: imageWidth,\n            height: imageHeight\n          }}\n        />\n\n        {displayOverlayContent && overlayContent && (\n          <motion.div className=\"tilted-card-overlay\">{overlayContent}</motion.div>\n        )}\n      </motion.div>\n\n      {showTooltip && (\n        <motion.figcaption\n          className=\"tilted-card-caption\"\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"
	]
}