{"version":3,"file":"BeforeAfter.AX1YN7rw.mjs","names":["useRef","useState","useCallback","startTransition"],"sources":["https:/framerusercontent.com/modules/Cm4vXvwaMEDqwqMQTrqf/YdS8vinfLJ5LUCWZtPhE/BeforeAfter.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{startTransition,useCallback,useEffect,useRef,useState}from\"react\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerIntrinsicWidth 900\n * @framerIntrinsicHeight 560\n */export default function BeforeAfter(props){const{before={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Before restoration\"},after={src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"After restoration\"},beforeLabel=\"Before\",afterLabel=\"After\",start=50,handle=\"#F3EEE4\",labelBg=\"rgba(18,19,15,0.78)\",labelColor=\"#F3EEE4\",knob=\"#12130F\",demo=true}=props;const isStatic=useIsStaticRenderer();const ref=useRef(null);const[pos,setPos]=useState(start);const[drag,setDrag]=useState(false);const[focusRing,setFocusRing]=useState(false);const fromX=useCallback(clientX=>{const el=ref.current;if(!el)return;const r=el.getBoundingClientRect();const p=Math.max(0,Math.min(100,(clientX-r.left)/r.width*100));startTransition(()=>setPos(p));},[]);useEffect(()=>{if(!drag||isStatic)return;const move=e=>fromX(e.clientX);const up=()=>startTransition(()=>setDrag(false));window.addEventListener(\"pointermove\",move);window.addEventListener(\"pointerup\",up);window.addEventListener(\"pointercancel\",up);return()=>{window.removeEventListener(\"pointermove\",move);window.removeEventListener(\"pointerup\",up);window.removeEventListener(\"pointercancel\",up);};},[drag,isStatic,fromX]);// one short 50 → 30 → 70 → 50 sweep the first time it scrolls into view, to show it can be dragged\nconst touched=useRef(false);const[node,setNode]=useState(null);const attach=useCallback(el=>{ref.current=el;if(el)setNode(el);},[]);useEffect(()=>{const el=node;if(!demo||isStatic||!el||typeof window===\"undefined\"||window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches)return;let raf=0,done=false;const io=new IntersectionObserver(entries=>{if(done||!entries.some(e=>e.isIntersecting&&e.intersectionRatio>.55))return;done=true;io.disconnect();const keys=[start,30,70,start],seg=650,t0=performance.now();const ease=x=>x<.5?2*x*x:1-Math.pow(-2*x+2,2)/2;const tick=now=>{if(touched.current)return;const t=(now-t0)/seg,i=Math.min(Math.floor(t),keys.length-2),f=Math.min(1,t-i);setPos(keys[i]+(keys[i+1]-keys[i])*ease(f));if(t<keys.length-1)raf=requestAnimationFrame(tick);};raf=requestAnimationFrame(tick);},{threshold:[0,.55,1]});io.observe(el);return()=>{io.disconnect();if(raf)cancelAnimationFrame(raf);};},[demo,isStatic,start,node]);const tag={position:\"absolute\",top:16,padding:\"7px 11px\",borderRadius:999,background:labelBg,color:labelColor,fontFamily:'\"JetBrains Mono\", ui-monospace, monospace',fontSize:11,fontWeight:500,letterSpacing:\"0.08em\",textTransform:\"uppercase\",lineHeight:1,pointerEvents:\"none\",backdropFilter:\"blur(6px)\"};const img={position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\",userSelect:\"none\",pointerEvents:\"none\"};return /*#__PURE__*/_jsxs(\"div\",{ref:attach,style:{...props.style,position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",touchAction:\"pan-y\",userSelect:\"none\",WebkitUserSelect:\"none\",cursor:drag?\"grabbing\":\"ew-resize\",background:\"#E8E1D3\"},onPointerDown:isStatic?undefined:e=>{touched.current=true;fromX(e.clientX);startTransition(()=>setDrag(true));},children:[/*#__PURE__*/_jsx(\"img\",{loading:\"lazy\",decoding:\"async\",src:after.src,srcSet:after.srcSet,sizes:\"(max-width: 809px) 100vw, 1200px\",alt:after.alt||afterLabel,style:img,draggable:false}),/*#__PURE__*/_jsx(\"img\",{loading:\"lazy\",decoding:\"async\",src:before.src,srcSet:before.srcSet,sizes:\"(max-width: 809px) 100vw, 1200px\",alt:before.alt||beforeLabel,style:{...img,clipPath:`inset(0 ${100-pos}% 0 0)`},draggable:false}),/*#__PURE__*/_jsx(\"span\",{style:{...tag,left:16,opacity:pos>12?1:0,transition:\"opacity .2s\"},children:beforeLabel}),/*#__PURE__*/_jsx(\"span\",{style:{...tag,right:16,opacity:pos<88?1:0,transition:\"opacity .2s\"},children:afterLabel}),/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":\"true\",style:{position:\"absolute\",top:0,bottom:0,left:`${pos}%`,width:1,marginLeft:-.5,background:handle,boxShadow:\"0 0 10px rgba(0,0,0,0.35)\"}}),/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":\"true\",style:{position:\"absolute\",top:\"50%\",left:`${pos}%`,width:40,height:40,marginLeft:-20,marginTop:-20,borderRadius:999,background:knob,border:`1px solid ${handle}`,color:handle,fontFamily:'\"Inter\", sans-serif',fontSize:18,lineHeight:1,cursor:\"ew-resize\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",boxShadow:focusRing?`0 6px 18px rgba(0,0,0,0.3), 0 0 0 3px ${knob}, 0 0 0 5px ${handle}`:\"0 6px 18px rgba(0,0,0,0.3)\",pointerEvents:\"none\"},children:/*#__PURE__*/_jsx(\"span\",{style:{letterSpacing:\"0.12em\",marginLeft:2},children:\"‹ ›\"})}),/*#__PURE__*/_jsx(\"input\",{type:\"range\",min:0,max:100,step:1,value:Math.round(pos),\"aria-label\":`Compare ${beforeLabel.toLowerCase()} and ${afterLabel.toLowerCase()}`,\"aria-valuetext\":`${Math.round(pos)}% ${beforeLabel.toLowerCase()}`,disabled:isStatic,onChange:e=>{touched.current=true;const v=Number(e.currentTarget.value);startTransition(()=>setPos(v));},onKeyDown:e=>{// arrows move 5% a press (Page Up/Down 10%, Home/End the ends: native)\nconst d=e.key===\"ArrowRight\"||e.key===\"ArrowUp\"?5:e.key===\"ArrowLeft\"||e.key===\"ArrowDown\"?-5:0;if(!d)return;e.preventDefault();touched.current=true;startTransition(()=>setPos(p=>Math.max(0,Math.min(100,Math.round(p)+d))));},onFocus:e=>{const fv=e.currentTarget.matches(\":focus-visible\");startTransition(()=>setFocusRing(fv));},onBlur:()=>startTransition(()=>setFocusRing(false)),style:{position:\"absolute\",top:\"50%\",left:`${pos}%`,width:40,height:40,margin:0,transform:\"translate(-20px, -20px)\",opacity:0,pointerEvents:\"none\",appearance:\"none\",WebkitAppearance:\"none\"}})]});}addPropertyControls(BeforeAfter,{before:{type:ControlType.ResponsiveImage,title:\"Before\"},after:{type:ControlType.ResponsiveImage,title:\"After\"},beforeLabel:{type:ControlType.String,title:\"Before label\",defaultValue:\"Before\"},afterLabel:{type:ControlType.String,title:\"After label\",defaultValue:\"After\"},start:{type:ControlType.Number,title:\"Start\",defaultValue:50,min:0,max:100,unit:\"%\"},handle:{type:ControlType.Color,title:\"Handle\",defaultValue:\"#F5F0E8\"},labelBg:{type:ControlType.Color,title:\"Label fill\",defaultValue:\"rgba(30,27,24,0.72)\"},labelColor:{type:ControlType.Color,title:\"Label text\",defaultValue:\"#F3EEE4\"},knob:{type:ControlType.Color,title:\"Knob\",defaultValue:\"#12130F\"},demo:{type:ControlType.Boolean,title:\"Demo sweep\",defaultValue:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BeforeAfter\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"560\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"900\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BeforeAfter.map"],"mappings":"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"}