https://www.littleworkshop.fr/_next/static/chunks/pages/projects/5milliondevs-66d85d21e98de6df.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[748],{9200:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/projects/5milliondevs",function(){return t(6550)}])},3090:function(e,n,t){"use strict";t.d(n,{g:function(){return s}});var i=t(5893);function s(e){let{data:n}=e;return(0,i.jsx)("div",{className:"body-element",children:(0,i.jsx)("a",{className:"launch underlined","data-ref":"ext_link",href:null==n?void 0:n.url,target:"_blank",children:(0,i.jsxs)("span",{children:["Launch project ",(0,i.jsx)("span",{className:"arrow"})]})})})}},9864:function(e,n,t){"use strict";t.d(n,{n:function(){return s}});var i=t(5893);function s(e){return(0,i.jsx)("div",{className:"body-element",children:(0,i.jsx)("div",{className:"body-p",children:e.content?(0,i.jsx)("p",{dangerouslySetInnerHTML:{__html:e.content},className:e.primary?"primary":""}):(0,i.jsx)("p",{className:e.primary?"primary":"",children:e.children})})})}},2476:function(e,n,t){"use strict";t.d(n,{I:function(){return m}});var i=t(5893),s=t(2551),r=t(7294),a=t(832),c=t(5931),l=t(9008),o=t.n(l),d=t(8267),u=t(6208);function m(e){let{id:n,children:t}=e,l=s.find(e=>e.id===n),[m,v]=(0,r.useState)(!1),j=(0,a.Z)(),f=p(l,s),g=()=>{v(!1),setTimeout(()=>{v(!0)},1)};(0,r.useEffect)(()=>{g()},[l]);let x="".concat(null==l?void 0:l.name," — Little Workshop");return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(o(),{children:[(0,i.jsx)("title",{children:x}),(0,i.jsx)(d.Z,{title:x,url:"https://www.littleworkshop.fr/projects/".concat(n),description:"Learn more about ".concat(null==l?void 0:l.name," - a project by Little Workshop. We are a digital studio that specializes in real-time 3D experiences: cutting-edge websites, virtual spaces, games, AR/VR apps and more."),image:"https://www.littleworkshop.fr/images/projects/thumbnails/".concat(null==l?void 0:l.img_name,".jpg")})]}),(0,i.jsxs)("article",{"data-view":"project",className:"project-page ".concat(m&&"run-animation"),children:[(0,i.jsxs)("div",{className:"hero-image",children:[j>600?function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",t=h("".concat(e,".jpg")),s=h("".concat(e,"@0,5x.jpg")),r="".concat(t," 2880w, ").concat(s," 1440w");return(0,i.jsx)("img",{srcSet:r,sizes:"100vw",src:t,alt:n})}(null==l?void 0:l.img_name,null==l?void 0:l.name):function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",t=h("".concat(e,"-square.jpg"));return(0,i.jsx)("img",{src:t,alt:n})}(null==l?void 0:l.img_name,null==l?void 0:l.name),(0,i.jsx)("div",{className:"mask"})]}),(0,i.jsxs)("section",{className:"section main-section",children:[(0,i.jsxs)("div",{className:"body-element header",children:[(0,i.jsx)("h1",{className:"title primary",children:(0,i.jsx)(u.h,{text:l.name,letterDelay:25,animate:!0,instant:!1,animationDelay:300})}),(0,i.jsx)("h2",{className:"description",children:(0,i.jsx)(u.h,{text:l.description,letterDelay:25,animate:!0,instant:!1,animationDelay:400})})]}),(0,i.jsx)("div",{className:"main",children:t})]}),(0,i.jsxs)("aside",{id:"other-work",children:[(0,i.jsx)("header",{className:"section other-work",children:(0,i.jsx)("h1",{className:"title primary",children:"More projects"})}),(0,i.jsx)("div",{className:"projects",children:f.map((e,n)=>(0,i.jsx)(c.t,{data:e,url:"/projects/".concat(e.id,"/")},n))})]})]})]})}function h(e){return"/images/projects/hero-images/".concat(e)}let p=(e,n)=>{let t,i;let s=n.indexOf(e);return s===n.length-2?(t=n[n.length-1],i=n[0]):s===n.length-1?(t=n[0],i=n[1]):(t=n[s+1],i=n[s+2]),[t,i]}},4815:function(e,n,t){"use strict";t.d(n,{j:function(){return l}});var i=t(5893),s=t(8333),r=t(7294);function a(e){let[n,t]=(0,r.useState)(!1),[a,c]=(0,r.useState)(!1),[l,o]=(0,r.useState)({}),d=(0,r.useRef)(null),u=(0,r.useRef)(null),m=(0,r.useRef)(),h=(0,r.useRef)(null),p=(e,n)=>{var t,i;h.current=new s.Z(e,n),null===(t=h.current)||void 0===t||t.on("play",j),null===(i=h.current)||void 0===i||i.on("pause",f)},v=(0,r.useCallback)(()=>{var e,n,i;null===(e=h.current)||void 0===e||e.off("play",j),null===(n=h.current)||void 0===n||n.off("pause",f),null===(i=h.current)||void 0===i||i.destroy(),h.current=null,t(!1),c(!1)},[]);(0,r.useEffect)(()=>()=>

