{"version":3,"file":"ImageComparisonSlider.DCuEndxe.mjs","names":["useRef","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/KQ5Zi3dK4nJqIzuaWkdb/JoaFiwSYdlJKCSLhD7Ce/ImageComparisonSlider.js"],"sourcesContent":["// Image Comparison Slider with interactive divider that follows the web cursor\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useCallback,useEffect,useRef,useState,startTransition}from\"react\";/**\n * Image Comparison Slider\n *\n * @framerIntrinsicWidth 500\n * @framerIntrinsicHeight 300\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ImageComparisonSlider(props){const{beforeImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Before image\"},afterImage={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"After image\"},orientation=\"horizontal\",initialPosition=50,dividerColor=\"#FFFFFF\",dividerWidth=2,dividerShadow=true,showHandle=false,handleColor=\"#FFFFFF\",handleSize=40,followCursor=true,cursorStyle=\"resize\"}=props;const isHorizontal=orientation===\"horizontal\";const containerRef=useRef(null);const[position,setPosition]=useState(initialPosition);const[targetPosition,setTargetPosition]=useState(initialPosition);const[isDragging,setIsDragging]=useState(false);const isStatic=useIsStaticRenderer();// For cursor-following\nconst[hovering,setHovering]=useState(false);const updatePositionFromEvent=useCallback(e=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();if(isHorizontal){const x=e.clientX-rect.left;const newPosition=Math.max(0,Math.min(100,x/rect.width*100));if(isDragging){startTransition(()=>setPosition(newPosition));}else if(followCursor&&hovering){startTransition(()=>setTargetPosition(newPosition));}}else{const y=e.clientY-rect.top;const newPosition=Math.max(0,Math.min(100,y/rect.height*100));if(isDragging){startTransition(()=>setPosition(newPosition));}else if(followCursor&&hovering){startTransition(()=>setTargetPosition(newPosition));}}},[isHorizontal,isDragging,followCursor,hovering]);const handleClick=useCallback(e=>{if(!isDragging){updatePositionFromEvent(e);if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();if(isHorizontal){const x=e.clientX-rect.left;const newPosition=Math.max(0,Math.min(100,x/rect.width*100));startTransition(()=>setPosition(newPosition));}else{const y=e.clientY-rect.top;const newPosition=Math.max(0,Math.min(100,y/rect.height*100));startTransition(()=>setPosition(newPosition));}}},[isDragging,updatePositionFromEvent,isHorizontal]);const handleDoubleClick=()=>{startTransition(()=>setPosition(initialPosition));};const handleMouseDown=e=>{e.preventDefault();startTransition(()=>setIsDragging(true));};const handleMouseMove=useCallback(e=>{if(isDragging||followCursor&&hovering){updatePositionFromEvent(e);}},[isDragging,updatePositionFromEvent,followCursor,hovering]);const handleMouseUp=useCallback(()=>{startTransition(()=>setIsDragging(false));},[]);useEffect(()=>{if(isStatic)return;const handleGlobalMouseMove=e=>handleMouseMove(e);const handleGlobalMouseUp=()=>handleMouseUp();if(isDragging){window.addEventListener(\"mousemove\",handleGlobalMouseMove);window.addEventListener(\"mouseup\",handleGlobalMouseUp);}return()=>{window.removeEventListener(\"mousemove\",handleGlobalMouseMove);window.removeEventListener(\"mouseup\",handleGlobalMouseUp);};},[isDragging,handleMouseMove,handleMouseUp,isStatic]);// Smooth animation loop for cursor following\nuseEffect(()=>{if(isStatic||isDragging||!followCursor||!hovering)return;let animationFrameId;const animate=()=>{setPosition(currentPosition=>{const diff=targetPosition-currentPosition;const step=diff*.08// Easing factor for smooth follow\n;if(Math.abs(diff)<.1){return targetPosition;}return currentPosition+step;});animationFrameId=requestAnimationFrame(animate);};animationFrameId=requestAnimationFrame(animate);return()=>{if(animationFrameId){cancelAnimationFrame(animationFrameId);}};},[targetPosition,isStatic,isDragging,followCursor,hovering]);// For hover/cursor-follow\nconst handleMouseEnter=()=>setHovering(true);const handleMouseLeave=()=>setHovering(false);const getCursorStyle=()=>{if(cursorStyle===\"none\")return\"none\";if(cursorStyle===\"pointer\")return\"pointer\";if(isDragging){return isHorizontal?\"ew-resize\":\"ns-resize\";}if(followCursor){return isHorizontal?\"ew-resize\":\"ns-resize\";}return\"pointer\";};return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",cursor:getCursorStyle(),userSelect:\"none\"},onClick:isStatic?undefined:handleClick,onMouseMove:isStatic?undefined:handleMouseMove,onMouseDown:isStatic?undefined:handleMouseDown,onMouseUp:isStatic?undefined:handleMouseUp,onDoubleClick:handleDoubleClick,onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,tabIndex:0,role:\"slider\",\"aria-valuenow\":position,\"aria-valuemin\":0,\"aria-valuemax\":100,\"aria-orientation\":orientation,children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${afterImage.src})`,backgroundSize:\"cover\",backgroundPosition:\"center\"},\"aria-label\":afterImage.alt,role:\"img\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${beforeImage.src})`,backgroundSize:\"cover\",backgroundPosition:\"center\",clipPath:isHorizontal?`inset(0 ${100-position}% 0 0)`:`inset(0 0 ${100-position}% 0)`},\"aria-label\":beforeImage.alt,role:\"img\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:isHorizontal?0:`${position}%`,left:isHorizontal?`${position}%`:0,width:isHorizontal?`${dividerWidth}px`:\"100%\",height:isHorizontal?\"100%\":`${dividerWidth}px`,backgroundColor:dividerColor,boxShadow:dividerShadow?\"0 0 5px rgba(0, 0, 0, 0.7)\":\"none\",transform:isHorizontal?`translateX(-${dividerWidth/2}px)`:`translateY(-${dividerWidth/2}px)`,cursor:cursorStyle===\"none\"?\"none\":isHorizontal?\"ew-resize\":\"ns-resize\",zIndex:2,transition:hovering&&!isDragging?\"background 0.15s, box-shadow 0.15s\":undefined},onMouseDown:isStatic?undefined:handleMouseDown}),showHandle&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:isHorizontal?`calc(50% - ${handleSize/2}px)`:`${position}%`,left:isHorizontal?`${position}%`:`calc(50% - ${handleSize/2}px)`,width:`${handleSize}px`,height:`${handleSize}px`,borderRadius:\"50%\",backgroundColor:handleColor,border:`2px solid ${handleColor}`,boxShadow:\"0 0 5px rgba(0, 0, 0, 0.5)\",transform:isHorizontal?`translateX(-${handleSize/2}px)`:`translateY(-${handleSize/2}px)`,cursor:cursorStyle===\"none\"?\"none\":isHorizontal?\"ew-resize\":\"ns-resize\",zIndex:3,display:\"flex\",justifyContent:\"center\",alignItems:\"center\"},onMouseDown:isStatic?undefined:handleMouseDown})]});}addPropertyControls(ImageComparisonSlider,{beforeImage:{type:ControlType.ResponsiveImage,title:\"Before Image\"},afterImage:{type:ControlType.ResponsiveImage,title:\"After Image\"},orientation:{type:ControlType.Enum,title:\"Orientation\",options:[\"horizontal\",\"vertical\"],optionTitles:[\"Horizontal\",\"Vertical\"],defaultValue:\"horizontal\",displaySegmentedControl:true},initialPosition:{type:ControlType.Number,title:\"Initial Position\",defaultValue:50,min:0,max:100,step:1,unit:\"%\"},dividerColor:{type:ControlType.Color,title:\"Divider Color\",defaultValue:\"#FFFFFF\"},dividerWidth:{type:ControlType.Number,title:\"Divider Width\",defaultValue:2,min:1,max:20,step:1,unit:\"px\"},dividerShadow:{type:ControlType.Boolean,title:\"Divider Shadow\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},showHandle:{type:ControlType.Boolean,title:\"Show Handle\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},handleColor:{type:ControlType.Color,title:\"Handle Color\",defaultValue:\"#FFFFFF\",hidden:({showHandle})=>!showHandle},handleSize:{type:ControlType.Number,title:\"Handle Size\",defaultValue:40,min:20,max:80,step:1,unit:\"px\",hidden:({showHandle})=>!showHandle},followCursor:{type:ControlType.Boolean,title:\"Follow Cursor\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},cursorStyle:{type:ControlType.Enum,title:\"Cursor Style\",options:[\"resize\",\"pointer\",\"none\"],optionTitles:[\"Resize\",\"Pointer\",\"None\"],defaultValue:\"resize\",displaySegmentedControl:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageComparisonSlider\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicHeight\":\"300\",\"framerIntrinsicWidth\":\"500\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageComparisonSlider.map"],"mappings":"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"}