Responses by Juraj Molnar, creative director; and Gary Stout, managing director, Buzzworthy.

Background: The purpose of this project was to create a compelling site with creative animations and get more people involved with helping our greatest resource: the ocean. The Ocean Agency is created with its approach to get major companies involved to help fund its projects. The agency has created Netflix documentaries and worked with Adobe on campaigns, and Pantone has created colors for it. We knew we had to present this in a way that was extraordinary—like the agency and like the ocean.

Larger picture: This site is part of a campaign that’s as perennial as the need to rescue our oceans. We added a component that enables professional photographers to upload their photos for users to download for free. This feature, called the Ocean Image Bank, enables people to use these photos for their campaigns and bring greater awareness to the overall cause.

Design core: The main core feature is the intro to the website, where we load the assets during the initial animation. From the main screen, the tone changes to black, which is surprising. On the black screen is an Easter egg that reveals the core mission of the agency.

The other great feature on the site is masked shape interaction that we use through the pages. Smooth scrolling adds a dynamic, slick feel, while the animations help to tell the story. An animated overlay screen in a wave shape connects the pages and creates a smooth transition. We also created a custom slider for the project page that aligns with the overall style and offers an overview of the projects in an interesting way.

Challenges: Connecting the intro animation to the site and flipping the scrolling from horizontal to vertical. This part is built from multiple components and connecting it to one smooth scrolling experience was quite tricky.

Navigation structure: We use hamburger navigation for ease of access and what is even better, you do not have to click anything. The fixed nav has a hover feature, so when you hover the hamburger icon with your mouse, we slide out the navigation; from here, you can choose which page you want to access.

Technology: We used JavaScript, Vercel, barba.js, GSAP, and three.js for the project slider and the wave effect in the detail. For the back end, we used the Prismic CMS, in which we built custom media query fields to serve responsive images to users.