What I Built

Passion Uncorked — you type a single word or a full sentence about whatever you're passionate about ("open source," "football," "cooking for people I love," anything), then choose to either age it in wine 🍷 or forge it in fire 🔥. Within about 30 seconds you get back a completely unique, narrated artifact for that exact passion: either a wine label (château name, vintage year, tasting notes, a collector's note) or a forge mark (forge name, smith's title, temper notes, a smith's mark) — read aloud in a voice built for that vessel.

Same input, two entirely different pieces of writing, visual direction, and narration. The idea came straight from the challenge prompt: passion isn't one thing — it's devotion for one person and intensity for another, so the app treats those as two genuinely different creative outputs instead of one template with a palette swap.

Code

Khushalsarode / dev.to-challenge

DEV Weekend Challenge: Passion Edition Submission

🍷🔥 Passion Uncorked

Type any passion → age it in wine or forge it in fire → a one-of-a-kind, narrated artifact in under 30 seconds.
Live demo → · Gemini-written copy · ElevenLabs narration · original browser-synthesized score

Why we built this

The DEV Weekend Challenge: Passion Edition asked for something inspired by passion — the fire that drives obsession, devotion, and craft, in whatever form that takes.

Everyone's passion looks different, but almost nobody gets to see theirs presented as something precious. A sommelier ages a grape harvest into a vintage worth collecting. A blacksmith tempers raw ore into a blade worth naming. We asked: what if we did that to your passion instead — whether it's "open source," "football," or "cooking for people I love"?

Passion Uncorked takes a single word or a full sentence and, in real time, turns it into one of two completely different artifacts:

View on GitHub

How I Built It

React 18 + Vite, no backend — Gemini for copy, ElevenLabs for narration, the Web Audio API for an original ambient score, and html2canvas for the downloadable PNG export. Deployed on Cloudflare Pages.

Here's the stuff that actually took real thought (or real debugging) to get right:

We didn't just let Gemini free-write and hope for the best. Every call goes out with responseMimeType: 'application/json' against a strict schema per vessel, so we always get back a title, tasting or temper notes, a rarity or intensity line — and, this one mattered more than we expected, a separate tts_script field. Turns out copy that reads well on a label doesn't always sound natural out loud, so we just had the model write both versions instead of reusing one.

Gemini's flash models have this "thinking" budget quirk that cost us an evening early on: they'll quietly burn tokens on invisible reasoning by default, and if you don't set thinkingConfig: { thinkingBudget: 0 } yourself, you can get back a response that looks totally successful and is completely empty. Fun one to debug. We also added a small JSON repair-and-retry step for the rare case where a response gets cut off mid-object.

Wine and fire don't share a narrator, on purpose. Each vessel has its own ElevenLabs voice ID and its own voiceSettings — stability and style tuned differently — pulled in through the official SDK. It only loads once someone actually hits submit.

The bottle and the flame actually pay attention to what the AI wrote. The wine's liquid color comes straight from whatever color_mood Gemini picked; the fire's flame height and glow scale off the intensity line it generated, so a result described as "White-Hot" really does burn brighter on screen than one that's "Smoldering." It's all SVG and CSS — no image model involved, so it's instant and costs nothing.

The ambient music isn't a loop we found somewhere — it's genuinely being composed in your browser while you're on the page, using the Web Audio API. Wine gets a soft arpeggio, fire gets a darker ostinato, both built live from oscillators and gain envelopes, no audio files anywhere.

And the certificate itself got rebuilt from SVG to plain HTML/CSS partway through, mostly because long AI-generated titles kept overflowing the card and it looked broken. CSS container queries fixed that properly — the type now scales to the card's own width instead of us guessing at font sizes.

Prize Categories

Best Use of Google AI — Gemini drives structured JSON generation, tone switching (a "classy" and a "sassy roast" mode), the color-mood system that tints the entire UI, and the narration script itself.

Best Use of ElevenLabs — every result is narrated through the official ElevenLabs SDK with distinct, deliberately-tuned voices per vessel, making narration a first-class output rather than a bolt-on.

Thanks for reading — go pour or forge your own passion 🍷🔥

DEV Community

Passion Uncorked — I Built an App That Ages Your Passion Into Wine or Forges It Into Steel