Responses by Renaud Rohlinger, creative developer, ZIZO.

Background: The main reason we made this website was to share and express the fun, happy feelings that live inside our company ZIZO. We wanted to attract new talents and clients that would match our state of mind.

On a personal side, more like a proof of concept, I was trying to demonstrate that it could be possible to evolve the web to the third dimension because we believe it will be the future of the web. For example, you want to visit a museum but won’t know what to expect; in the future, you will be able to experience the first minute of the exposition through 3-D or VR on their website.

Design core: The camera animations and tracking, and the document object model (DOM) animation. Since the camera system is kind of never seen before on the web, this is the feature we’re proudest of.

Challenges: Technically, the biggest challenge was keeping the frames per second as high as possible, even if we were adding more and more 3-D content and DOM animations as the project evolved.

Since we were only two people managing the concept, direction and realization, we had a challenging time with project management. Basically, I did a proof of concept with the 3-D, camera-curves tracking and DOM animations in one month. Based on that, we developed the whole site in another month, with Jocelyn Lecamus working on the UI/UX/DOM and me tackling the 3-D and JavaScript elements.

Navigation structure: With a 3-D website like this one, we needed to create an innovative navigation system. Scrolling on the web is a disaster. Every browser and mouse has a different speed. We tried to use an autoplay feature and even a times-two scrolling speed, but most of the feedback we had on the scrolling was bad.

Another point that I finally understood is that users absolutely don’t care about content. We could have released only the first section and the website would have the same impact—if not better.

Technology: We used Nuxt.js to win time with the development environment, Blender to modelize the 3-D, three.js to interpret this 3-D in Web, anime.js for the easing and GLSL. GLSL is preferred for better control and performances purpose. For example, the particle system is only one Mesh and made with one GLSL. The system to animate the cameras was made by modelizing them and creating trackers with curves in Blender; then, through a function, the site can automatically interpret these curves in three.js. After that, we were using anime.js to move the cameras and trackers through those curves based on the scroll.