Voice Record

An animated voice recording pill button with soundwave frequency bars and a morphing stop/loader action.

AI voice prompt inputs, audio notes, and dictation tools in chat apps.
Surfacing real-time soundwave activity when microphone recording is live.
Providing an intuitive one-tap stop and confirmation flow with MorphIcon animations.

Prop	Type	Default	Description
`isRecording`	`boolean`	—	Controlled active recording status.
`onRecordingChange`	`(recording: boolean) => void`	—	Callback fired when the recording state toggles on or off.
`onSave`	`() => void`	—	Callback fired when recording completes and saves.
`label`	`string`	`"Voice"`	Default text label shown in resting state.
`savedLabel`	`string`	`"Saved"`	Confirmation text label displayed upon saving.
`activeDelayMs`	`number`	`1000`	Delay in milliseconds before active waveform frequencies kick in.
`savedDurationMs`	`number`	`2000`	Duration in milliseconds that the saved confirmation checkmark remains visible.
`className`	`string`	—	Additional CSS class names.

Staggered sinusoidal height scales across individual soundwave bars.
Spring transition (stiffness: 420, damping: 32) for popping the external stop button.
Smooth icon morphs between LoaderCircle, Square, and Check via MorphIcon.