Responses by Kacper Chlebowicz.

Background: I was always the kind of designer who worked for commercial projects but never had enough time to showcase my own work. Finally, I decided to make a move. I was looking for a solution where I can show all my interests; it wouldn’t have been possible without creative developer Luis Henrique Bizarro, who made this site happen.

Design core: As my roots are in web and mobile design, I wanted to highlight my beliefs that motion and microinteractions can both solve UX problems as well as elevate projects, making them more immersive.

Challenges: From a design perspective, we needed to find a solution to unify all the projects I’ve made in the past few years. They were very diverse stylistically, so using simple geometric forms for the thumbnails provided a sweet spot to achieving consistency. From a technical point of view, we struggled to keep the website lightweight while, at the same time, having many video assets. To achieve better results, we used video sprites to make the whole experience available to users straight away without long preloading.

Favorite details: I love the simplicity of geometric forms. The ones on the site are inspired by designer Dieter Rams and the Bauhaus but revisited in a modern approach. Both sharp shapes and organic displacement applied on top of the project covers work surprisingly well. The typography pairing isn’t obvious but it gives the project its own character.

Technical features: The site was developed entirely in JavaScript. We used Node.js with Express in the back-end implementation and used Prismic to manage the site’s content. On the front end, we used our own proprietary framework that uses ECMAScript 2015+ features—like classes, promises and modules—to provide a user experience that doesn’t block interactions at any particular moment.

Most of the animations on the website are implemented using WebGL and Shaders, so all the images and videos run inside a Canvas using Texture and VideoTexture. This enhances the user experience by creating animations that run at 60 FPS on most browsers and devices, while also giving us the opportunity to go further with animated 3-D effects. For example, when users click on any of the case studies on the homepage, they’ll notice a cube rotating and expanding to the fullscreen size of their viewport.