Voice Orb

AI chats 1

About

A WebGL orb of light rings that listens: it breathes at rest and reacts to your voice, in light and dark themes.

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

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

const settings = {
  ringColor1: "#7f72e3",
  ringColor2: "#b3abf0",
  glowColor: "#7f72e3",
  sparkColor: "#e5e2fa",
  sensitivity: 1,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="flex w-full items-center justify-center p-6">
      <div className="w-full max-w-md rounded-3xl border border-border bg-card px-6 pb-8 pt-4 text-card-foreground">
        <VoiceOrb
          ringColors={[s.ringColor1, s.ringColor2]}
          glowColor={s.glowColor}
          sparkColor={s.sparkColor}
          sensitivity={s.sensitivity}
        />
      </div>
    </div>
  );
}