CLUTCH — I Made AI Commentators Turn Any Rivalry Into a Dramatic Sports Broadcast

Rahul Raj — Fri, 10 Jul 2026 14:02:32 +0000

This is a submission for Weekend Challenge: Passion Edition

What I Built

Passion isn't quiet. It argues, it hypes, it declares winners. So instead of building another tracker to log passion, I built something that performs it.

CLUTCH takes any two things you're passionate about — rival players, two frameworks, your side project vs. your 9-to-5, two World Cup teams, literally anything — and generates a live, dramatic sports-commentator-style audio battle between them, complete with a shareable match-card graphic declaring a winner.

Pick a tone (Boxing Ring Announcer, Wrestling Hype Man, Football Pundit, Shakespearean Drama, Nature Documentary Narrator), type in your two contenders, and CLUTCH writes the script, voices it, and hands you a poster-ready match card in under 30 seconds.

The goal wasn't to build a novelty toy — it was to capture that specific feeling of obsession turning into theater: the way rivalry makes even mundane things (tabs vs. spaces, React vs. Vue) feel like a championship fight.

Demo

Live app: https://clutch-iota-ashy.vercel.app/

Try it yourself — type in any two rivals and hit "Start the Clash." (Recommend trying "Shakespearean Drama" mode at least once, it's unreasonably funny.)

Code

https://github.com/RJ1412/clutch

How I Built It

Stack: Next.js 14 (App Router) + TypeScript + Tailwind, deployed on Vercel.

The core flow is three steps: script generation → voice synthesis → shareable output.

Google AI (Gemini) writes the commentary. I fed it a structured prompt that forces short, punchy sports-broadcast phrasing — buildup, tension, a decisive final line — rather than generic paragraph text, and had it return a structured winner + tagline alongside the script so the rest of the app doesn't need to parse free text.

ElevenLabs turns that script into audio. This was the part that actually sells the concept — text on a screen doesn't feel like a rivalry, but a voice that sounds like it's mid-broadcast does. I also built a graceful fallback: if the TTS call fails or hits a rate limit, the app degrades to a text-only mode instead of breaking the whole experience, since a live demo can't afford a hard failure.

On the architecture side, I kept provider logic behind interfaces (ICommentaryProvider, ITTSProvider) rather than calling Gemini/ElevenLabs directly from routes — so swapping either provider later is a one-file change, not a rewrite. API keys never touch the client, inputs are validated and length-capped before hitting either API, and routes are rate-limited per IP.

The last piece was the match-card generator — an SVG "VS poster" rendered client-side and exported to PNG, so every battle produces something actually shareable, not just an audio file sitting in the app.

Built solo — design, both API integrations, and deployment, over the challenge weekend.

Prize Categories

Submitting for:

Best Use of Google AI — Gemini drives 100% of the commentary generation, including structured winner/tagline output that the whole UI depends on.
Best Use of ElevenLabs — Text-to-Speech is the core sensory payoff of the app — it's the difference between "reading about a rivalry" and "feeling like you're at one."