shadcn.io is not affiliated with official shadcn/ui
Voice Auth Login Block for React Aria
A smart-speaker app's sign-in page that asks you to say three words: press Start speaking and the passphrase lights up word by word over a waveform, with no microphone opened.
Installation
Overview
Ask for a spoken passphrase without listening to anyone, with this voice login block for React with React Aria. It's the sign-in page of Vocalane, a smart-speaker app: the page's rails run the full height of the screen and one band crosses it, and in the band a centred column shows the passphrase, amber, ladder, quiet, as three large words with a row of waveform bars under them. Pressing the Shine Button, Start speaking, runs a 2.7 second take: the words light up one after another, as a karaoke line does, while the bars rise and fall on every beat; Stop ends it early. At the end the result replaces the column's body in the same space and takes focus. Nothing is heard, recorded or matched, and the header says the microphone is never opened. It's built from Button, Shine Button and Guides, with a CSS entrance and CSS transitions only. For smart speakers, car and home apps, and any sign-in that offers a spoken phrase.
FAQ
Does this listen to me?
No. The page never calls getUserMedia or records audio: the take is 18 timers of 150 ms, the lit word follows the beat, and the bars take their heights from a fixed curve of the bar and the beat, never from sound. The result says that nothing was heard. In a product you would open the microphone only after Start, stream the audio to a speaker-verification service, and show its level in the bars.
How does the take work?
Each of the three words stays lit for six beats, 900 ms, and the beat that follows the last one ends the take. A word that is said stays in the text colour, the one that is lit is inverted, and the ones to come are muted, so the state never relies on a hue. Stop clears the timer, resets the words and the bars and returns focus to the start button, which then reads Try again.
What changes with reduced motion?
The bars hold one fixed shape while the take runs instead of changing every beat, and their transitions are switched off. The words still light up in turn, because that is how the take shows its progress, and the entrance on load is switched off.
Is a spoken passphrase safe to rely on?
Not on its own. A recording or a synthetic voice can fool a speaker check, so use a voice as a convenience beside something else, such as a device that is already trusted or a password. Keep the passphrase out of the page's text when the account holder should be the only one to know it; here it is shown because the demo needs a visible answer.