Voice Orb

AI chats

About

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.

Code

How Voice Orb is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

export default function VoiceOrbDemo() {
  return (
    <div
      className="flex w-full flex-col items-center justify-center gap-6 px-6 py-16 text-center"
      style={{ background: "#050507" }}
    >
      <p
        className="text-[10px] font-medium uppercase tracking-[0.23em]"
        style={{ color: "#8d7fa5" }}
      >
        An interface for sound
      </p>
      <h1
        className="text-4xl font-medium leading-[1.04] tracking-[-0.055em] sm:text-5xl"
        style={{ color: "#eeeaf6" }}
      >
        Give it a voice.
      </h1>
      <p
        className="max-w-md text-sm leading-relaxed"
        style={{ color: "#96909f" }}
      >
        A thousand little reactions. One living surface.
      </p>
      <div className="mx-auto w-full max-w-sm">
        <VoiceOrb state="idle" />
      </div>
    </div>
  );
}