Responses by Unseen Studio.

Background: OceanX 2025 in Review: A Year of Discovery was designed as a digital gift to partners of the nonprofit ocean exploration organization OceanX, pivoting away from physical gifts toward something more in line with OceanX’s sustainability values and nonprofit mission.

Rather than a formal annual report, the experience is visually rich and interactive, highlighting the most significant moments of the year while reflecting OceanX’s commitment to ocean exploration and conservation—creating a unique, memorable experience that stakeholders are inspired to share with their networks.

The key target audience includes global partners, stakeholders and collaborators of OceanX, and the secondary audience includes wider networks of peers, industry and general public interested in the ocean’s sustainable potential.

Favorite details: The ship movement acts as an immersive way to guide users through the site’s content. We’re proud of taking what could have been quite a standard page structure and creating a more engaging way of navigating the site that ties in perfectly with the content.

Challenges: As far as the technical implementation goes, the water surface makes up a large part of the visual viewport and generally acts as a focal point of the narrative and subject matter. So, we knew it had to look convincing. We also opted for a realistic art direction, which added an extra challenge to creating real-time 3-D experiences on the web!

Fluid simulations driven by mouse input are common in 3-D web experiences, but they typically serve as passive overlays. Here, we repurposed the effect for something more central: the ship’s wake. By replacing mouse input with the ship’s 3-D position and adding dynamic normal calculations, we gave the waves real depth and form.

Time constraints: From briefing through to delivery, we had approximately six weeks to deliver the project. Due to the tight timeline, we adapted our progress slightly, focusing on building out a “launchable” MVP with the core features ready first before adding layers of flourish—like audio and extra 3-D elements—as time permitted. We also had to be really mindful of not designing any features that we couldn’t build in time for the launch. We’re really thankful for the client’s trust in regards to this; it meant that sometimes we couldn’t show polished or final designs, and we had to wait until certain aspects were built in development before we could show the client for approval. Luckily, the OceanX team were fantastic to work with and understood this approach was important to hit the deadline. That’s not always the case!

Navigation structure: We wanted to create a familiar timeline scroll mechanic—using horizontal scrolling to navigate the milestone content throughout the year—but with the additional flourish of embedding the exploration ship in the experience as a way of guiding users through the annual milestones. The site uses free-scrolling navigation rather than fixed slider-style controls, meaning users can move forwards or backwards at any point. Rather than having the ship awkwardly reverse or turn around, we kept it always moving forward, a choice that felt aligned with OceanX’s ethos.

Technology: The site leans heavily on WebGL via three.js, with CSS, standard HTML and Javascript as the for the UI on top. There is no back end to this site; we opted for a JSON file to house the content, as there was no need to return to it for post-launch updates.