50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T2f3b,/** * @license * * Originally developed for Unicorn Studio * https://unicorn.studio * * Licensed under the Polyform Non-Resale License 1.0.0 * https://polyformproject.org/licenses/non-resale/1.0.0/ * * © 2026 UNCRN LLC */ 'use client'; import React, { useMemo, type ComponentProps } from 'react'; import { type VariantProps, cva } from 'class-variance-authority'; import { type LocalAudioTrack, type RemoteAudioTrack } from 'livekit-client'; import { type AgentState, type TrackReferenceOrPlaceholder } from '@livekit/components-react'; import { ReactShaderToy } from '@/components/agents-ui/react-shader-toy'; import { useAgentAudioVisualizerAura } from '@/hooks/agents-ui/use-agent-audio-visualizer-aura'; import { cn } from '@/lib/utils'; const DEFAULT_COLOR = '#1FD5F9'; function hexToRgb(hexColor: string) { try { const rgbColor = hexColor.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/); if (rgbColor) { const [, r, g, b] = rgbColor; const color = [r, g, b].map((c = '00') => parseInt(c, 16) / 255); return color; } } catch { console.error( `Invalid hex color '${hexColor}'.\nFalling back to default color '${DEFAULT_COLOR}'.`, ); } return hexToRgb(DEFAULT_COLOR); } const shaderSource = ` const float TAU = 6.283185; // Noise for dithering vec2 randFibo(vec2 p) { p = fract(p * vec2(443.897, 441.423)); p += dot(p, p.yx + 19.19); return fract((p.xx + p.yx) * p.xy); } // Tonemap vec3 Tonemap(vec3 x) { x *= 4.0; return x / (1.0 + x); } // Luma for alpha float luma(vec3 color) { return dot(color, vec3(0.299, 0.587, 0.114)); } // RGB to HSV vec3 rgb2hsv(vec3 c) { vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); float d = q.x - min(q.w, q.y); float e = 1.0e-10; return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); } // HSV to RGB vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } // SDF shapes float sdCircle(vec2 st, float r) { return length(st) - r; } float sdLine(vec2 p, float r) { float halfLen = r * 2.0; vec2 a = vec2(-halfLen, 0.0); vec2 b = vec2(halfLen, 0.0); vec2 pa = p - a; vec2 ba = b - a; float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); return length(pa - ba * h); } float getSdf(vec2 st) { if(uShape == 1.0) return sdCircle(st, uScale); else if(uShape == 2.0) return sdLine(st, uScale); return sdCircle(st, uScale); // Default } vec2 turb(vec2 pos, float t, float it) { // Initial rotation matrix for swirl direction mat2 rotation = mat2(0.6, -0.25, 0.25, 0.9); // Secondary rotation applied each iteration (approx 53 degree rotation) mat2 layerRotation = mat2(0.6, -0.8, 0.8, 0.6); float frequency = mix(2.0, 15.0, uFrequency); float amplitude = uAmplitude; float frequencyGrowth = 1.4; float animTime = t * 0.1 * uSpeed; const int LAYERS = 4; for(int i = 0; i < LAYERS; i++) { // Calculate wave displacement for this layer vec2 rotatedPos = pos * rotation; vec2 wave = sin(frequency * rotatedPos + float(i) * animTime + it); // Apply displacement along rotation direction pos += (amplitude / frequency) * rotation[0] * wave; // Evolve parameters for next layer rotation *= layerRotation; amplitude *= mix(1.0, max(wave.x, wave.y), uVariance); frequency *= frequencyGrowth; } return pos; } const float ITERATIONS = 36.0; void mainImage(out vec4 fragColor, in vec2 fragCoord) { vec2 uv = fragCoord / iResolution.xy; vec3 pp = vec3(0.0); vec3 bloom = vec3(0.0); float t = iTime * 0.5; vec2 pos = uv - 0.5; vec2 prevPos = turb(pos, t, 0.0 - 1.0 / ITERATIONS); float spacing = mix(1.0, TAU, uSpacing); for(float i = 1.0; i < ITERATIONS + 1.0; i++) { float iter = i / ITERATIONS; vec2 st = turb(pos, t, iter * spacing); float d = abs(getSdf(st)); float pd = distance(st, prevPos); prevPos = st; float dynamicBlur = exp2(pd * 2.0 * 1.4426950408889634) - 1.0; float ds = smoothstep(0.0, uBlur * 0.05 + max(dynamicBlur * uSmoothing, 0.001), d); // Shift color based on iteration using uColorScale vec3 color = uColor; if(uColorShift > 0.01) { vec3 hsv = rgb2hsv(color); // Shift hue by iteration hsv.x = fract(hsv.x + (1.0 - iter) * uColorShift * 0.3); color = hsv2rgb(hsv); } float invd = 1.0 / max(d + dynamicBlur, 0.001); pp += (ds - 1.0) * color; bloom += clamp(invd, 0.0, 250.0) * color; } pp *= 1.0 / ITERATIONS; vec3 color; // Dark mode (default) if(uMode < 0.5) { // use bloom effect bloom = bloom / (bloom + 2e4); color = (-pp + bloom * 3.0 * uBloom) * 1.2; color += (randFibo(fragCoord).x - 0.5) / 255.0; color = Tonemap(color); float alpha = luma(color) * uMix; fragColor = vec4(color * uMix, alpha); } // Light mode else { // no bloom effect color = -pp; color += (randFibo(fragCoord).x - 0.5) / 255.0; // Preserve hue by tone mapping brightness only float brightness = length(color); vec3 direction = brightness > 0.0 ? color / brightness : color; // Reinhard on brightness float factor = 2.0; float mappedBrightness = (brightness * factor) / (1.0 + brightness * factor); color = direction * mappedBrightness; // Boost saturation to compensate for white background bleed-through // When alpha < 1.0, white bleeds through making colors look desaturated // So we increase saturation to maintain vibrant appearance float gray = dot(color, vec3(0.2, 0.5, 0.1)); float saturationBoost = 3.0; color = mix(vec3(gray), color, saturationBoost); // Clamp between 0-1 color = clamp(color, 0.0, 1.0); float alpha = mappedBrightness * clamp(uMix, 1.0, 2.0); fragColor = vec4(color, alpha); } }`; interface AuraShaderProps { /** * Aurora wave speed * @default 1.0 */ speed?: number; /** * Turbulence amplitude * @default 0.5 */ amplitude?: number; /** * Wave frequency and complexity * @default 0.5 */ frequency?: number; /** * Shape scale * @default 0.3 */ scale?: number; /** * Shape type: 1=circle, 2=line * @default 1 */ shape?: number; /** * Edge blur/softness * @default 1.0 */ blur?: number; /** * Color of the aura in hexidecimal format. * @default '#1FD5F9' */ color?: `#${string}`; /** * Color variation across layers (0-1) * Controls how much colors change between iterations * @default 0.5 * @example 0.0 - minimal color variation (more uniform) * @example 0.5 - moderate variation (default) * @example 1.0 - maximum variation (rainbow effect) */ colorShift?: number; /** * Brightness of the aurora (0-1) * @default 1.0 */ brightness?: number; /** * Display mode for different backgrounds * - 'dark': Optimized for dark backgrounds (default) * - 'light': Optimized for light/white backgrounds (inverts colors) * @default 'dark' */ themeMode?: 'dark' | 'light'; } function AuraShader({ shape = 1.0, speed = 1.0, amplitude = 0.5, frequency = 0.5, scale = 0.2, blur = 1.0, color = DEFAULT_COLOR, colorShift = 1.0, brightness = 1.0, themeMode = typeof window !== 'undefined' && document.documentElement.classList.contains('dark') ? 'dark' : 'light', ref, className, ...props }: AuraShaderProps & ComponentProps<'div'>) { const rgbColor = useMemo(() => hexToRgb(color), [color]); return (

{ console.error('Shader error:', error); }} onWarning={(warning) => { console.warn('Shader warning:', warning); }} style={{ width: '100%', height: '100%' }} />

); } AuraShader.displayName = 'AuraShader'; export const AgentAudioVisualizerAuraVariants = cva(['aspect-square'], { variants: { size: { icon: 'h-[24px] gap-[2px]', sm: 'h-[56px] gap-[4px]', md: 'h-[112px] gap-[8px]', lg: 'h-[224px] gap-[16px]', xl: 'h-[448px] gap-[32px]', }, }, defaultVariants: { size: 'md', }, }); export interface AgentAudioVisualizerAuraProps { /** * The size of the visualizer. * @defaultValue 'lg' */ size?: 'icon' | 'sm' | 'md' | 'lg' | 'xl'; /** * Agent state * @default 'connecting' */ state?: AgentState; /** * The color of the aura in hexidecimal format. * @defaultValue '#1FD5F9' */ color?: `#${string}`; /** * The color shift of the aura. * @defaultValue 0.05 */ colorShift?: number; /** * The theme mode of the aura. * @defaultValue 'dark' */ themeMode?: 'dark' | 'light'; /** * The audio track to visualize. Can be a local/remote audio track or a track reference. */ audioTrack?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder; /** * Externally supplied scalar volume. When provided, this overrides audioTrack volume data. */ volume?: number; } /** * An shader-based audio visualizer that responds to agent state and audio levels. * Displays an animated elliptical aura that reacts to the current agent state (connecting, thinking, speaking, etc.) * and audio volume when speaking. * * @extends ComponentProps<'div'> * * @example * ```tsx * * ``` */ export function AgentAudioVisualizerAura({ size = 'lg', state = 'connecting', color = DEFAULT_COLOR, colorShift = 0.05, audioTrack, volume, themeMode, className, ref, ...props }: AgentAudioVisualizerAuraProps & ComponentProps<'div'> & VariantProps) { const { speed, scale, amplitude, frequency, brightness } = useAgentAudioVisualizerAura( state, audioTrack, volume, ); return ( ); } 54:Tfc6,import { useEffect, useRef, useState, useCallback } from 'react'; import { type LocalAudioTrack, type RemoteAudioTrack } from 'livekit-client'; import { type AnimationPlaybackControlsWithThen, type ValueAnimationTransition, animate, useMotionValue, useMotionValueEvent, } from 'motion/react'; import { type AgentState, type TrackReference, type TrackReferenceOrPlaceholder, useTrackVolume, } from '@livekit/components-react'; const DEFAULT_SPEED = 10; const DEFAULT_AMPLITUDE = 2; const DEFAULT_FREQUENCY = 0.5; const DEFAULT_SCALE = 0.2; const DEFAULT_BRIGHTNESS = 1.5; const DEFAULT_TRANSITION: ValueAnimationTransition = { duration: 0.5, ease: 'easeOut' }; const DEFAULT_PULSE_TRANSITION: ValueAnimationTransition = { duration: 0.35, ease: 'easeOut', repeat: Infinity, repeatType: 'mirror', }; function useAnimatedValue(initialValue: T) { const [value, setValue] = useState(initialValue); const motionValue = useMotionValue(initialValue); const controlsRef = useRef(null); useMotionValueEvent(motionValue, 'change', (value) => setValue(value as T)); const animateFn = useCallback( (targetValue: T | T[], transition: ValueAnimationTransition) => { controlsRef.current = animate(motionValue, targetValue, transition); }, [motionValue], ); return { value, motionValue, controls: controlsRef, animate: animateFn }; } export function useAgentAudioVisualizerAura( state: AgentState | undefined, audioTrack?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder, volume?: number, ) { const [speed, setSpeed] = useState(DEFAULT_SPEED); const { value: scale, animate: animateScale, motionValue: scaleMotionValue, } = useAnimatedValue(DEFAULT_SCALE); const { value: amplitude, animate: animateAmplitude } = useAnimatedValue(DEFAULT_AMPLITUDE); const { value: frequency, animate: animateFrequency } = useAnimatedValue(DEFAULT_FREQUENCY); const { value: brightness, animate: animateBrightness } = useAnimatedValue(DEFAULT_BRIGHTNESS); const trackVolume = useTrackVolume(audioTrack as TrackReference, { fftSize: 512, smoothingTimeConstant: 0.55, }); const resolvedVolume = volume ?? trackVolume; useEffect(() => { switch (state) { case 'idle': case 'failed': case 'disconnected': setSpeed(10); animateScale(0.2, DEFAULT_TRANSITION); animateAmplitude(1.2, DEFAULT_TRANSITION); animateFrequency(0.4, DEFAULT_TRANSITION); animateBrightness(1.0, DEFAULT_TRANSITION); return; case 'listening': case 'pre-connect-buffering': setSpeed(20); animateScale(0.3, { type: 'spring', duration: 1.0, bounce: 0.35 }); animateAmplitude(1.0, DEFAULT_TRANSITION); animateFrequency(0.7, DEFAULT_TRANSITION); animateBrightness([1.5, 2.0], DEFAULT_PULSE_TRANSITION); return; case 'thinking': case 'connecting': case 'initializing': setSpeed(30); animateScale(0.3, DEFAULT_TRANSITION); animateAmplitude(0.5, DEFAULT_TRANSITION); animateFrequency(1, DEFAULT_TRANSITION); animateBrightness([0.5, 2.5], DEFAULT_PULSE_TRANSITION); return; case 'speaking': setSpeed(70); animateScale(0.3, DEFAULT_TRANSITION); animateAmplitude(0.75, DEFAULT_TRANSITION); animateFrequency(1.25, DEFAULT_TRANSITION); animateBrightness(1.5, DEFAULT_TRANSITION); return; } }, [state, animateScale, animateAmplitude, animateFrequency, animateBrightness]); useEffect(() => { if (state === 'speaking' && resolvedVolume > 0 && !scaleMotionValue.isAnimating()) { animateScale(0.2 + 0.2 * resolvedVolume, { duration: 0 }); } }, [ state, resolvedVolume, scaleMotionValue, animateScale, animateAmplitude, animateFrequency, animateBrightness, ]); return { speed, scale, amplitude, frequency, brightness, }; } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","livekit-client@^2.0.0",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/livekit-client","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"livekit-client@^2.0.0"}]]}]}],["$","li","@livekit/components-react@^2.0.0",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40livekit%2Fcomponents-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@livekit/components-react@^2.0.0"}]]}]}],["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["utils","@agents-ui/react-shader-toy"]}]]}],["$","$L51",null,{"sourceUrl":"https://livekit.com/ui/r/agent-audio-visualizer-aura.json","proxyUrl":"https://shadcnregistry.com/r/agents-ui/agent-audio-visualizer-aura","itemId":"@agents-ui/agent-audio-visualizer-aura"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"components/agents-ui/agent-audio-visualizer-aura.tsx","content":"$53","type":"registry:component"},{"path":"hooks/agents-ui/use-agent-audio-visualizer-aura.ts","content":"$54","type":"registry:hook"}]}]]}],"$L55"]}]

Agent Audio Visualizer Aura

Installation

Files

components

hooks

Styles