react-3d-card-motion/dist/index.js

A customizable 3D interactive product card built with React & Framer Motion.

'use strict';Object.defineProperty(exports,'__esModule',{value:true});var e=require('react'),framerMotion=require('framer-motion'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var e__namespace=/*#__PURE__*/_interopNamespace(e);var N=({width:g="300px",height:m="400px",background:f="linear-gradient(135deg,#9333ea 0%,#4338ca 100%)",title:b="3D Product",subtitle:y="Hover & drag to explore",radius:x="16px",maxTilt:t=20,shadow:h="0 18px 45px rgba(0,0,0,0.35)",draggable:v=true,initialRotate:a={x:0,y:0},disableTilt:l=false,perspective:P=800,children:d,style:R,className:C,...M})=>{let u=e__namespace.useRef(null),[p,r]=e__namespace.useState(a),w=e__namespace.useCallback((i,c)=>{let n=u.current;if(!n)return {x:0,y:0};let o=n.getBoundingClientRect(),X=i-o.left,Y=c-o.top,k=X/o.width,D=(Y/o.height-.5)*t*2,F=(.5-k)*t*2;return {x:D,y:F}},[t]),L=i=>{if(l)return;let{clientX:c,clientY:n}=i;r(w(c,n));},S=()=>{r(a);},B=()=>{l||r({x:t/3,y:-t/3});},H=()=>{r(a);};return jsxRuntime.jsx("div",{style:{perspective:P,display:"inline-block"},children:jsxRuntime.jsx(framerMotion.motion.div,{ref:u,role:"button",tabIndex:0,"aria-label":"Interactive 3D Card",onPointerMove:L,onPointerLeave:S,onFocus:B,onBlur:H,whileTap:{scale:.98},drag:v,dragConstraints:{top:0,left:0,right:0,bottom:0},style:{width:g,height:m,background:f,borderRadius:x,boxShadow:h,color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",transformStyle:"preserve-3d",transform:`rotateX(${p.x}deg) rotateY(${p.y}deg)`,transition:"transform 120ms ease",cursor:"pointer",...R},className:C,...M,children:d||jsxRuntime.jsxs("div",{style:{textAlign:"center",padding:"0 1rem"},children:[jsxRuntime.jsx("h2",{style:{fontSize:"1.4rem",fontWeight:700,marginBottom:8},children:b}),jsxRuntime.jsx("p",{style:{opacity:.9},children:y})]})})})},A=N;exports.ProductCard=N;exports.default=A;//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map