Centered Voice Input Hero Block for React

Edit WAVEFORM at the top of the file. Each bar has a height, its share of the waveform's height from 0 to 100, and a delay, where its pulse starts in milliseconds (a negative delay starts it part way through, so the bars never pulse in step). Add or remove bars to change the count. The bars are bg-foreground/70, so they follow your theme, and they spread across the window's footer; while the preview listens each one pulses with Tailwind's animate-pulse, sped up to 1.2 seconds.

It starts and stops the preview. It's a toggle button named "Listen" whose pressed state is announced: pressed, the ring swells out of it, the bars pulse and the status in the title bar reads "Listening…"; released, the ring and the pulsing stop, the bars settle flat and the status reads "Paused". The microphone is a secondary button, so the Shine Button stays the only primary control. It records nothing. It's also how a visitor stops the moving parts, which would otherwise loop for as long as the page is open.

Ask for the microphone with navigator.mediaDevices.getUserMedia({ audio: true }) when the button is pressed, never on load, and stop the stream's tracks when it's released. For bars that follow the voice, read an AnalyserNode's getByteFrequencyData on each animation frame and set each bar's height from it, instead of the pulse. Send the recording to your speech-to-text service, and show the transcript as text near the button.

Yes. The preview is a figure named "Voice input preview", and its one control is the microphone toggle, with a name and a pressed state. The waveform is hidden from screen readers, and the status is in words, not only in the dot's colour. The pill is a link, the headline is the page's h1, and with reduced motion nothing loops or fades in: the ring and the pulsing are gone and the bars stand still.

The headline steps down from text-5xl to text-4xl, the two buttons wrap onto two lines when they don't fit side by side, and the pill's text truncates rather than overflowing. The window fills the column's width, up to max-w-xl, and the waveform's bars spread to fit beside the microphone on a 320px screen.

Use the voice input hero when speaking is the main way people use your product: dictation, voice assistants, transcription or accessibility tools. The preview says "this product listens" before anyone reads the copy. Use a search bar hero for retrieval-first products such as docs sites or stores, and an email capture hero for waitlists and newsletters.