hear me out

• 

• 

• 

Inspiration

Everyone has a world they'd move into if they could: a common room by the fire, a rain-soaked neon city, a seaside sketchbook. And everyone has a song or a poem they think they understand.

Something my younger sister said(she's in 9th grade): we memorize what poems "mean" for exams, but we rarely feel them. So I asked: what if you could read a poem or hear a song through the world you love, and do it together with friends? Art only matters if it reaches you. That's Hear Me Out.

What it does

Create. You pin stills from a show, a film, Pinterest or your own photos onto a moodboard. The board takes on their light as you go. Gemini's vision model studies the images and designs a whole world: palette, typefaces, texture, ambient sound, what drifts through the air (embers, rain, fireflies), and an original Interpreter character with its own voice.

Experience. Each world is a little desktop with draggable windows:

The Interpreter reads any song, poem or line of dialogue through that world. The same song reads completely differently in a candlelit archive than on a neon rooftop.

Reading room: paste a poem and walk through it line by line.

Now playing: full songs and playlists from YouTube, or quick previews, with a visualizer in the world's colors.

Journal: the Interpreter can gently reflect on your week.

Keepsakes: turn any line into a downloadable poster.

One song, every world: send one piece through every world at once and compare the readings side by side.

Collaborate. Share a link and friends join the same world. Everyone hears the same song at the same moment, sees each other's cursors, chats, reacts, and watches the Interpreter's replies stream in live.

Why it matters

Students who switch off from poetry get to meet it in a world they already care about, and discuss it together.

Friends who are apart get to do something together instead of just texting. The WHO Commission on Social Connection found loneliness affects about 1 in 6 people worldwide, with young people hit hardest.

How I built it

Next.js + React + TypeScript, with Framer Motion for the cinematic, 90s home-video feel (film grain, light leaks, a camcorder viewfinder).

Gemini API on the server only (the key never reaches the browser): vision for designing worlds, streaming text for the Interpreter, and Gemini voices for reading aloud. Requests are validated with zod and rate limited, and the app falls back to another model if one is unavailable.

The AI designs data, not code. Gemini returns a constrained JSON theme, and the app enforces readable contrast so every world stays legible:

$$\frac{L_{\text{text}} + 0.05}{L_{\text{bg}} + 0.05} \ge 6$$

Web Audio API synthesizes each world's soundscape live (fire, rain, ocean, night, city, space) from noise and oscillators, with no audio files.

Canvas draws the particle atmosphere and renders the keepsake posters.

Rooms run over BroadcastChannel locally, with Supabase Realtime support for cross-device play.

YouTube IFrame Player API for full songs, following YouTube's embedding rules (the player always stays visible).

Wallpapers: photo search via Openverse, free AI images via Pollinations, and pasted image links fetched through a server proxy that blocks private network addresses.

I built this with help from an AI coding assistant, which let me spend my time on the idea, the design and testing.

Challenges I ran into

Making AI output reliable on stage: free-form AI design broke layouts, so I switched to a strict JSON schema plus contrast checks.

Two tabs counted as one person in a room because they shared an identity, so I moved identity to per-tab storage.

Platform limits: Pinterest has no public search API, Google's image generation isn't free, and some music videos block embedding. I designed around each one (pasting image links, a free generator, clear messages).

Wallpapers looked zoomed in and blurry, so I built a smart fit that shows the whole picture over a blurred copy when the shapes don't match.

Setup pain: an old Node version and a nested zip folder cost real time.

What I learned

Constraints make AI more creative: giving the model a vocabulary (fonts, textures, sounds) worked far better than open-ended prompts.

Real-time sync is mostly about edge cases: late joiners, echo loops and autoplay rules.

Design is the product. The same features felt "barely anything" until the motion, sound and atmosphere came together.

What's next

Accounts and private rooms, a classroom mode with preloaded poems and a QR code to join, remixing someone else's world, and video postcards of a world.

Built With

• css3
• gemini-api
• next.js
• node.js
• react
• typescript