{"version":3,"file":"TiltCard.o7SQ_vym.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/ZdcEJBkO55YTcJALci4g/nlKYbNlFrgk8TtUwqVSm/TiltCard.js"],"sourcesContent":["// 3D Tilt Effect that tilts the parent element when hovering\n// Version 1.1\n// First created 30 Sep 2025\n// Last edited 24 Nov 2025\n// By Wes Ambler\n// © Kompa Design Pty Ltd\n//\n// Changes:\n// 24 Nov 2025: Added intrinsic width and height so it's 10x10px by default\n//              And added tag to bottom\n//\n// -----------------------------------------------------------------------------\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useEffect,useRef}from\"react\";import{useMotionValue,useSpring}from\"framer-motion\";/**\n * @framerDisableUnlink\n *\n * @framerIntrinsicWidth 10\n * @framerIntrinsicHeight 10\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function TiltCard(props){const{intensity,smoothing,hoverArea,enabled,perspective,scale,shimmerEnabled,shimmerIntensity,shimmerColor}=props;const isCanvas=RenderTarget.current()===RenderTarget.canvas;const transition={damping:100,stiffness:mapRange(smoothing,0,100,2e3,50)};const mouseX=useMotionValue(0);const mouseY=useMotionValue(0);const rotateX=useMotionValue(0);const rotateY=useMotionValue(0);const scaleValue=useMotionValue(1);const shimmerX=useMotionValue(50);const shimmerY=useMotionValue(50);const springRotateX=useSpring(rotateX,transition);const springRotateY=useSpring(rotateY,transition);const springScale=useSpring(scaleValue,transition);const springShimmerX=useSpring(shimmerX,transition);const springShimmerY=useSpring(shimmerY,transition);const ref=useRef(null);const parentRef=useRef(null);const shimmerRef=useRef(null);const hasSpringRef=useRef(smoothing!==0);useEffect(()=>{const unsubscribeX=mouseX.onChange(v=>{rotateY.set(enabled?v*intensity:0);shimmerX.set(enabled&&shimmerEnabled?(-v+1)*50:50);});const unsubscribeY=mouseY.onChange(v=>{rotateX.set(enabled?-v*intensity:0);shimmerY.set(enabled&&shimmerEnabled?(-v+1)*50:50);});const unsubscribeScale=mouseX.onChange(()=>{const isHovering=Math.abs(mouseX.get())>0||Math.abs(mouseY.get())>0;scaleValue.set(enabled&&isHovering?scale:1);});const unsubscribeScaleY=mouseY.onChange(()=>{const isHovering=Math.abs(mouseX.get())>0||Math.abs(mouseY.get())>0;scaleValue.set(enabled&&isHovering?scale:1);});return()=>{unsubscribeX();unsubscribeY();unsubscribeScale();unsubscribeScaleY();};},[enabled,mouseX,mouseY,rotateX,rotateY,intensity,scale,scaleValue,shimmerEnabled,shimmerX,shimmerY]);useEffect(()=>{rotateX.set(enabled?-mouseY.get()*intensity:0);rotateY.set(enabled?mouseX.get()*intensity:0);const isHovering=Math.abs(mouseX.get())>0||Math.abs(mouseY.get())>0;scaleValue.set(enabled&&isHovering?scale:1);shimmerX.set(enabled&&shimmerEnabled?(mouseX.get()+1)*50:50);shimmerY.set(enabled&&shimmerEnabled?(mouseY.get()+1)*50:50);},[enabled,intensity,scale,shimmerEnabled]);useEffect(()=>{hasSpringRef.current=smoothing!==0;},[smoothing]);useEffect(()=>{let animationFrameId;const updateTransform=()=>{if(isCanvas){return;}animationFrameId=requestAnimationFrame(updateTransform);if(!parentRef.current){return;}const rotateXValue=hasSpringRef.current?springRotateX.get():rotateX.get();const rotateYValue=hasSpringRef.current?springRotateY.get():rotateY.get();const scaleVal=hasSpringRef.current?springScale.get():scaleValue.get();const transform=`perspective(${perspective}px) rotateX(${rotateXValue.toFixed(3)}deg) rotateY(${rotateYValue.toFixed(3)}deg) scale(${scaleVal.toFixed(3)})`;parentRef.current.style.transform=transform;parentRef.current.style.transformStyle=\"preserve-3d\";// Update shimmer position\nif(shimmerRef.current&&shimmerEnabled){const shimmerXValue=hasSpringRef.current?springShimmerX.get():shimmerX.get();const shimmerYValue=hasSpringRef.current?springShimmerY.get():shimmerY.get();shimmerRef.current.style.background=`radial-gradient(circle at ${shimmerXValue}% ${shimmerYValue}%, ${shimmerColor} 0%, transparent 70%)`;shimmerRef.current.style.opacity=enabled?shimmerIntensity.toString():\"0\";}};if(ref.current){const container=ref.current.parentElement;if(container){const parent=container.parentElement;if(parent){parentRef.current=parent;// Create shimmer overlay if it doesn't exist\nif(shimmerEnabled&&!shimmerRef.current){const shimmerElement=document.createElement(\"div\");shimmerElement.style.position=\"absolute\";shimmerElement.style.top=\"0\";shimmerElement.style.left=\"0\";shimmerElement.style.width=\"100%\";shimmerElement.style.height=\"100%\";shimmerElement.style.pointerEvents=\"none\";shimmerElement.style.borderRadius=\"inherit\";shimmerElement.style.zIndex=\"1\";shimmerElement.style.mixBlendMode=\"overlay\";parent.appendChild(shimmerElement);shimmerRef.current=shimmerElement;}}}}updateTransform();return()=>{if(animationFrameId){cancelAnimationFrame(animationFrameId);}};},[perspective,shimmerEnabled,shimmerIntensity,shimmerColor]);useEffect(()=>{const handleMouseMove=event=>{if(!parentRef.current){return;}const element=parentRef.current;const rect=element.getBoundingClientRect();const mouseXPos=event.clientX;const mouseYPos=event.clientY;const isHovering=mouseXPos>=rect.left-hoverArea&&mouseXPos<=rect.right+hoverArea&&mouseYPos>=rect.top-hoverArea&&mouseYPos<=rect.bottom+hoverArea;if(isHovering){const displacementX=mouseXPos-(rect.left+rect.width/2);const displacementY=mouseYPos-(rect.top+rect.height/2);const normalizedX=displacementX/(rect.width/2);const normalizedY=displacementY/(rect.height/2);mouseX.set(normalizedX);mouseY.set(normalizedY);scaleValue.set(enabled?scale:1);}else{mouseX.set(0);mouseY.set(0);scaleValue.set(1);shimmerX.set(50);shimmerY.set(50);}};const handleMouseLeave=()=>{mouseX.set(0);mouseY.set(0);scaleValue.set(1);shimmerX.set(50);shimmerY.set(50);};window.addEventListener(\"mousemove\",handleMouseMove);window.addEventListener(\"mouseleave\",handleMouseLeave);return()=>{window.removeEventListener(\"mousemove\",handleMouseMove);window.removeEventListener(\"mouseleave\",handleMouseLeave);// Clean up shimmer element\nif(shimmerRef.current&&shimmerRef.current.parentNode){shimmerRef.current.parentNode.removeChild(shimmerRef.current);}};},[hoverArea,enabled,shimmerEnabled]);return /*#__PURE__*/_jsx(\"div\",{ref:ref,style:{...props.style,minWidth:\"20px\",minHeight:\"20px\",width:props.style?.width||\"20px\",height:props.style?.height||\"20px\"}});}TiltCard.displayName=\"3D Tilt Effect\";addPropertyControls(TiltCard,{enabled:{type:ControlType.Boolean,title:\"Enabled\",defaultValue:true},intensity:{type:ControlType.Number,title:\"Tilt Intensity\",defaultValue:15,min:0,max:45,step:1,unit:\"deg\"},scale:{type:ControlType.Number,title:\"Hover Scale\",defaultValue:1.05,min:.5,max:2,step:.05},shimmerEnabled:{type:ControlType.Boolean,title:\"Shimmer Effect\",defaultValue:true},shimmerIntensity:{type:ControlType.Number,title:\"Shimmer Intensity\",defaultValue:.3,min:0,max:1,step:.1,hidden:({shimmerEnabled})=>!shimmerEnabled},shimmerColor:{type:ControlType.Color,title:\"Shimmer Color\",defaultValue:\"#ffffff\",hidden:({shimmerEnabled})=>!shimmerEnabled},hoverArea:{type:ControlType.Number,title:\"Hover Area\",defaultValue:20,min:0,max:100,step:1,unit:\"px\"},perspective:{type:ControlType.Number,title:\"Perspective\",defaultValue:1e3,min:100,max:2e3,step:50,unit:\"px\"},smoothing:{type:ControlType.Number,title:\"Smoothing\",defaultValue:50,min:0,max:100,step:1,description:\"Build better sites, faster with [Kompa](https://www.kompa.design)\"}});function mapRange(value,fromLow,fromHigh,toLow,toHigh){if(fromLow===fromHigh){return toLow;}const percentage=(value-fromLow)/(fromHigh-fromLow);return toLow+percentage*(toHigh-toLow);}\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TiltCard\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicWidth\":\"10\",\"framerDisableUnlink\":\"*\",\"framerIntrinsicHeight\":\"10\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TiltCard.map"],"mappings":"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"}