(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[87248],{87248:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>_});var s=n(67841),a=n(6103),r=n(79477),o=n(64833),c=n(97718),i=n(74631);let l="/images/pixel-perfection",f="".concat(l,"/dp-machine.png"),d="".concat(l,"/dp-designer.png"),p="".concat(l,"/dp-mystery-box.png"),m="".concat(l,"/dp-the-implementation-process.png"),u="".concat(l,"/dp-the-designer-label.png"),g=(0,o.z)("div")({name:"Wrapper",class:"wx045ff",propsAsIs:!1}),v=(0,o.z)(a.default)({name:"Machine",class:"m1kxxvo6",propsAsIs:!0}),x=(0,o.z)(c.q.img)({name:"Designer",class:"d1l6ti53",propsAsIs:!0}),h=(0,o.z)(c.q.div)({name:"MysteryBoxContainer",class:"mpbm41c",propsAsIs:!0}),y=(0,o.z)(c.q.img)({name:"MysteryBox",class:"m1nc7slg",propsAsIs:!0}),b=(0,o.z)(c.q.img)({name:"Label",class:"l1v8ax0e",propsAsIs:!0}),w=(0,o.z)(b)({name:"DesignerLabel",class:"def5t9",propsAsIs:!0}),I=(0,o.z)(b)({name:"ImplementationLabel",class:"i1600vfv",propsAsIs:!0}),_=()=>{let[e,t]=r.useState(0),[n,a]=r.useState(!1),o=r.useRef(null),l=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:25,[n,s]=r.useState(0);return r.useEffect(()=>{if(!e.current)return;let n=(0,i.P2)(()=>{if(!e.current)return;let t=1-e.current.getBoundingClientRect().top/window.innerHeight;s((0,i.uZ)(t))},t);return window.addEventListener("scroll",n),()=>{window.removeEventListener("scroll",n)}},[e,t]),n}(o);r.useEffect(()=>{l<.1?t(0):l>.55&&e<1?t(1):l>.72&&e<2?t(2):l>.875&&e<3&&t(3)},[l,e]);let b={tension:120,friction:40},_=(0,c.q_)({transform:"translate(".concat(e<1?-15:0,"%, ").concat(e<1?-5:0,"%)"),opacity:e<1?0:1,config:e>=1?b:void 0}),A=(0,c.q_)({transform:n?"translate(0%, -12.5%) scale(1.1)":"translate(0%, 0%) scale(1)",config:{tension:250,friction:20}}),z=(0,c.q_)({transform:"translate(".concat(e<2?-30:0,"%, ").concat(e<2?-10:0,"%) scale(1)"),opacity:e<2?0:1,config:e>=2?b:void 0}),j=(0,c.q_)({transform:"translate(".concat(e<1?-20:0,"%, ").concat(e<1?-6:0,"%)"),opacity:e<1?0:1,config:e>=1?{...b,friction:75}:void 0}),q=(0,c.q_)({transform:"translate(".concat(e<3?20:0,"%, ").concat(e<3?5:0,"%)"),opacity:e<3?0:1,config:e>=3?{...b,friction:50}:void 0});return(0,s.jsxs)(g,{ref:o,children:[(0,s.jsx)(I,{alt:"",src:m,style:q}),(0,s.jsx)(w,{alt:"",src:u,style:j}),(0,s.jsx)(h,{onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1),style:A,children:(0,s.jsx)(y,{alt:"",src:p,style:z})}),(0,s.jsx)(x,{alt:"",src:d,style:_}),(0,s.jsx)(v,{alt:"A large machine, similar to an airport scanner. It has a conveyor belt. A designer places a gift at one end, and it feeds into the machine. At the other end, a box covered in question marks emerges.",src:f,width:675,height:527})]})};n(87692)},6103:(e,t,n)=>{"use strict";n.d(t,{default:()=>a.a});var s=n(83457),a=n.n(s)},83457:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var n in t)Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}(t,{default:function(){return i},getImageProps:function(){return c}});let s=n(85938),a=n(45301),r=n(75813),o=s._(n(4130));function c(e){let{props:t}=(0,a.getImgProps)(e,{defaultLoader:o.default,imgConf:{deviceSizes:[640,750,828,1080,1200,1920,2048,3840],imageSizes:[16,32,48,64,96,128,256,384],path:"/_next/image/",loader:"default",dangerouslyAllowSVG:!1,unoptimized:!1}});for(let[e,n]of Object.entries(t))void 0===n&&delete t[e];return{props:t}}let i=r.Image},87692:e=>{e.exports={wx045ff:"wx045ff",m1kxxvo6:"m1kxxvo6",d1l6ti53:"d1l6ti53",mpbm41c:"mpbm41c",m1nc7slg:"m1nc7slg",l1v8ax0e:"l1v8ax0e",def5t9:"def5t9",i1600vfv:"i1600vfv"}}}]);
//# sourceMappingURL=87248.7159292e8ce2c9ed.js.map