Blub - Ocean Journal

Blub: how deep was your day? Blub turns a quick mood tap or a few spoken words about your day into a dive through five ocean zones, where you meet a creature and get a gentle whisper back.

Comment

Inspiration: Most journaling apps feel like homework, and they feel the worst on the days you need them most. Streaks and daily reminders turn reflection into pressure, and missing a day can feel like failing. We wanted to flip that: a place where checking in feels calm, where a hard day is as welcome as a good one, and where showing up is the reward.

The ocean was the natural metaphor. The deeper you go, the quieter and darker it gets, but there’s still life down there. So in Blub, hard days dive deeper and earn more points, and every zone, from the sunlit shallows to the trench, has something worth finding.

Technica celebrates underrepresented genders in tech, and that shaped how we thought about who Blub is for. Technology for emotional wellbeing is often designed around one kind of user: someone with the energy to journal daily, the ease of typing out their feelings, and a comfort with being tracked. We wanted to build something that welcomes a wider range of people. You can write, speak, or tap a mood, every feature works with a keyboard and screen reader, there are no streaks or guilt, and our mermaid, merman, and merfolk avatars start as a simple choice, with every look and accessory open to anyone.

What it does: Blub turns a short note about your day into a dive.

Two ways to log: write or speak a few words, or tap a quick mood (Bright, Warm, Even, Down, Heavy) on low-energy days. They’re separate tabs, so you do one or the other.

Five ocean zones: Sunlight, Twilight, Midnight, Abyss, and Trench, each tied to a mood and each with its own look, soundscape, and creatures. For written or spoken logs, the Gemini API reads your entry and chooses the zone.

Creatures to collect: every dive releases a creature into the scene, and 20 are waiting in your Field Guide. A whisper from Blub: a short, kind line floats in the sea, and ElevenLabs can read it aloud in Blub’s voice.

Optional challenges: after a dive, one gentle, skippable challenge appears for your zone: Bright: Message in a Bottle, a voice or text note to your future self Warm: Catch the Crab, a playful tap or voice game Even: Tomorrow’s Goal, one small goal with a no-guilt check-in Down: Bubble Rise, guiding a bubble up through all five zones Heavy: Little Gift, where a bottle from your past self drifts back to you, then you feed a baby seahorse

Sand dollars and an avatar: challenges earn sand dollars to dress your mermaid or merman with accessories. Points come from dives, and sand dollars come only from challenges.

Your week at a glance: a dive profile chart shows your week as depth over time, with a plain-language summary.

There are no streaks and no punishment, and every challenge has a Skip button. If a dive suggests someone may be in crisis, the games disappear and Blub shows a calm screen with the 988 Suicide & Crisis Lifeline and a “Talk to a person” option instead. Blub is a reflection tool, not therapy or medical advice.

How we built it: Frontend: React, TypeScript, Vite, and Tailwind CSS. The sea scenes, swimming creatures, and the bobbing avatar are layered SVG with animation.

AI: the Google Gemini API analyzes written and spoken logs, picks the zone, extracts themes, checks for signs someone may need support, and writes Blub’s whispers. A keyword-based fallback keeps the app working if the API fails.

Voice: ElevenLabs text-to-speech gives Blub a narrator voice. The browser’s Web Speech API handles dictation, using one shared helper across features.

Sound: Tone.js and the Web Audio API generate the ambient soundscape for each zone, plus the soft chimes in the challenges. ElevenLabs was used to create the background music.

Storage and privacy: dives, goals, bottles, and the avatar are saved in the user’s own browser (localStorage and IndexedDB), with a “Delete my data” button. Audio bottles are recorded with MediaRecorder and never leave the device.

Deployment: Vercel, with the Gemini and ElevenLabs calls running in serverless API functions so the API keys never reach the browser. Those functions include rate limiting.

Accessibility: keyboard support, screen-reader announcements, one-tap mood logging, voice input, colorblind-safe design, and prefers-reduced-motion support.

Challenges we ran into: Making the sea feel alive, not chaotic. Our first version had stills drifting randomly and overlapping each other. We rebuilt the motion so creatures animate their own bodies, face where they’re going, steer around each other, and swim around the whisper text. We also made the sea start empty so creatures appear only as a reward for each dive.

Speech recognition bugs. Voice input repeated what we said three times, and the “say catch” button glitched. The cause was multiple recognizers running at once, so we replaced the per-feature code with a single shared speech helper.

Keeping it kind. It was hard to design rewards without pressure. We had to cut anything that implied failure, so sand dollars come only from challenges, skipping costs nothing, and the safety path overrides every game element.

Deploying to Vercel. We hit a dependency version conflict, then serverless functions that crashed because of how Node resolves ES module imports, and then a stale deployment hiding our fix. Each one taught us to read build logs closely.

Polish details. Things like an avatar’s waving hand that looked detached from its body, and bioluminescent dots that fell into a diagonal line, took more tuning than we expected.

Accomplishments that we’re proud of: A full emotional loop that works end to end: log, dive, meet a creature, hear a whisper, try a challenge, dress your avatar.

Five distinct zones, each with its own visuals, sound, creatures, and challenge, so the app feels different at every depth.

Message in a Bottle, where a note you leave on a good day floats back to you on a hard one. It’s personal, private, and stored only on the device.

A safety path we tested on purpose, so crisis signals never lead to a game.

Accessibility built in from the start: voice, one-tap logging, keyboard support, and reduced-motion support.

A live, deployed app where Gemini and ElevenLabs both work with keys kept server-side.

What we learned: Gentle design is harder than it looks. Every reward, message, and animation needed to be checked for hidden pressure or guilt.

Small details matter as much as big features. Motion, sound, and the exact wording of a whisper shaped the whole mood of the app.

Safety belongs at the start of the design, not the end. Building the support path first changed how we designed everything else.

Deployment is part of the product. Moving API calls behind serverless functions taught us a lot about keeping secrets safe and reading logs when something breaks.

Fallbacks make demos reliable. Keyword scoring and the browser voice kept the app usable even when an API failed.

What’s next for Blub - Ocean Journal: Pattern spotting: gentle, clearly labeled observations from your own logs, like “your lighter dives often mention walking.”

Monthly expedition report: a warm recap of your dives, zones, creatures, and challenges.

Seabed decorations and weekly missions: more ways to personalize your sea and ease into a habit without pressure.

Dive buddy mode: log alongside a friend and unlock rare creatures together.

Campus and club view: anonymous, aggregated depth for a group, with privacy designed in from the start.

User testing with real students, to make sure Blub feels as safe and calm as we intend.

Built With

Share this project:

Updates

Submission history