Booth: Framer template for AI voice products

Booth is a Framer template for text to speech, voice cloning, dubbing and voice agent products. We designed and built it in Framer: nine pages, a Voices CMS collection, four code components and a set of 3D assets.

Pages Home, Features, Pricing, a voice profile page, Style guide, Instructions, Licenses, Changelog and 404, all sharing one layout for the navigation and footer.

CMS The Voices collection holds Name, Slug, Description, Language, Orb, Tone, Best For and Sample Line. Every item fills a card in the home voice library and gets its own profile page at /voices/slug, with the sample read, a spec table and three more voices underneath.

Code components VoiceCard: tap a card to put a voice on air. The orb brightens and breathes, three dotted rings ripple and a 22 bar waveform plays. RecordButton: a 120 tick dial around a record button, with idle, recording and saved states. PricingConsole: a character fader across 15 steps from 10K to 2M. Prices, allowances, the best fit plan and three readouts (narration time, podcast episodes, support replies) update as you drag. CodeSnippet: color coded code samples for the developer section.

3D and motion Four 3D voice orbs rendered as a halftone dot screen, one per voice, and a looping 3D dot waveform as the hero video. A ticker with a running timecode sits on top, and the voice cloning panel records a live waveform.

System Host Grotesk and IBM Plex Mono, ten color styles led by one Signal accent, text styles with tablet and phone sizes, and every page built down to phone.

What we did Framer template design and development, CMS setup, code components, 3D assets, motion design, responsive design.