Tiny Drama

Tiny Drama turns painfully ordinary moments into absurd narrated performances.

Type or speak something boring, choose a style, and hear it transformed into a movie trailer, nature documentary, breaking-news report, or villain origin story.

Screenshots

Hero experience

Full experience

Features

• Four humorous narration styles with multiple takes
• ElevenLabs text-to-speech with a browser-voice fallback
• Browser speech recognition for hands-free input
• Reactive Three.js comedy character
• Copy, replay, and regenerate controls
• Locally saved recent masterpieces
• Responsive and accessible interface

Built with

• Next.js and React
• TypeScript
• Three.js
• ElevenLabs text-to-speech
• Vercel

Run locally

Requires Node.js 22.13 or newer.

npm install
npm run dev

Open http://localhost:3000.

Connect ElevenLabs

Copy .env.example to .env.local, then replace the placeholders with your own credentials:

ELEVENLABS_API_KEY=your_elevenlabs_api_key
ELEVENLABS_VOICE_ID=your_elevenlabs_voice_id

.env.local stays ignored by Git, so real credentials are not committed. The voice ID is optional; when it is omitted, Tiny Drama uses its default voice.

Vercel

1. Open your Vercel project and go to Settings → Environment Variables.
2. Add ELEVENLABS_API_KEY.
3. Optionally add ELEVENLABS_VOICE_ID.
4. Redeploy the project so the new values are available.

Keep the API key server-only. Never rename it with a NEXT_PUBLIC_ prefix.

Verify

npm test