The Bang & Olufsen - Sound and Vision for Life web app was built with both WebGL and Svelte. For the 3D graphics, we've adopted OGL - a lightweight WebGL framework that allowed us to deliver rich visual experiences without compromising on load times or performance.

The experience is hosted on Google AppEngine, with Firestore as our database solution. This combination provided a highly scalable and reliable infrastructure, ensuring our service remains accessible and robust.

Tech Breakdown:

• Website built using SvelteKit w/ TypeScript and SCSS for styling


• WebGL framework is OGL: OGL runs in an offscreen canvas to prevent UI lag


• Physics engine is Rapier – run using WASM


• Experience Hosted on Google AppEngine, with Firestore as the database.


• GitHub for code hosting and CI using GitHub Actions


• GSAP for animations in combination with CSS animations when possible for improved performance.


• Lottie for some UI elements such as the logo hover and emoji animations.

We created a diverse component library of assets to represent the different moods and placed them along the mood matrix. The base variables that determine the “mood matrix” are set in stone and cannot be changed. Boxing each mood and using this as a base also allowed us to determine a unique aesthetic and specific visual style/3D assets for each of the 12 moods. It also allowed us to clearly brief the dancers when creating 12 unique Motion capture dance sets and guided the sound designer when creating 12 unique audio libraries - all synced to each avatar mood. Users can also customize different variables within this configuration, but they can not jump or be allocated to a different mood.

As we wanted the experience to feel customized and accurately represent the 12 moods in the matrix, we produced a series of custom dances with two dancers from Copenhagen Contemporary dance school and using Rokoko Motion capture smartsuit and gloves. We explored multiple different solutions but found this the most versatile as the suit is equipped with a series of sensors strategically placed on the suit to capture the movements of the wearer and communicate wirelessly with a computer or mobile device to transmit the captured motion data in real time.

We also chose this motion capture suit because unlike traditional motion captures systems that require a dedicated studio with multiple cameras and a more complex setup this suit was portable and the software provided us with the tools to refine and edit the motion capture data afterwards including cleaning up the noise and and exporting the motion data in a compatible format.

All texture, dances, sounds and 3D assets are sorted and placed “on” the mood-matrix. When generating the avatar we used this two-dimensional “board” to pick assets based on where the users were on the mood-matrix. Each mood had its own pool of assets which the avatar-generator picked from. Assets were furthermore sorted within each mood to make sure we picked assets that perfectly matched the users musical profile.

The shareable asset is generated client-side and shared using the Web Share API.
This is entirely done in the user's browser without the need for a backend. This not only provides a better user experience but is also extremely cost effective. We didn’t have to upload and download video data to and from the client, or execute long running video-editing tasks on the server.

We are running the video generation in a Web Worker to make it as performant as possible without making the interface feel laggy.

We had to use cutting-edge browser APIs to generate the videos in order to capture the WebGL and also generate UI to composite on top of the video. This had to work across all major browsers and devices and resulted in us building 3 different implementations.