Responses by Edan Kwan, founder, Lusion

Background: At Lusion, we provide high-quality, real-time development services to ad agencies and design studios alike. Most of the production studios out there would use well-staged videos on their websites, but we believe that in order to sell our real-time development capacity, the best thing to do—as a small studio—is to show what we can do in real-time. Hence, we built our website this way to get shocking reactions.

Favorite features: Generative animations and cloth simulations. Generative animations are at the core of our art installations and data visualizations. Cloth simulation has never been an easy task—especially trying to get it to work on low-end devices. That way the cloth animations on the site show our ability ton create real-time graphics, as well as proving to potential clients how we come up with alternative solutions to problems.

Design process: The website was built heavily with Houdini FX. We generated a lot of custom assets and cut down on bytes as much as we could. The most challenging part of the website was to unify any smaller visuals into a meaningful experience. We used sound, overlaid objects and masks to make transitions between different visuals seamless.

Navigation structure: Unlike most of the WebGL experiences out there, our website uses a long scrolling, one-page navigation system instead of a full-screen one. We also used the infamous scroll-jacking effect mainly due to the performance and glitching issue on some slower devices.

Technology: We designed and developed the site in Houdini FX, Photoshop and Visual Studio Code. We generated a lot of the vertex animations for the visuals in Houdini. All WebGL scenes were powered by ThreeJS. We rendered video in Redshift3D, which we also used to combine video with real-time animations.