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 16 Arcana voice cards (luna, astra, sirius, estelle,
lyra, vespera, walnut, eliphas, arcade, atrium, eucalyptus, fern, stucco, transom,
oculus, moss) with gradient avatars
3. "Generate Voiceover" button following Rime design language
4. Audio controls with play and pause, progress bar, and download wav options.
Right Panel:
5. Three.js particle sphere with a small orb of over 500+ particles, centered in the
right panel. It slowly rotates when idle with a 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 RIME_API_KEY (stored in Secrets)
modelId: Arcana
Docs: https://docs.rime.ai/api-reference/arcana/streaming-wav
