Voice Orb

Shaders 29

About

A WebGL shader-driven liquid sphere that breathes and ripples in response to voice activity, for AI voice assistant and realtime call UIs.

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";
import {
  useAnimationFrame,
  useMotionValue,
  useReducedMotion,
} from "motion/react";

export function VoiceOrbPreview() {
  const activity = useMotionValue(0);
  const reducedMotion = useReducedMotion();
  useAnimationFrame((time) => {
    if (reducedMotion) {
      activity.set(0);
      return;
    }
    // Simulated syllables and pauses demonstrate activity without opening audio.
    const t = time / 1000;
    const phrase = Math.max(0, Math.sin(t * 0.85));
    const syllable = Math.max(0, Math.sin(t * 9.3 + Math.sin(t * 2.1)));
    activity.set(phrase * (0.12 + syllable ** 2 * 0.72));
  });
  return (
    <div className="flex w-full h-screen items-center justify-center">
      <VoiceOrb
        activity={activity}
        aria-label="Voice visualization"
        className="w-64 sm:w-72"
      />
    </div>
  );
}

export default VoiceOrbPreview;