Responses by Nathan Riley, design director, Green Chameleon.
Background: This site acts as an immersive portfolio experience that showcases the future-thinking ethos of BlueYard (BY) and the companies it invests in, along with positioning it as a leader in the fields of venture capital and cryptocurrency. On entering, users find themselves in the BlueYard Galaxy, and as they travel through the site, they can explore the key worlds and industries that BY operates in, which come together to form “the fabric of our future.”
Design core: At the core of the experience is a bespoke nebula particle system that acts as the navigation to inner pages and the core visual aesthetic. This futuristic aesthetic immediately sets the tone for what users can expect from the brand and ties in directly with BY’s approach.
Challenges: The initial particle animation was particularly challenging. To achieve this effect, we had to create a new pipeline to export a prebaked simulation from Houdini and import this into the WebGL environment. This approach allowed us to art direct the simulation while simultaneously keeping the final implementation as lightweight as possible.
Technology: We used Sanity for the CMS. This nice lightweight setup enables the client to manage the copy and organize the portfolio of brands. For the front end, we used three.js for the 3-D particle environment.
Special technical features: A deep-rooted collaboration between 3-D design and WebGL development enabled us to establish a custom workflow that let us export complex, particle-based animations easily from Houdini as compressed image textures. On top of this, we also created a custom export format that could be imported into a WebGL environment, resulting in 3-D geometry with particle mapping and animation settings.