{"version":3,"file":"FadeSlides.DPt6ugV0.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/jMYc6ifET0cN4LZuQwFL/ICpDFeblZgPMDVuis0fY/FadeSlides.js"],"sourcesContent":["// FadeSlides — a quiet picture that changes by itself. Brief: one image frame\n// that holds several photographs (four by default) and moves from one to the\n// next on its own every three seconds. The change is a slow, soft cross-fade:\n// the new photo melts in over the old one. Nothing slides, zooms or jumps, and\n// there are no arrows or dots. After the last photo it returns to the first\n// and carries on. Each photo fills the frame and is cropped to fit, the same\n// way a normal image is. Calm and elegant.\n// It only runs while it is on screen. For visitors who prefer reduced motion\n// the photos still change, but without the fade.\n// To keep the page quick, it asks for a right-sized copy of each photo instead\n// of the full original, shows the first photo straight away, and only fetches\n// the others once the frame is on screen.\n// Add, remove and reorder the photos in the properties panel.\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";// Stand-ins shown until photos are added in the panel.\nconst DEFAULT_IMAGES=[\"https://framerusercontent.com/images/Icfv2RJ9jwHTECLQqVvBYyJ7sQ.webp\",\"https://framerusercontent.com/images/EoYxoGCnHMphIqGYraOieffMI.webp\",\"https://framerusercontent.com/images/aakjiYwoi3fpqJmvPCz68RzaJUM.webp\",\"https://framerusercontent.com/images/McaDCWdfAYC8cArxkwsUcLT5Ec.webp\"];// Ask Framer's image service for a smaller copy (longest side 1024px) instead\n// of the full original. Other addresses, and SVGs, are left as they are.\nfunction sized(src){if(!src||!src.includes(\"framerusercontent.com/images/\"))return src;if(src.includes(\"scale-down-to=\")||/\\.svg(\\?|$)/i.test(src))return src;return src+(src.includes(\"?\")?\"&\":\"?\")+\"scale-down-to=1024\";}/**\n * Fade Slides\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 500\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function FadeSlides(props){const{images,seconds=3,fade=1.2,radius=0,style}=props;const isStatic=useIsStaticRenderer();const list=(images&&images.length>0?images:DEFAULT_IMAGES).filter(Boolean);const ref=useRef(null);const[index,setIndex]=useState(0);const[calm,setCalm]=useState(false);// The later photos are only fetched once the frame has been on screen.\nconst[seen,setSeen]=useState(false);useEffect(()=>{if(isStatic||typeof window===\"undefined\"||list.length<2)return;const el=ref.current;if(!el)return;startTransition(()=>setCalm(window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches));let timer=0;const stop=()=>{window.clearInterval(timer);timer=0;};const start=()=>{if(timer)return;timer=window.setInterval(()=>{startTransition(()=>setIndex(i=>(i+1)%list.length));},Math.max(seconds,1)*1e3);};// Only change photos while the frame is on screen.\nconst watcher=new IntersectionObserver(entries=>{if(entries[0].isIntersecting){startTransition(()=>setSeen(true));start();}else stop();},{rootMargin:\"200px\"});watcher.observe(el);return()=>{watcher.disconnect();stop();};},[isStatic,list.length,seconds]);const current=index%Math.max(list.length,1);return /*#__PURE__*/_jsx(\"div\",{ref:ref,role:\"img\",\"aria-label\":\"Photographs of the studio\",style:{...style,position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",borderRadius:radius},children:list.map((src,i)=>i===0||seen?/*#__PURE__*/_jsx(\"img\",{src:sized(src),alt:\"\",decoding:\"async\",draggable:false,style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",display:\"block\",objectFit:\"cover\",opacity:i===current?1:0,transition:calm||isStatic?\"none\":`opacity ${Math.max(fade,0)}s ease-in-out`}},`${src}-${i}`):null)});}addPropertyControls(FadeSlides,{images:{type:ControlType.Array,title:\"Photos\",maxCount:10,control:{type:ControlType.Image},description:\"Add four photos (or more). Drag to reorder. If empty, four photos from the site show as stand-ins.\"},seconds:{type:ControlType.Number,title:\"Change every\",defaultValue:3,min:1,max:20,step:.5,unit:\"s\"},fade:{type:ControlType.Number,title:\"Fade time\",defaultValue:1.2,min:0,max:3,step:.1,unit:\"s\",description:\"How slowly one photo melts into the next.\"},radius:{type:ControlType.Number,title:\"Corners\",defaultValue:0,min:0,max:40,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FadeSlides\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"400\",\"framerIntrinsicHeight\":\"500\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FadeSlides.map"],"mappings":"2MAgBA,SAAS,EAAM,EAAI,CAA2I,MAAvI,CAAC,GAAK,CAAC,EAAI,SAAS,+BAA+B,GAAgB,EAAI,SAAS,gBAAgB,GAAG,eAAe,KAAK,CAAG,EAAS,EAAW,GAAK,EAAI,SAAS,GAAG,EAAE,IAAI,KAAK,oBAAqB,CAQvN,SAAwB,EAAW,EAAM,CAAC,GAAK,CAAC,SAAO,UAAQ,EAAE,OAAK,IAAI,SAAO,EAAE,SAAO,EAAY,EAAS,EAAoB,EAAQ,GAAM,GAAQ,EAAO,OAAO,EAAE,EAAO,EAAA,CAAgB,OAAO,OAAO,EAAQ,EAAIA,EAAO,IAAI,EAAO,CAAC,EAAM,GAAUC,EAAS,CAAC,EAAO,CAAC,EAAK,GAASA,EAAS,EAAK,EACzS,CAAC,EAAK,GAASA,EAAS,EAAK,EAAE,MAAc,CAAC,GAAG,GAAiB,IAAS,QAAa,EAAK,OAAO,EAAE,OAAO,IAAM,EAAG,EAAI,QAAQ,GAAG,CAAC,EAAG,OAAO,MAAoB,EAAQ,EAAO,WAAW,kCAAkC,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAM,EAAQ,MAAS,CAAC,EAAO,cAAc,CAAK,EAAE,EAAM,CAAE,EAAQ,MAAU,CAAI,AAAa,IAAM,EAAO,gBAAgB,CAAC,MAAoB,EAAS,IAAI,EAAE,GAAG,EAAK,MAAM,CAAC,CAAE,EAAE,KAAK,IAAI,EAAQ,CAAC,EAAE,GAAG,CAAE,EAC3b,EAAQ,IAAI,qBAAqB,GAAS,CAAI,EAAQ,EAAE,CAAC,gBAAgB,MAAoB,EAAQ,EAAI,CAAC,EAAE,EAAM,GAAQ,EAAK,CAAE,EAAE,CAAC,WAAW,OAAO,CAAC,EAAsB,OAApB,EAAQ,QAAQ,CAAE,MAAY,CAAC,EAAQ,WAAW,EAAE,EAAK,CAAE,CAAE,EAAE,CAAC,EAAS,EAAK,OAAO,CAAO,CAAC,EAAE,IAAM,EAAQ,EAAM,KAAK,IAAI,EAAK,OAAO,CAAC,EAAE,OAAoB,EAAK,MAAM,CAAK,MAAI,KAAK,MAAM,aAAa,4BAA4B,MAAM,CAAC,GAAG,EAAM,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,aAAa,CAAM,EAAE,SAAS,EAAK,KAAK,EAAI,IAAI,IAAI,GAAG,EAAkB,EAAK,MAAM,CAAC,IAAI,EAAM,CAAG,EAAE,IAAI,GAAG,SAAS,QAAQ,UAAU,GAAM,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,QAAQ,QAAQ,UAAU,QAAQ,QAAQ,MAAI,GAAY,WAAW,GAAM,EAAS,OAAO,WAAW,KAAK,IAAI,EAAK,CAAC,EAAE,cAAc,CAAC,EAAE,GAAG,EAAI,GAAG,GAAG,EAAE,IAAI,CAAC,CAAC,CAAE,uBAb3xB,IAA6D,IAAwE,EACzK,EAAe,CAAC,uEAAuE,sEAAsE,wEAAwE,sEAAsE,EAYqhB,EAAoB,EAAW,CAAC,OAAO,CAAC,KAAK,EAAY,MAAM,MAAM,SAAS,SAAS,GAAG,QAAQ,CAAC,KAAK,EAAY,KAAK,EAAE,YAAY,oGAAoG,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,EAAE,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,IAAI,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,KAAK,IAAI,YAAY,2CAA2C,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC"}