OBI ONE

Obi One is passionate and only has an interest in football not soccer.

Comment

Inspiration

John Obi Mikel has accidentally become a TikTok meme legend. Clips from his "Taking the Mikel" podcast get pulled out of context where he rants with maximum confidence while mangling words. "Desire" becomes "desiyereee." "Inexperience" is "hinexperience." Every sentence ends with "mayte." The comments are gold: "This podcast is gonna feed memes for generations."

So we asked: what if you could just argue with him?

What it does

OBI ONE lets you argue football (or anything) with an AI clone of Obi Mikel. You type or speak a take using a Samsung Galaxy S5 interface, blue electricity dots travel along a wire to what was meant to be his mic as a loading animation, and then he fires back at you in his cloned voice with full dramatic energy. His arms wave, his eyebrows go angry, his mouth flaps. A speech box shows what he is saying, but the screen shows the correct word ("desire") while his voice says the unhinged version ("desiyereee"). That gap is the whole joke.

How we built it

  • LLM: Google Gemini 2.5 Flash with a deeply detailed system prompt built from transcribing three podcast episodes and mining TikTok comment sections for his iconic phrases
  • Voice: ElevenLabs Instant Voice Cloning trained on podcast audio
  • Backend: Node.js + Express proxying API calls securely
  • Frontend: Vanilla HTML, CSS, and JavaScript with a full CSS sprite of Obi, an animated Samsung Galaxy S5, and a wire animation using SVG animateMotion
  • Voice/display split: Gemini outputs phonetic spellings ("de-zaiii-eeer", "calture") for ElevenLabs, and a client-side transformer rewrites them to normal spellings for the speech box

Challenges we ran into

  • Getting ElevenLabs to pronounce his catchphrases correctly required treating speech as purely phonetic and building a full voice/display mapping system
  • Keeping the LLM in character. It kept defaulting to neutral analysis until we added aggressive few-shot examples of him applying football logic to completely unrelated situations
  • Managing five visual states (homepage, messaging, recording, loading, speaking) cleanly, solved by driving all CSS from a single data-state attribute on <body>

Accomplishments that we're proud of

The voice/display split is genuinely novel. Nobody expects the screen to say "desire" while the audio confidently says "desiyereee." That one mechanic captures exactly why Obi Mikel is funny and we are proud we found a technical solution that serves the comedy rather than fights it.

What we learned

Voice cloning is shockingly accessible. Phonetic prompt engineering for TTS is a completely different skill to normal prompting. And building something with zero market fit is a surprisingly good creative constraint, it forces you to optimize purely for what makes you laugh.

What's next for OBI ONE

Adding Chris McHardy's adlib reactions as a second voice clone, a TikTok-friendly clip export, and more signature phrases because the catalogue of Obi-isms grows every week. Make no mistake about that, mayte. Also, I would make the UI look exactly how I wanted it, especially the Mikel Obi Sprite. I would also get the voice clone to sound more like him.

Built With

Share this project:

Updates