Components
Loading preview...
The VoicePoweredOrb is an interactive WebGL component that renders a mesmerizing, shader-based orb dynamically responding to voice input through the microphone. It features complex GLSL shaders with procedural noise, color shifting, and lighting effects that create fluid, organic animations where the orb's rotation speed and visual intensity modulate in real-time based on audio levels. This component could be used in voice-controlled applications, audio visualizations, interactive art installations, AI assistants, music players, or chat interfaces requiring sophisticated visual feedback for voice activity. Note: Might not work in sandbox due to browser restrictions but will work in your codebase.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/voice-powered-orb"use client";
import React, { useState } from "react";
import { VoicePoweredOrb } from "@/components/ui/voice-powered-orb";
import { Button } from "@/components/ui/button";
import { Mic, MicOff } from "lucide-react";
export default function VoicePoweredOrbPage() {
const [isRecording, setIsRecording] = useState(false);
const [voiceDetected, setVoiceDetected] = useState(false);
const toggleRecording = () => {
setIsRecording(!isRecording);
};
return (
<div className="min-h-screen d flex items-center justify-center p-8">
<div className="flex flex-col items-center space-y-8">
{/* Orb */}
<div className="w-96 h-96 relative">
<VoicePoweredOrb
enableVoiceControl={isRecording}
className="rounded-xl overflow-hidden shadow-2xl"
onVoiceDetected={setVoiceDetected}
/>
</div>
{/* Control Button */}
<Button
onClick={toggleRecording}
variant={isRecording ? "destructive" : "default"}
size="lg"
className="px-8 py-3"
>
{isRecording ? (
<>
<MicOff className="w-5 h-5 mr-3" />
Stop Recording
</>
) : (
<>
<Mic className="w-5 h-5 mr-3" />
Start Recording
</>
)}
</Button>
{/* Simple Instructions */}
<p className="text-muted-foreground text-center max-w-md">
Click the button to enable voice control. Speak to see the orb respond to your voice with subtle movements.
</p>
</div>
</div>
);
}