1{v()},[]),(0,r.useEffect)(()=>(e.id!==m.current&&h.current&&v(),m.current=e.id,window.addEventListener("resize",g),g(),()=>{window.removeEventListener("resize",g)}),[e.id,v]);let j=()=>{t(!0)},f=()=>{t(!1)},g=()=>{if(!d.current)return;let e=getComputedStyle(d.current),n=parseInt(e.paddingLeft)+parseInt(e.paddingRight),t=d.current.clientWidth-n,i=Math.min(.7*window.innerHeight,9/16*t);o({width:16/9*i+"px",height:i+"px"})};return(0,i.jsx)("div",{className:"video-player",ref:d,children:(0,i.jsx)("div",{className:"video-container",ref:u,style:l,children:!a&&(0,i.jsx)("div",{className:"video-controls",onClick:()=>{let n={id:parseInt(e.id),autoplay:!0,title:!1,vimeo_logo:!1,controls:!0,muted:!0};!h.current&&u.current&&(p(u.current,n),c(!0))},style:{backgroundImage:e.posterImg,backgroundSize:"cover"},children:(0,i.jsx)("div",{className:"play"})})})})}var c=t(9864);function l(e){let{intro:n,videoId:t,details:s,children:r}=e;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(c.n,{content:n,primary:!0}),s,void 0!==t&&(0,i.jsx)(a,{id:t,posterImg:"url(/images/projects/video-posters/".concat(e.projectId,".jpg)")}),r]})}},7967:function(e,n,t){"use strict";t.d(n,{u:function(){return s}});var i=t(5893);function s(e){let{data:n}=e,{clients:t}=n,s=void 0!==t&&t.length?"Clients":"Client",r=n.full_awards&&n.full_awards.length>0;return(0,i.jsx)("div",{className:"body-element",children:(0,i.jsxs)("div",{className:"details ".concat(r?"":"no-awards"),children:[(0,i.jsxs)("div",{className:"detail",children:[(0,i.jsx)("div",{className:"name",children:s}),void 0!==n.clients?(0,i.jsx)("div",{className:"value",children:n.clients.map((e,n)=>(0,i.jsx)("div",{children:e},n))}):(0,i.jsx)(i.Fragment,{children:(0,i.jsx)("div",{className:"value",children:n.client})})]}),(0,i.jsxs)("div",{className:"detail",children:[(0,i.jsx)("div",{className:"name",children:"What we did"}),(0,i.jsx)("div",{children:n.roles.map((e,n)=>(0,i.jsx)("div",{className:"value",children:e},n))})]}),r&&(0,i.jsxs)("div",{className:"detail",children:[(0,i.jsx)("div",{className:"name",children:"Distinctions"}),(0,i.jsx)("div",{children:n.full_awards.map((e,n)=>(0,i.jsxs)("div",{className:"value",children:[e.type,e.site&&(0,i.jsxs)(i.Fragment,{children:[" — ",e.site]})]},n))})]})]})})}},8805:function(e,n,t){"use strict";t.d(n,{w:function(){return s}});var i=t(5893);function s(e){return(0,i.jsx)("figure",{className:"figure-container ".concat(e.fullWidth?"full-width":""),children:(0,i.jsx)("img",{className:"screenshot",src:e.src,alt:e.alt})})}},950:function(e,n,t){"use strict";t.d(n,{W:function(){return s}});var i=t(5893);function s(e){return(0,i.jsx)("figure",{className:"figure-container ".concat(e.fullWidth?"full-width":""),children:(0,i.jsx)("video",{className:"loop-player",src:e.src,muted:!0,autoPlay:!0,loop:!0,playsInline:!0,controls:!1})})}},6550:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return h}});var i=t(5893),s=t(2476),r=t(7294),a=t(2551),c=t(4815),l=t(7967),o=t(9864),d=t(8805),u=t(3090),m=t(950);function h(){let e="5milliondevs",n=a.find(n=>n.id===e),[t,h]=(0,r.useState)(n);return(0,r.useEffect)(()=>{h(a.find(n=>n.id===e))},[e,a,t]),(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.I,{id:e,children:(0,i.jsxs)(c.j,{intro:"How we celebrated Netlify’s journey: To mark their 5 million member milestone, we created a gamified 3D experience, allowing users to explore key moments, engage in gameplay, and even join a celebratory contest—all optimized for web and mobile.",details:(0,i.jsx)(l.u,{data:t}),videoId:t.video,projectId:"5mdevs",children:[(0,i.jsx)(o.n,{children:"To celebrate reaching 5 million members, Netlify—the cloud platform for building and deploying modern websites—reached out to us to create a web experience showcasing the journey that led to this success."}),(0,i.jsx)(o.n,{children:"In response, we created this experience using gamified storytelling to engage visitors as they navigate an interactive timeline within a 3D world."}),(0,i.jsx)(m.W,{src:"/videos/5mdevs/landing_page_desktop.mp4"}),(0,i.jsx)(d.w,{src:p("".concat(null==t?void 0:t.id,"/").concat(t.screenshots[0]))}),(0,i.jsx)(d.w,{src:p("".concat(null==t?void 0:t.id,"/").concat(t.screenshots[3]))}),(0,i.jsx)(o.n,{children:"The content unfolds across multiple, chronologically ordered chapters, each featuring unique gameplay mechanics that immerse users in the narrative as they progress through various milestones."}),(0,i.jsx)(o.n,{children:"With a vibrant and playful art direction, the experience evokes a digital playground where developers can freely build and compose on Netlify’s platform."}),(0,i.jsx)(d.w,{src:p("".concat(null==t?void 0:t.id,"/").concat(t.screenshots[2]))}),(0,i.jsx)(d.w,{src:p("".concat(null==t?void 0:t.id,"/").concat(t.screenshots[1]))}),(0,i.jsx)(o.n,{children:"The website is fully optimized for both desktop and mobile browsers, with user controls and UI components tailored for each device, ensuring intuitive navigation and interaction across all platforms."}),(0,i.jsx)(m.W,{src:"/videos/5mdevs/gameplay_mobile.mp4"}),(0,i.jsx)(m.W,{src:"/videos/5mdevs/ending.mp4"}),(0,i.jsx)(o.n,{children:"To engage visitors further, the experience concludes with a contest where Netlify users guess their registration number for a chance to win prizes. This interactive element celebrates Netlify's growing developer community, fostering a sense of connection and achievement."}),(0,i.jsx)(u.g,{data:t})]})})})}function p(e){return"/images/projects/screenshots/".concat(e)}}},function(e){e.O(0,[437,333,107,888,774,179],function(){return e(e.s=9200)}),_N_E=e.O()}]);