🌊 OceanBottle

An immersive 3D experience that visualizes your plastic bottle usage. Swim through an ocean filled with your waste, then learn how Ocean Bottle is making a difference.

Video Demo

https://github.com/user-attachments/assets/c0a27053-9bd4-4ea3-a088-d39db6fc38b9

What is this?

You enter how many plastic bottles you use daily. We spawn that many bottles into a 3D ocean. You swim through them. It's uncomfortable. That's the point.

The experience transitions into a website showcasing Ocean Bottle - a company funding ocean cleanup with every purchase.

The Campaign: Your Bottle. Your Legacy

This project was developed for BUSI 3205: Marketing Communication as a campaign case study for OceanBottle's "Your Bottle. Your Legacy" initiative. The core insight: most people know plastic pollution is bad, but abstract statistics don't drive behavior change. The campaign transforms data into emotion.

It's about combining awareness with empowerment—showing that individual action matters in systemic change.

Why?

When I first calculated that using just 2 plastic bottles a day adds up to over 700 bottles a year, it felt... off. Like I knew it was bad, but I couldn't actually feel it. So I built this to explore how interactive design can bridge that gap between knowing and feeling. Also wanted to learn Babylon.js.

Tech Stack

• Babylon.js - 3D ocean rendering with WebGL
• Web Speech API - AI voice narration
• Web Audio API - Underwater ambient sound
• Vanilla JS - Clean ES6+, no framework bloat
• Vite - Fast dev server and bundler
• CSS3 - Custom animations and responsive design

Environmental Impact

Each OceanBottle purchased removes 1,000 bottles (11.368 kg) of ocean-bound plastic through:

• rePurpose Global - Policy & lobbying
• Plastic Bank - Coastal cleanups
• Plastics For Change - Data transparency

17,802,997+ kg of plastic removed so far.

Architecture

graph LR
    subgraph Frontend ["Frontend (Vite + Vanilla JS)"]
        A[index.html] --> B[main.js]
        B --> C[app.css]
    end

    subgraph 3D ["3D Engine (Babylon.js)"]
        D[ocean-scene.js] --> E[GLB Models]
        D --> F[WebGL Canvas]
        E --> G[Bottles / Fish / Turtles]
    end

    subgraph Audio ["Audio (Web APIs)"]
        L[Web Speech API] --> M[Voice Narration]
        N[Web Audio API] --> O[Underwater Ambience]
    end

    subgraph Website ["Product Website (Static HTML)"]
        H[buy-now.html] --> I[Hero + Impact Story]
        I --> J[Product Showcase]
    end

    subgraph External ["External"]
        K[oceanbottle.co/cart]
    end

    B -->|Initialize scene| D
    B -->|Trigger narration| L
    B -->|Play ambience| N
    F -->|User completes experience| H
    J -->|Add to Cart| K

    style Frontend fill:#2d3748
    style 3D fill:#1a7bb8
    style Audio fill:#6b46c1
    style Website fill:#175e8e
    style External fill:#38a169

Loading

Quick Start

npm install
npm run dev

---

Made by Shirley Huang • If this made you rethink plastic bottles, mission accomplished.