Voice Orb

A WebGL particle-sphere orb for voice assistant UIs that breathes at idle and reshapes/colors itself across listening, thinking and speaking states while reacting live to microphone or playback audio.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Voice Orb to your project and fits it to your theme.

"use client";

import VoiceOrb from "@/components/ui/voice-orb";

export default function VoiceOrbSpeakingDemo() {
  return (
    <div
      className="flex w-full items-center justify-center p-10"
      style={{ background: "#050507" }}
    >
      <div className="w-full max-w-xs">
        <VoiceOrb state="speaking" />
      </div>
    </div>
  );
}