This is a submission for Weekend Challenge: Passion Edition
What I Built
I built Origin — you answer seven short questions about something you're passionate about, and it turns those answers into a full cinematic microsite: an origin story, a five-stage timeline, a holographic character card, an AI-generated movie poster, voice narration, and a shareable public page with a QR code.
The idea started from something that bugged me about most "AI writes about you" tools: you fill in a form, wait, and get back a wall of text. That's it. I wanted the output to feel like the opening scene of a movie about your journey, not a paragraph a chatbot spat out. So instead of returning text, Origin renders your answers as an actual experience something you'd genuinely want to screenshot and send to a friend, not just read once and close the tab.
It's guest-first too. No sign-up, no login wall between you and your story. You answer, you generate, you get a link. That was a deliberate call — for a weekend-challenge project, friction kills demos, and I didn't want a single person to bounce off an auth screen before they even see what it does.
Demo
🌐 Live Demo:: origin-eosin.vercel.app/
Code
🐙 GitHub: github.com/Divyesh-5981/origin
Fastest way to feel what it's like: pick a passion, answer the seven prompts honestly (the contradiction detector actually calls you out if your "lowest point" and "turning point" don't line up), and watch the generation screen work through it before landing on your story page.
How I Built It
The stack is Next.js 16 (App Router) with React 19 and TypeScript in strict mode, Tailwind v4 for styling, and Three.js / React Three Fiber for the 3D hero scenes — with a hard rule that every 3D surface has to degrade to a proper 2D fallback. I check WebGL support, reduced-motion preference, and rough device tier once, up front, and that decides whether someone gets the full 3D scene, a lighter 3D pass, or the 2D version. Nothing renders both and fights for GPU time.
Google Gemini 2.5 Flash is doing the actual storytelling. It turns the user's seven answers into a structured movie story. I validate every AI response before using it. If something is missing or incorrect, the app asks Gemini to fix it automatically instead of showing an error. I also check the input for safety before generating the story. The final movie poster is generated dynamically from Gemini's layout instructions and can be downloaded as a PNG.
ElevenLabs powers the movie-style voice narration with both male and female voice options. To make the experience reliable, the app automatically falls back to the browser's built-in speech engine if ElevenLabs is unavailable. If voice playback isn't supported at all, the narration is still shown as text, so users never lose the experience.
Underneath all of it is what I'd call the boring-but-important decision: the logic that decides what to render, which narration provider to use, whether an answer is actually valid, and how to repair bad AI output all lives in a framework-agnostic core (src/lib/core) with zero React, zero network calls, zero SDK imports. It's pure functions I can unit test and property test (Vitest + fast-check) without spinning up a browser or mocking an API. When you're building fast for a deadline, that's the one part of the codebase I trust completely, because it can't quietly break from a UI change.
One more thing worth mentioning: the app runs with zero API keys. No Gemini key, and the generator builds a complete, schema-valid mock story from your actual answers instead of a canned demo. No ElevenLabs key, and it falls back to Web Speech. That wasn't a nice-to-have I bolted on — it's what let me test the entire flow end to end dozens of times a day without burning quota, and it means anyone judging this can clone the repo and walk the full experience without asking me for credentials first.
Prize Categories
- Best Use of Google AI — Gemini 2.5 Flash is the engine behind the entire story generation pipeline: structured JSON output, Zod-validated, self-repaired on schema failures, safety-screened before generation, and it also designs the movie poster layout that gets rendered as SVG.
- Best Use of ElevenLabs — streaming voice narration with selectable voices, wired directly into the story microsite, with a genuine multi-layer fallback (Web Speech, then trailer script) so narration never just breaks.
Top comments (2)
This was such a fun read! Loved seeing the thought and effort that went into building this. The whole idea is super creative, and it's always nice reading a breakdown that feels genuine instead of just showing the final product. Awesome work 👏
Thanks for the kind words, Meet! It was an absolute blast to build, and I'm thrilled you enjoyed the write-up. Appreciate the support! 🙌