Build an Instant Voiceover Studio, a single-page app where users paste text,
pick a voice, and generate professional audio using Rime TTS.
For: Content creators who need quick voiceovers for YouTube, podcasts, and apps.
Design: Rime design language with near-black background (#0D0D0D, #161616),
orange-to-red gradient accents (#FF9300 to #B10000), grey surfaces (#333, #1A1A1A),
Inter font. Clean and premium.
Layout (two-column on desktop, stacked on mobile):
Left Panel:
1. Text input area with character count (5000 max)
2. Voice picker with a grid of 8 Arcana flagship voice cards (luna, astra, sirius,
estelle, lyra, vespera, walnut, eliphas) with gradient avatars
3. "Generate Voiceover" button following Rime design language
4. Audio controls with play/pause, progress bar, download wav
Right Panel:
5. Three.js particle sphere with a small orb of 500+ particles, centered in the
right panel. Slowly rotates when idle with dim orange tint. When audio plays:
particles expand outward and glow bright orange (#FF9300) to red (#B10000),
pulsing with the voice.
Use Rime TTS
API: POST https://users.rime.ai/v1/rime-tts
Header: Authorization: Bearer {API_KEY}
Docs: https://docs.rime.ai/api-reference/arcana/streaming-wav