(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[10271],{81798:(s,e,t)=>{"use strict";t.d(e,{A:()=>a});var i=t(87687);t(52751);let n=(0,t(31928).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(94591)},37680:(s,e,t)=>{"use strict";t.d(e,{A:()=>i.default});var i=t(99e3)},66932:(s,e,t)=>{"use strict";t.r(e),t.d(e,{default:()=>y});var i=t(87687),n=t(81798),a=t(20120),r=t(37680),l=t(31928),o=t(30251),c=t(54401);let p=(0,l.I)(o.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,c.A)(),u=(0,o.zh)({transform:"translateY(".concat(r/4,"%)"),"--percentage":r+"%","--rotation":1.8*r+"deg",config:{tension:130,friction:30},immediate:d||!l}),y="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:y,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:y}})]})};t(70855);let y=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",controlStyles:{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"})}})})]})}},70855:s=>{s.exports={w1yifahs:"w1yifahs",h1itwktc:"h1itwktc",t1hpkmt5:"t1hpkmt5",b1vrupxo:"b1vrupxo",by13xcc:"by13xcc",sie43zf:"sie43zf",f1235qhl:"f1235qhl"}}}]);
//# sourceMappingURL=10271.9ca3a4adafa50fe2.js.map