"use client" import * as React from "react" import { useAnimationFrame, useMotionValue, useReducedMotion, } from "motion/react" import { Mic, MicOff, Pause, Play } from "lucide-react" import { toast } from "sonner" import { ORB_PALETTES, VoiceOrb } from "@/components/agents/voice-orb" import { ShimmerText } from "@/components/motion/shimmer-text" import { Button } from "@/components/ui/button" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" type Palette = keyof typeof ORB_PALETTES export default function VoiceOrbDemo() { const activity = useMotionValue(0) const reduce = useReducedMotion() const [palette, setPalette] = React.useState("brand") const [active, setActive] = React.useState(true) const [analyser, setAnalyser] = React.useState(null) const audio = React.useRef<{ ctx: AudioContext; stream: MediaStream } | null>( null ) // Simulated syllables and pauses while the microphone is off. useAnimationFrame((time) => { if (analyser) return if (reduce) return activity.set(0) 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)) }) const stopMic = React.useCallback(() => { audio.current?.stream.getTracks().forEach((track) => track.stop()) void audio.current?.ctx.close() audio.current = null setAnalyser(null) }, []) React.useEffect(() => stopMic, [stopMic]) async function toggleMic() { if (analyser) return stopMic() try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) const ctx = new AudioContext() const node = ctx.createAnalyser() node.fftSize = 1024 ctx.createMediaStreamSource(stream).connect(node) audio.current = { ctx, stream } setAnalyser(node) } catch { toast.error("Microphone unavailable", { description: "Allow microphone access to drive the orb with your voice.", }) } } return (

{!active ? "Paused" : analyser ? "Listening…" : "Speaking…"}

setPalette(v as Palette)}> {Object.keys(ORB_PALETTES).map((name) => ( {name} ))}

) }

Voice OrbNew

Installation

Dependencies

Source