Responses by Niccolò Miranda and Ilja van Eck.

Background: Sonar Music is a renowned music and sound studio based at Disney Studios Australia in Sydney that houses the nation’s most distinguished composers and sound designers. The purpose of the project was to design and develop a high-end informative showcase portfolio website.

Navigational features: A loader pixel build-up. Each logo pixel is animated using After Effects with AI-generated JavaScript expressions, avoiding manual keyframing for each pixel. We utilized Lottie.js alongside GSAP to create a smooth unmasking of the frame into the full-bleed hero.

The grid layout and Quick Views. Sonar’s grid-based layout dynamically restacks on a visual sound frame, ensuring seamless navigation on a content-rich homepage.

And mixtape link generation. By utilizing the LocalStorage API, users can save soundtracks and work videos, among other media, into a dedicated Mixtape page. Furthermore, they can generate a URL link to share with clients and friends.

Design core: Inspired by sound waves and circuit boards, Sonar’s posters on the site’s Team page feature three macro patterns for three categories—Producers, Founders and Sound. An Easter egg within the producers’ flows includes AI-generated street names inspired by technical producer actions like “Edit Alley,” “Publicity Pier” and “DVD Drive,” adding a unique touch.

Challenges: Ensuring a smooth scroll experience across all browsers despite heavy network payloads and rich content. Maintaining user-friendly navigation on content-heavy pages with sliders, quick views and hover states was also particularly challenging.

The menu reveal in/out is reminiscent of an audio equalizer. Given that the homepage is rich with work and information, motion Quick Views enable users to access more info without leaving the page.

Technology: We used Webflow for CMS content and back-end management. For animations, we employed GSAP along with its plugins such as CustomEase, Draggable and ScrollTrigger. Additionally, we employed howler.js for sound effects, Lenis for scroll hijacking and Lottie.js for SVG-based animations.