Ocean Micro plastic awareness

The Unseen Ocean — a cinematic dive into microplastic pollution. See the invisible, measure your impact, and pledge real change for the ocean.

Comment

Inspiration

Microplastics are a weird problem to explain because you can't point at them. They're not a photo of a turbulent oil spill or a beach covered in bottles — they're in the salt on your table and you'd never know it. Every explainer we'd seen about this topic was basically a scary stat followed by another scary stat, and we found ourselves tuning out after the third one, so we figured other people probably do too. We wanted to build something where you don't just read that plastic breaks down instead of disappearing — you watch it happen. Where you don't just hear that your laundry sheds fibers — you drag a slider and watch a reef lose its color because of it. If the problem is invisible, the fix felt like making people actually see it for once, even if just on a screen.

What it does

The site is a four-part journey and we split it that way on purpose, after realizing our first version crammed everything into one long scroll that nobody made it through.

The first part, The Journey, is a cinematic opener — you descend from the surface into the deep, and there's a "time machine" showing how a piece of plastic ages over decades without ever really going away. The second part, The Invisible, has a Plastic Vision toggle: you're looking at a normal photo of the ocean, you flip a switch, and suddenly there's a swarm of microplastics sitting right there that you couldn't see a second ago. It's paired with a map of ordinary household stuff — tea bags, synthetic laundry, cosmetics — that quietly shed plastic nobody thinks about.

The third part, The Ripple, is the one we're most proud of. It's a fully 3D underwater scene — coral, kelp, sea grass, six kinds of fish swimming in schools, a turtle, a few crabs, drifting particles — and it's all tied to four sliders for your own habits (bottles, laundry, single-use plastics, packaged food). Push them up and the water gets murkier and the fish start disappearing. Pull them down and the reef comes back to life.

The last part, Take Action, is where it gets practical: a five-question quiz that scores your actual exposure, a daily challenge with a streak counter, links to real organizations doing cleanup and policy work, and a pledge wall where you commit to something specific.

There's also a small gamification layer running under all of it — points, badges, a quest checklist — that remembers you across visits without needing an account. And behind the scenes, every quiz result gets saved to a database, which feeds a private admin dashboard where we can actually see the exposure patterns across everyone who's taken it.

How we built it

It's a Next.js 16 app with TypeScript, deployed on Vercel. Styling is Tailwind with a custom ocean color palette and a glassmorphism look we kept refining until the cards felt more like frosted glass than flat panels. Framer Motion handles the transitions and reveals throughout.

The 3D scene is the part that took the most care. It's built with Three.js through React Three Fiber, and everything in it is generated in code — no downloaded models, no textures pulled from anywhere. The fish skins are painted onto canvases at runtime, the coral shapes are built from primitive geometry stacked and tinted, the kelp sways through chained segments, and the particles (bubbles, marine snow, dust, the plastic swarm) are all instanced meshes reacting to one pollution value that the sliders control.

For state that needs to survive a page reload — quest progress, badges — we used Zustand with persistence to local storage, with a hydration-safe setup so it doesn't clash with server rendering. On the backend, we're using Neon's serverless Postgres, and the scoring logic for the quiz lives in one shared file so the server always recalculates your score itself instead of trusting whatever the browser sends it. For the admin login, instead of pulling in a whole auth library for what's really just one person logging in, we wrote a small HMAC session token using the Web Crypto API, so it works the same whether it's running in Edge middleware or a normal server route.

Challenges we ran into

Hydration mismatches showed up more than we expected — anything involving today's date, or checking whether someone prefers reduced motion, or generating random particle positions, would render differently on the server versus the browser and Next.js would complain loudly about it. The fix each time was replacing randomness with a seeded generator or using sync-safe hooks instead of guessing.

Three.js and React don't always get along cleanly either. React wants render functions to be pure, but a lot of Three.js code wants to mutate things directly. We had to rework several parts of the scene to use declarative Canvas children instead of imperative changes, and swap every bit of Math.random() for a deterministic seeded version.

The biggest structural challenge honestly wasn't technical — it was realizing, after most of the features already worked, that stuffing everything into two long scrolling pages made the site exhausting rather than engaging. We had to go back and rebuild the navigation into four proper sections without breaking the sense that it's still one continuous story.

Performance on the 3D scene took some tuning too — six fish species, coral, a turtle, and multiple particle systems all animating at once needed instancing, a capped pixel ratio, and pausing the render loop whenever the scene scrolls out of view.

And building the admin portal without leaning on a big auth package meant writing our own token verification carefully, since Edge middleware doesn't have access to Node's usual crypto tools.

Accomplishments that we're proud of

Getting a fully procedural underwater scene running smoothly, with nothing downloaded from anywhere, and having it actually respond to what the user does rather than just looping in the background. Restructuring the whole site into something people can actually get through instead of abandoning halfway. Having quest progress and badges that stick around across visits without ever asking for an account. Standing up a real backend — with server-side validation and a working admin dashboard — in a short amount of time without cutting corners on security. And honestly, just keeping the codebase clean the whole way through: no silenced type errors, no disabled lint rules to make a red squiggle go away, everything passing a real production build at every stage.

What we learned

We learned how far the Web Crypto API alone can get you for something like session auth, without reaching for a library. We learned that seeded, deterministic randomness isn't just a nice touch — it's basically required if you want complex animated scenes to coexist peacefully with React. We learned that showing someone a slider that visibly kills a reef teaches more in five seconds than a paragraph of statistics ever could. And maybe the biggest lesson was less technical: sometimes the right move is to go back and restructure something that already "works," because working isn't the same as being worth finishing.

What's next for Ocean Microplastic awareness

There's a lot we'd still like to add. A public dashboard showing aggregate, anonymized numbers from everyone's quiz results and pledges, so people can see collective progress instead of just their own. Location-aware suggestions so the resource links point to cleanup events and recycling centers actually near the visitor. A way to share you

Built With

Share this project:

Updates

Submission history