pro190 lines · framer-motion

Voice Input

Talk to the agent. See that it hears you. A mic button with a live waveform from the Web Audio analyser and a transcript line. Demo mode fakes a voice so it works without a microphone.

Use it for: Voice copilots, hands-busy workflows, mobile agents.
Themes: Light + dark
License: Commercial use (draft)

Live

Tap the mic and speak

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

export interface VoiceInputProps {
  /** Number of waveform bars. */
  bars?: number;
  /** Multiplies the mic level. */
  sensitivity?: number;
  /** Simulate a voice instead of asking for the microphone. */
  demo?: boolean;
  /** Called with the final transcript. Wire your STT here. */
  onTranscript?: (text: string) => void;
  placeholder?: string;
  /** Demo only: replay the simulated voice on a loop. */
  autoplay?: boolean;
  className?: string;
}

const DEMO_TEXT = "Pause the deploy agent and show me what it changed since noon.";

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Tap the mic to start; it turns orange with a pulsing ring and the bars follow the frequency data.
→Bars are updated through refs in requestAnimationFrame, not React state, so it stays smooth.
→Timer shows elapsed seconds. Transcript area shows Listening…, the text with a caret, or a blocked-mic message.
→onTranscript gets the final text; wire your speech-to-text there.

Accessibility

✓Mic is a toggle button with aria-pressed and a changing label.
✓Transcript is aria-live=polite.
✓Waveform is decorative.
✓Honours prefers-reduced-motion.