Voice input
Simulated dictation control with a mirrored pixel spectrum and words that fade into focus; stopping collapses the bars to a point.
Playground
Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.
<PxVoice text="Make the trail grow out of the thumb toward the left and stop at three quarters of the track." />
Installation
pnpm dlx shadcn@latest add @lumesec/px-voiceFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-voice.jsonUsage
import { PxVoice } from "@/components/lumesec/px-voice";
export function Example() {
return (
<PxVoice />
);
}Behaviour
A mirrored pixel spectrum with falling peak dots, and words that drift into focus as they are recognised. Stopping collapses the bars into a line and the line into a point. The audio is simulated, since a shared page can’t use the microphone.
API reference
Attributes
textReact proptextTypestringDefaultMake the trail grow out of the thumb toward the left and stop at three quarters of the track.The sentence the simulated recognition types out, split on spaces. Read each time listening starts.
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
transcriptReact proponTranscriptDetail{ text: string }Fires when listening stops, with the words recognised so far joined by spaces.
Methods
Call them on the element, for example through a React ref.
start()Clears the transcript and starts the simulated listening. Ignored while the closing animation runs.
stop()Stops listening and fires transcript. Only acts while listening.
Properties
sentence (read-only)TypestringThe text attribute, or the default sentence.
Accessibility
- The mic is a native button whose
aria-labelswitches between "Start dictation" and "Stop dictation". - The transcript paragraph is an
aria-live="polite"region, so recognised words are announced as they arrive. - The spectrum canvas has no role or label.
- Reduced motion: the mic's pulsing ring and the word fade-in are disabled and the status text swaps without the roll; the spectrum still animates.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --border, --card, --foreground, --lumesec, --lumesec-foreground and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-fg, --ui-muted, --ui-on-accent and --ui-surface.
Notes
- No microphone is used. Audio levels are generated and the transcript is the
textattribute revealed word by word; listening stops on its own 0.7 seconds after the last word. - The host carries
data-state="listening"ordata-state="closing"during those phases.
Related
Was this page helpful?