(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[18341],{94027:(s,e,t)=>{"use strict";t.d(e,{A:()=>a});var i=t(29549);t(68793);let n=(0,t(24299).I)("div")({name:"Wrapper",class:"wi7qe6i",propsAsIs:!1}),a=function(s){let{breakpoint:e,inline:t,children:a,style:r={},...l}=s;return(0,i.jsx)(n,{as:t?"span":"div","data-breakpoint":e,style:{"--display":t?"inline":"block",...r},...l,children:a})};t(75399)},44668:(s,e,t)=>{"use strict";t.d(e,{A:()=>i.default});var i=t(57936)},52300:(s,e,t)=>{"use strict";t.r(e),t.d(e,{default:()=>A});var i=t(29549),n=t(94027),a=t(13320),r=t(44668),l=t(24299),c=t(2521),o=t(93181);let p=(0,l.I)(c.CS.div)({name:"Wrapper",class:"w1yifahs",propsAsIs:!0}),d=(0,l.I)("div")({name:"Half",class:"h1itwktc",propsAsIs:!1}),h=(0,l.I)(d)({name:"TopHalf",class:"t1hpkmt5",propsAsIs:!0}),m=(0,l.I)(d)({name:"BottomHalf",class:"b1vrupxo",propsAsIs:!0}),x=(0,l.I)("div")({name:"Backside",class:"by13xcc",propsAsIs:!1}),f=(0,l.I)("div")({name:"Shadow",class:"sie43zf",propsAsIs:!1}),g=(0,l.I)("div")({name:"FlickerFixer",class:"f1235qhl",propsAsIs:!1}),u=function(s){let{alt:e,src:t,width:n,height:a,percentage:r,spring:l=!1}=s,d=(0,o.A)(),u=(0,c.zh)({transform:"translateY(".concat(r/4,"%)"),"--percentage":r+"%","--rotation":1.8*r+"deg",config:{tension:130,friction:30},immediate:d||!l}),A="url(".concat(t,")");return(0,i.jsxs)(p,{style:u,children:[(0,i.jsx)(h,{style:{"--width":n+"px","--height":a/2+"px"},children:(0,i.jsx)("img",{src:t,alt:e,style:{width:n,height:a}})}),(0,i.jsxs)(m,{style:{"--width":n+"px","--height":a/2+"px",backgroundImage:A,backgroundPosition:"0 100%"},children:[(0,i.jsx)(f,{}),(0,i.jsx)(x,{})]}),(0,i.jsx)(g,{style:{top:a/2+"px",opacity:r>50?0:1,backgroundImage:A}})]})};t(63999);let A=function(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.A,{breakpoint:"smAndSmaller",children:(0,i.jsx)(r.A,{alt:"An image showing a neon city is folded up in half",src:"/images/folding-the-dom/fold-mobile.mp4"})}),(0,i.jsx)(n.A,{breakpoint:"smAndLarger",children:(0,i.jsx)(a.Ay,{initialValues:{percentage:75},controlPosition:"top",customGrid:{gridTemplateColumns:"min(450px, 100%)",justifyContent:"center"},controls:[(0,i.jsx)(a.oP,{id:"percentage",label:"Folded Percentage",min:0,max:100},"percentage")],children:s=>{let{percentage:e}=s;return(0,i.jsx)(u,{spring:!0,alt:"A neon alley with a Chinese sign",width:375,height:4/3*375,percentage:e,src:"/images/folding-the-dom/francois-hoang-china.jpg"})}})})]})}},63999:s=>{s.exports={w1yifahs:"w1yifahs",h1itwktc:"h1itwktc",t1hpkmt5:"t1hpkmt5",b1vrupxo:"b1vrupxo",by13xcc:"by13xcc",sie43zf:"sie43zf",f1235qhl:"f1235qhl"}}}]);
//# sourceMappingURL=18341.48fc5eeaf13d788b.js.map