- Client
- Narrali
- Role
- Lead Designer & Developer (Full-Stack)
- Timeline
- 1 sprint
- Year
- 2025
- Category
- AI Platform
Overview
Narrali is cinematic audiobooks: a Next.js 16 reader/player on Firebase Hosting with Stripe plans, ElevenLabs narration produced by our generation scripts, and a public-domain catalog (Frankenstein, Dracula, Pride and Prejudice, and more). Live at narrali.com.
Why
Indie authors and listeners were stuck between expensive human narration and flat TTS. Narrali is cinematic audiobooks: a reader/player that treats public-domain classics (Frankenstein, Dracula, Pride and Prejudice, and more) as a production, not a robot voice over a PDF.
That is relevant to any media product where voice, catalog, and commerce have to live in one player. Stripe plans, an ElevenLabs narration pipeline, and a Next.js 16 app are how the catalog actually plays.
The challenge
Existing audiobook tools either rely on expensive human narrators or produce robotic TTS. There was no consumer product that treated narration as cinema — pacing, shareable moments, and a player that feels like a film.
What made it hard
- Indie authors and listeners were stuck between expensive human narration and flat TTS.
- The landing page had to feel like a film, not a SaaS signup.
- Production needed expressive pacing and shareable segments, not a single MP3 dump.
Approach
We shipped a scroll-driven marketing experience, book routes at `/books/[slug]`, shareable segments, Stripe billing, and an admin. Narration is generated ahead of time with ElevenLabs scripts; GPT-4o adds narration direction in the generation scripts. Seedance preview exists as an experimental route.
Process
- Catalog + player: Book pages and cinematic playback as the core loop.
- Production pipeline: ElevenLabs generation scripts for narration and word timings; shareable segments.
- Commerce: Stripe subscriptions and admin operations.
What we built
- Cinematic book player: `/books/[slug]` playback with a catalog of public-domain titles treated as films, not files.
- Shareable segments: `/share/[bookId]/[segmentId]` so a moment can travel without sending the whole book.
- Narration pipeline: ElevenLabs voices and word timings generated by scripts before release, so the player streams finished audio.
- Stripe + admin: Subscription billing and an operations console.
How it was built
Next.js 16 static export on Firebase Hosting (targets `narrali` / `narrali-staging`). Narration is produced ahead of release by ElevenLabs scripts that generate voices and word timings; GPT-4o adds narration direction in the same scripts. Admin surfaces: library, books, users, requests, overview. A client dashboard has an upgrade flow, and the live site shows pricing plans.
We name the titles in the catalog (Frankenstein, Dracula, Pride and Prejudice, and more) rather than claim every classic. Live at narrali.com. The player is the product: reading and listening as one surface.
Stack
- Next.js 16: App + player
- Firebase: Hosting, Auth, Firestore
- ElevenLabs + OpenAI: Narration generation and direction scripts
- Stripe: Subscriptions
Outcomes
- Player: Per-book cinematic routes
- Catalog: Public-domain titles in product
- Stripe: Subscription billing
- Live: narrali.com
Wins
- Cinematic audiobook player with Stripe on the same product.
- Named public-domain titles in the brief (Frankenstein, Dracula, Pride and Prejudice) — not a counted “all classics” catalog.
- Narration generated ahead of time by an ElevenLabs pipeline, not in the browser.
- Admin for library, books, users, and requests on Firebase hosting.
Hard parts
- Human vs robot: Flat TTS was not a product. Voice had to feel produced without a full narration studio per title.
- Catalog, not a demo: Classics had to be a library people return to, not three sample tracks.
- Produced, not live TTS: Narration is generated before release so the player can stay a player.
Services
- Next.js 16 + TypeScript
- ElevenLabs Voice AI
- OpenAI Integration
- Stripe Subscription Billing
- Firebase Auth + Hosting
- Motion & Animation Design