Quick recap of Parts 1 & 2
Part 1 — Proving the idea
In Part One I built a simple aquarium you could drop anywhere on my site. I modeled a basic tank in Blender, rendered it with React Three Fiber + Drei, and added small touches like subtle water, an animated plant, and time-of-day lighting. The goal was to see if this felt worth continuing and just get something out.
Part 2 — Raising the ceiling, Playing with AR and hand tracking more
Part Two focused on scale and polish. I tightened loading, added caustics for that underwater feel, and laid groundwork for “lots of little things” (gravel, bubbles, physics). Not flashy, low poly necessary for smooth performance on laptops and phones.
Part 3 — New-tab add-on
Now I’m looking at it as a new tab add-on. Every time you open a tab, you check in on a tiny living tank.
Under the hood it’s a small game loop:
- Coins that trickle in from browsing
- Feeding
- Upgrades, Fish, and decorations
- Local persistence
The vibe: calm, quick, local. No cloud saves - we may want that though for cross device in the future. It still needs a lot of love - would have been great to do a nice game UI but no time.
Why a new tab?
It’s a perfect “peekable” surface. Frequent, casual interactions without a full session.
The hackathon + my learning goals
This is my hackathon challenge to level up in Three.js with Bruno Simon’s Three.js Journey and community. I’m practicing the stuff that matters:
- Rendering & realism: trying to work out caustics, environment lighting, materials that feel aquatic without killing FPS
- Scale: lots of instances (gravel/particles) and smart throttling, especially for mobile
- Interaction & systems: light physics, placement, fish behavior, feeding, and a tiny new-tab-friendly economy.
- React + pmndrs stack: R3F/Drei and a small, persistent state store
- Claude/gpt/local pair programming got to learn more about the ins and outs of managing context and getting llm help.
Although I’m not a SWE in my day job, this lines up with my work at Mozilla as a personal dev project. Exploring the web and to ship small, delightful, privacy-respecting experiences. The add-on also gives me an excuse to play more with the new web extensions APIs being developed at Mozilla. See also: https://blog.mozilla.org/en/firefox/firefox-ai/speeding-up-firefox-local-ai-runtime/
What’s next
If people really think this would make a good add-on, I’ll give it a shot. Let me know if you like the idea. I’d much rather build with and for people than just make this for myself. Link to the live game in the youtube video description if you want to try it out.