Noomo Beat — Personalized 3D AI Audiovisual Experience for brand activation

Noomo Beat —Personalized AI Audiovisual Experience.

At Noomo Agency, we’re passionate about pushing the boundaries of interactive digital experiences. Our latest project, Noomo Beat, redefines how users experience music by merging AI-generated sound with dynamic, immersive 3D visuals. Noomo Beat offers users a unique audiovisual journey, where they are not just listeners — they become creators, shaping the music and the world around them.

Noomo Beat AI website

Creating a personalized 3D website experience for immersive brand activation.

The primary goal of Noomo Beat was to design a microsite that provides users with a fully personalized music experience, powered by AI and enriched with dynamic 3D visuals. The challenge was to seamlessly blend AI-generated music with a responsive, interactive 3D environment that adapts in real time based on user inputs.

We aimed to create an experience that:

Delivers personalized AI music tailored to the user’s preferences.
Showcase immersive 3D visuals that react and evolve with the rhythm and tone of the music.
is optimized for mobile, ensuring smooth performance without sacrificing quality, a crucial aspect in today’s mobile-first world.

This project wasn’t just about building a web experience — it was about creating something truly groundbreaking that combined sound, visual storytelling, and interactivity, designed specifically for brand activation.

The solution.

To meet the challenge, we focused on cutting-edge technologies and performance optimization, ensuring Noomo Beat could deliver a seamless, immersive experience. Here’s how we approached it:

AI music generation.

Using Soundraw.io, Noomo Beat enables users to generate custom music based on their preferences, selected via an intuitive quiz. Users choose their preferred genre, mood, tempo, theme, and even color, resulting in a unique musical experience that reflects their personality.

Interactive 3D environment.

The hero section of Noomo Beat offers a glimpse into the future 3D scene, where users interact with a 3D jacket. As they progress through the quiz, more details and light gradually reveal the scene. Once the music is generated, the immersive 3D environment reacts in real time to the rhythm and tempo of the music, offering a fully personalized audiovisual experience.

Added level of personalization.

Users can customize the scene’s color palette and the album cover design, making each experience truly unique. This added level of personalization allows users to create a visual and auditory environment that reflects their own style, enhancing the immersive quality and making the journey entirely their own.

Developing visually captivating 3D assets for a seamless interactive experience.

A core visual component of Noomo Beat is the collection of highly detailed 3D outfits that ‘dance’ to the rhythm of the music. Users can scroll to select different outfits, enhancing the personalization of their experience. We optimized these assets specifically for mobile devices, ensuring they load quickly and animate smoothly without compromising quality or performance.

We primarily used Blender to prepare the 3D models. However, since incorporating realistic clothing was a priority, quality and a high level of detail were crucial. To meet this need, we selected models created with Clo3D, as it provides advanced tools for fabric textures and realistic garment draping.

One of the primary challenges was adapting the high-quality, detailed clothing models from Clo3D to be performance-friendly for the web. While Clo3D provided incredibly realistic textures, the models were initially too dense for web-based interaction due to high polycounts and large texture files. This required careful optimization to retain visual quality without overwhelming system resources.

To address this, we:

Reduced polycounts while preserving key details that maintained a realistic appearance.

We encountered the problem that the scene was too heavy, and material compilation took too much time. Therefore, in addition to standard geometry compression using DRACO 3D data compression, we also converted all textures to the KTX format, which allowed us to reduce the file size by approximately 60%.

An important part of the process was continuous testing and refinement to achieve the best look and feel. The most critical elements were lighting and textures. We experimented extensively with different light sources, as well as textures on clothing and 3D objects within the scene.

Leveraging Wiggle.js for interactive cloth movement.

The rigging process was particularly specific since we used the Wiggle bonnes Three.js library to simulate cloth movement on the Noomo Beat website. We began by testing simple models, like a pillow and a basic dress, to refine the animation dynamics before applying it to more complex models.

Using Wiggle Bones for Three.js, we could animate the bones of each 3D model based on the object’s movement, while customizing parameters for each bone and carefully distributing weight across the skeleton.

This approach required significantly less processing power than baked animations and allowed us to achieve dynamic, lifelike movements without overwhelming system resources.

With Wiggle Bones for Three.js, we could also adapt various types of cloth motion, creating a smooth and natural flow. For each clothing item, we needed to adjust the settings and weights to avoid unnatural movements, as shown here:

Enhancing user engagement with immersive 3D storytelling.

The main part of the Noomo Beat experience is set in a 3D underground scene, where users interact with outfits and customize the environment to match the AI-generated music. The dynamic, rhythm-based animations ensure the visuals are always in sync with the sound, offering a cohesive and engaging sensory journey.

Additionally, users can share their unique experience. We’ve incorporated a sharing feature where users can select a cover for their music album, making the experience more interactive and connected.

Pushing boundaries in brand activation through AI and immersive 3D technology.

Noomo Beat represents the future of brand activations, combining AI, 3D web technology, and immersive storytelling. To bring this experience to life, we used Three.js, WebGL, and GSAP, which enabled us to create high-quality, responsive 3D scenes ensuring a seamless user experience on all devices.

In Noomo Beat, we’ve achieved a balance of technical precision, aesthetic appeal, and high performance, pushing the limits of what’s possible in an interactive, web-based brand experience.