Inspiration Modern social media is loud, fast, and often performative. We wanted to build an antidote: a quiet, intentional digital sanctuary where people could share their rawest thoughts, hopes, and secrets without the pressure of likes, profiles, or permanent public identities.
We were inspired by the timeless, romantic imagery of a message in a bottle floating across a vast, sunlit ocean. We wanted to recreate that exact feeling of serendipitous discovery and serene isolation, combining interactive 3D graphics with soothing, procedural ambient audio to give users a peaceful space to let go of their thoughts.
What it does Driftwood & Whispers is an immersive, sensory 3D web experience that lets users anonymously release and discover messages floating on a simulated tropical ocean.
Cast a Message: Users can write a private note (up to 280 characters), "seal" it inside a virtual bottle, and watch it drop directly into the physical coordinates of the 3D sea.
Explore the Horizon: Users navigate a real-time, fluid 3D ocean populated by bottles cast by others.
Focus & Read: Clicking a bottle triggers a dynamic camera sweep, panning and zooming close to that specific bottle while others fade away. The bottle "unseals" to display its handwritten message on an aged parchment card.
Procedural Audio: A custom Web Audio synthesizer generates real-time, organic wave crashes that mimic the movement of a real shoreline, creating a deeply meditative environment.
How we built it We engineered Driftwood & Whispers as a modern, high-performance web application using a robust, reactive stack:
Frontend Framework: Built with Next.js and styled using Tailwind CSS to keep the user interface minimal, elegant, and perfectly responsive.
3D Graphics Layer: Powered by Three.js via React Three Fiber (R3F) and @react-three/drei. We designed a custom tropical water mesh that uses vertex wave superposition (superimposing multiple math waves) to simulate realistic, organic ocean swells in real-time.
Sensory Audio: Instead of looping a static audio file, we built a Web Audio API synthesizer. It passes generated white noise through lowpass filters and dynamically controls their frequencies using a low-frequency oscillator (LFO) to synthesize the rhythmic, rising and falling sound of ocean waves.
Backend & API: Implemented Next.js Serverless Route Handlers to efficiently manage message serialization, fetching, and coordinate mapping.
Challenges we ran into Dynamic Camera Target Zooming: Creating a camera that could seamlessly transition from a broad, overview perspective to a highly focused, close-up look of a single bottle was incredibly tricky. We solved this by implementing a camera rig using linear interpolation (lerp) to dynamically calculate and smoothly transition both the camera’s position and its exact focus target vectors based on the selected message.
Performance Optimization on Mobile: Running real-time 3D vertex displacement on a 64x64 plane can easily tank mobile frame rates. We heavily optimized our render loop, utilizing instanced materials and reducing physics updates to ensure a locked 60 FPS on both desktop and mobile web browsers.
Balancing Procedural Audio: Synthesizing an audio wave that actually sounds like water—and not static noise—required precise modulation. We spent hours tweaking the Low-Frequency Oscillator (LFO) rates and gain levels to find the perfect natural breathing rhythm of the sea.
Accomplishments that we're proud of Cinematic Camera Transitions: The smooth, sweeping motion when you click a bottle feels incredibly premium, physically drawing the user into the close-up view of the bottle.
The Tropical Shimmer Aesthetic: We successfully achieved a deep, rich coastal gradient—transitioning from sunlit teal surface ripples to a dark, deep indigo core—giving the digital ocean authentic physical depth.
Procedural Audio Synthesis: Building a fully functional audio synthesizer from scratch using pure code, eliminating the need for heavy external audio asset downloads.
What we learned Mathematical Wave Superposition: We gained a deep understanding of using sine and cosine waves to simulate natural, chaotic organic patterns in 3D vertex shaders.
Spatial Interaction UX: We learned how critical camera angles and environmental depth (such as fading out non-active elements) are when designing interactive 3D interfaces on the web.
Atmospheric Design: We realized that combining visual 3D design with real-time synthesized audio creates a far stronger emotional impact than either element could achieve on its own.
What's next for Driftwood & Whispers True Oceanic Drift (Physics): Implementing subtle, continuous ocean currents that gently carry the bottles across the screen over time using vector force fields.
Global Weather Syncing: Modulating the ocean's behavior based on the user's local time and weather—creating a tranquil, sunny lagoon during the day, and a dark, starry sea with gentle rain at night.
Message Journeys: Allowing users to track their bottles' journey over time, showing how many miles they've drifted and how many lonely shores they have visited.
Log in or sign up for Devpost to join the conversation.