Halloween only 🎃 Get Wensity Pro for 31% less with
Wensity

Voice Reactive Orb

A breathing voice orb that swells with speech and settles between turns, never jittery and always organic to look at.

agentic ai interfacesvoiceaurorawaveframer motiontabler icons react
Voice Reactive Orb component preview

Overview

Voice Reactive Orb is a React and Tailwind CSS voice assistant orb, like the ChatGPT and Gemini voice modes, in Next.js or any React app. Tap to talk and it reads the microphone through the Web Audio API, smoothing the level with a spring so the orb swells, ripples like mercury through an SVG filter, and gains color without jitter. The stream is released as soon as listening stops. Pass level from 0 to 1 to drive it from your own audio, such as a spoken reply, or use demo mode. Browsers only grant the microphone on HTTPS or localhost.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add voice-aurora-wave

Usage

Import VoiceAuroraWave from @/components/wensity/voice-aurora-wave and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { VoiceAuroraWave } from "@/components/wensity/voice-aurora-wave";


export function VoiceAuroraWaveDemo() {
  return (
    <VoiceAuroraWave
      size={240}
      onListeningChange={(listening) => {
        console.log(listening ? "Listening…" : "Stopped");
      }}
    />
  );
}

Props

PropTypeDefaultDescription
sizenumber240Outer size in pixels (square).
levelnumber-Controlled audio level from 0–1. When set, the component does not access the microphone.
defaultListeningbooleanfalseInitial listening state when uncontrolled.
demobooleanfalseDisable microphone permission requests (demo mode).
onListeningChange(listening: boolean) => void-Fired when the user toggles listening on or off.
labelstring-Optional caption text shown under the orb.

Related components

  • AI Prompt Input component preview

    AI Prompt Input

    An expanding prompt area with a glowing drop zone that breathes open to meet you as you type a thought or drag a file.

  • Animated Loading Skeleton component preview

    Animated Loading Skeleton

    An organic loading state instead of a spinner, with a slow aurora that breathes in the space where your content will land.

  • AI Model Selector component preview

    AI Model Selector

    An AI model selector dropdown that scales out from its trigger and glides the selection pill to whichever model you pick.

  • ChatGPT Orb component preview

    ChatGPT Orb

    Low-power WebGL fractal noise that blooms white ink inside a soft circular mask.

Featured in React AI chat UI components.