Voice Aurora Wave

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

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

 1"use client";
 2import { VoiceAuroraWave } from "@/components/wensity/voice-aurora-wave";
 3
 4export function VoiceAuroraWaveDemo() {
 5  return (
 6    <VoiceAuroraWave
 7      size={240}
 8      onListeningChange={(listening) => {
 9        console.log(listening ? "Listening…" : "Stopped");
10      }}
11    />
12  );
13}

Props

Prop	Type	Default	Description
`size`	number	240	Outer size in pixels (square).
`level`	number	-	Controlled audio level from 0–1. When set, the component does not access the microphone.
`defaultListening`	boolean	false	Initial listening state when uncontrolled.
`demo`	boolean	false	Disable microphone permission requests (demo mode).
`onListeningChange`	(listening: boolean) => void	-	Fired when the user toggles listening on or off.
`label`	string	-	Optional caption text shown under the orb.