diff --git a/app-config.ts b/app-config.ts
index 80fb6a902..cfb5ef9cb 100644
--- a/app-config.ts
+++ b/app-config.ts
@@ -14,6 +14,14 @@ export interface AppConfig {
   logoDark?: string;
   accentDark?: string;
 
+  audioVisualizerType?: 'bar' | 'wave' | 'grid' | 'radial' | 'aura';
+  audioVisualizerRadius?: number;
+  audioVisualizerBarCount?: number;
+  audioVisualizerRowCount?: number;
+  audioVisualizerColumnCount?: number;
+  audioVisualizerColor?: `#${string}`;
+  audioVisualizerColorShift?: number;
+
   // agent dispatch configuration
   agentName?: string;
 
@@ -37,6 +45,13 @@ export const APP_CONFIG_DEFAULTS: AppConfig = {
   accentDark: '#1fd5f9',
   startButtonText: 'Start call',
 
+  audioVisualizerType: 'wave',
+  audioVisualizerBarCount: 25,
+  audioVisualizerRowCount: 11,
+  audioVisualizerColumnCount: 11,
+  audioVisualizerColor: '#1fd5f9',
+  audioVisualizerColorShift: 0.3,
+
   // agent dispatch configuration
   agentName: process.env.AGENT_NAME ?? undefined,
 
diff --git a/components/agents-ui/agent-audio-visualizer-aura.tsx b/components/agents-ui/agent-audio-visualizer-aura.tsx
new file mode 100644
index 000000000..28f5474dc
--- /dev/null
+++ b/components/agents-ui/agent-audio-visualizer-aura.tsx
@@ -0,0 +1,438 @@
+'use client';
+
+import React, { type ComponentProps, useMemo } 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/shadcn/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 (error) {
+    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
+   * @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 (
+    <div ref={ref} className={className} {...props}>
+      <ReactShaderToy
+        fs={shaderSource}
+        devicePixelRatio={globalThis.devicePixelRatio ?? 1}
+        uniforms={{
+          // Aurora wave speed
+          uSpeed: { type: '1f', value: speed },
+          // Edge blur/softness
+          uBlur: { type: '1f', value: blur },
+          // Shape scale
+          uScale: { type: '1f', value: scale },
+          // Shape type: 1=circle, 2=line
+          uShape: { type: '1f', value: shape },
+          // Wave frequency and complexity
+          uFrequency: { type: '1f', value: frequency },
+          // Turbulence amplitude
+          uAmplitude: { type: '1f', value: amplitude },
+          // Light intensity (bloom)
+          uBloom: { type: '1f', value: 0.0 },
+          // Brightness of the aurora (0-1)
+          uMix: { type: '1f', value: brightness },
+          // Color variation across layers (0-1)
+          uSpacing: { type: '1f', value: 0.5 },
+          // Color palette offset - shifts colors along the gradient (0-1)
+          uColorShift: { type: '1f', value: colorShift },
+          // Color variation across layers (0-1)
+          uVariance: { type: '1f', value: 0.1 },
+          // Smoothing of the aurora (0-1)
+          uSmoothing: { type: '1f', value: 1.0 },
+          // Display mode: 0=dark background, 1=light background
+          uMode: { type: '1f', value: themeMode === 'light' ? 1.0 : 0.0 },
+          // Color
+          uColor: { type: '3fv', value: rgbColor ?? [0, 0.7, 1] },
+        }}
+        onError={(error) => {
+          console.error('Shader error:', error);
+        }}
+        onWarning={(warning) => {
+          console.warn('Shader warning:', warning);
+        }}
+        style={{ width: '100%', height: '100%' }}
+      />
+    </div>
+  );
+}
+
+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 hex 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;
+}
+
+/**
+ * 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
+ * <AgentAudioVisualizerAura
+ *   size="md"
+ *   state="speaking"
+ *   audioTrack={agentAudioTrack}
+ * />
+ * ```
+ */
+export function AgentAudioVisualizerAura({
+  size = 'lg',
+  state = 'connecting',
+  color = DEFAULT_COLOR,
+  colorShift = 0.05,
+  audioTrack,
+  themeMode,
+  className,
+  ref,
+  ...props
+}: AgentAudioVisualizerAuraProps &
+  ComponentProps<'div'> &
+  VariantProps<typeof AgentAudioVisualizerAuraVariants>) {
+  const { speed, scale, amplitude, frequency, brightness } = useAgentAudioVisualizerAura(
+    state,
+    audioTrack
+  );
+
+  return (
+    <AuraShader
+      ref={ref}
+      blur={0.2}
+      color={color}
+      colorShift={colorShift}
+      speed={speed}
+      scale={scale}
+      themeMode={themeMode}
+      amplitude={amplitude}
+      frequency={frequency}
+      brightness={brightness}
+      className={cn(
+        AgentAudioVisualizerAuraVariants({ size }),
+        'overflow-hidden rounded-full',
+        className
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/components/agents-ui/agent-audio-visualizer-grid.tsx b/components/agents-ui/agent-audio-visualizer-grid.tsx
index 182aaf669..0ed09b4e1 100644
--- a/components/agents-ui/agent-audio-visualizer-grid.tsx
+++ b/components/agents-ui/agent-audio-visualizer-grid.tsx
@@ -51,16 +51,16 @@ export const AgentAudioVisualizerGridVariants = cva(
   [
     'grid',
     '*:size-1 *:rounded-full',
-    '*:bg-foreground/10 [&_>_[data-lk-highlighted=true]]:bg-foreground [&_>_[data-lk-highlighted=true]]:scale-125 [&_>_[data-lk-highlighted=true]]:shadow-[0px_0px_10px_2px_rgba(255,255,255,0.4)]',
+    '*:bg-foreground/10 *:data-[lk-highlighted=true]:bg-foreground *:data-[lk-highlighted=true]:scale-125 *:data-[lk-highlighted=true]:shadow-[0px_0px_10px_2px_rgba(255,255,255,0.4)]',
   ],
   {
     variants: {
       size: {
-        icon: ['gap-[2px] *:size-[4px]'],
+        icon: ['gap-[2px] *:size-[2px]'],
         sm: ['gap-[4px] *:size-[4px]'],
         md: ['gap-[8px] *:size-[8px]'],
-        lg: ['gap-[8px] *:size-[8px]'],
-        xl: ['gap-[8px] *:size-[8px]'],
+        lg: ['gap-[12px] *:size-[12px]'],
+        xl: ['gap-[16px] *:size-[16px]'],
       },
     },
     defaultVariants: {
diff --git a/components/agents-ui/agent-audio-visualizer-radial.tsx b/components/agents-ui/agent-audio-visualizer-radial.tsx
index 211e276d3..7da6c118f 100644
--- a/components/agents-ui/agent-audio-visualizer-radial.tsx
+++ b/components/agents-ui/agent-audio-visualizer-radial.tsx
@@ -14,12 +14,13 @@ import { cn } from '@/lib/shadcn/utils';
 export const AgentAudioVisualizerRadialVariants = cva(
   [
     'relative flex items-center justify-center',
-    '[&_[data-lk-index]]:absolute [&_[data-lk-index]]:top-1/2 [&_[data-lk-index]]:left-1/2 [&_[data-lk-index]]:origin-bottom [&_[data-lk-index]]:-translate-x-1/2',
-    '[&_[data-lk-index]]:rounded-full [&_[data-lk-index]]:transition-colors [&_[data-lk-index]]:duration-150 [&_[data-lk-index]]:ease-linear [&_[data-lk-index]]:bg-transparent [&_[data-lk-index]]:data-[lk-highlighted=true]:bg-current',
-    'has-data-[lk-state=connecting]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=connecting]:[&_[data-lk-index]]:bg-current/10',
-    'has-data-[lk-state=initializing]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=initializing]:[&_[data-lk-index]]:bg-current/10',
-    'has-data-[lk-state=listening]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=listening]:[&_[data-lk-index]]:bg-current/10 has-data-[lk-state=listening]:[&_[data-lk-index]]:duration-300',
-    'has-data-[lk-state=thinking]:animate-spin has-data-[lk-state=thinking]:[animation-duration:5s] has-data-[lk-state=thinking]:[&_[data-lk-index]]:bg-current',
+    '**:data-lk-index:bg-current/10',
+    '**:data-lk-index:absolute **:data-lk-index:top-1/2 **:data-lk-index:left-1/2 **:data-lk-index:origin-bottom **:data-lk-index:-translate-x-1/2',
+    '**:data-lk-index:rounded-full **:data-lk-index:transition-colors **:data-lk-index:duration-150 **:data-lk-index:ease-linear **:data-lk-index:data-[lk-highlighted=true]:bg-current',
+    'has-data-[lk-state=connecting]:**:data-lk-index:duration-300',
+    'has-data-[lk-state=initializing]:**:data-lk-index:duration-300',
+    'has-data-[lk-state=listening]:**:data-lk-index:duration-300 has-data-[lk-state=listening]:**:data-lk-index:duration-300',
+    'has-data-[lk-state=thinking]:animate-spin has-data-[lk-state=thinking]:[animation-duration:5s] has-data-[lk-state=thinking]:**:data-lk-index:bg-current',
   ],
   {
     variants: {
diff --git a/components/agents-ui/agent-audio-visualizer-wave.tsx b/components/agents-ui/agent-audio-visualizer-wave.tsx
new file mode 100644
index 000000000..4b89088e0
--- /dev/null
+++ b/components/agents-ui/agent-audio-visualizer-wave.tsx
@@ -0,0 +1,328 @@
+'use client';
+
+import { type ComponentProps, useMemo } from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { LocalAudioTrack, RemoteAudioTrack } from 'livekit-client';
+import { type AgentState, type TrackReferenceOrPlaceholder } from '@livekit/components-react';
+import { ReactShaderToy } from '@/components/agents-ui/react-shader-toy';
+import { useAgentAudioVisualizerWave } from '@/hooks/agents-ui/use-agent-audio-visualizer-wave';
+import { cn } from '@/lib/shadcn/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 (error) {
+    console.error(
+      `Invalid hex color '${hexColor}'.\nFalling back to default color '${DEFAULT_COLOR}'.`
+    );
+  }
+
+  return hexToRgb(DEFAULT_COLOR);
+}
+
+const shaderSource = `
+const float TAU = 6.28318530718;
+
+// 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);
+}
+
+// Luma for alpha
+float luma(vec3 color) {
+  return dot(color, vec3(0.299, 0.587, 0.114));
+}
+
+// Bell curve function for attenuation from center with rounded top
+float bellCurve(float distanceFromCenter, float maxDistance) {
+  float normalizedDistance = distanceFromCenter / maxDistance;
+  // Use cosine with high power for smooth rounded top
+  return pow(cos(normalizedDistance * (3.14159265359 / 4.0)), 16.0);
+}
+
+// Calculate the sine wave
+float oscilloscopeWave(float x, float centerX, float time) {
+  float relativeX = x - centerX;
+  float maxDistance = centerX;
+  float distanceFromCenter = abs(relativeX);
+  
+  // Apply bell curve for amplitude attenuation
+  float bell = bellCurve(distanceFromCenter, maxDistance);
+  
+  // Calculate wave with uniforms and bell curve attenuation
+  float wave = sin(relativeX * uFrequency + time * uSpeed) * uAmplitude * bell;
+  
+  return wave;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 pos = uv - 0.5;
+  
+  // Calculate center and positions
+  float centerX = 0.5;
+  float centerY = 0.5;
+  float x = uv.x;
+  float y = uv.y;
+  
+  // Convert line width from pixels to UV space
+  // Use the average of width and height to handle aspect ratio
+  float pixelSize = 2.0 / (iResolution.x + iResolution.y);
+  float lineWidthUV = uLineWidth * pixelSize;
+  float smoothingUV = uSmoothing * pixelSize;
+  
+  // Find minimum distance to the wave by sampling nearby points
+  // This gives us consistent line width without high-frequency artifacts
+  const int NUM_SAMPLES = 50; // Must be const for GLSL loop
+  float minDist = 1000.0;
+  float sampleRange = 0.02; // Range to search for closest point
+  
+  for(int i = 0; i < NUM_SAMPLES; i++) {
+    float offset = (float(i) / float(NUM_SAMPLES - 1) - 0.5) * sampleRange;
+    float sampleX = x + offset;
+    float waveY = centerY + oscilloscopeWave(sampleX, centerX, iTime);
+    
+    // Calculate distance from current pixel to this point on the wave
+    vec2 wavePoint = vec2(sampleX, waveY);
+    vec2 currentPoint = vec2(x, y);
+    float dist = distance(currentPoint, wavePoint);
+    
+    minDist = min(minDist, dist);
+  }
+  
+  // Solid line with smooth edges using minimum distance
+  float line = smoothstep(lineWidthUV + smoothingUV, lineWidthUV - smoothingUV, minDist);
+  
+  // Calculate color position based on x position for gradient effect
+  float colorPos = x;
+  vec3 color = uColor;
+  
+  // Apply line intensity
+  color *= line;
+  
+  // Add dithering for smoother gradients
+  // color += (randFibo(fragCoord).x - 0.5) / 255.0;
+  
+  // Calculate alpha based on line intensity
+  float alpha = line * uMix;
+  
+  fragColor = vec4(color * uMix, alpha);
+}`;
+
+interface WaveShaderProps {
+  /**
+   * Class name
+   * @default ''
+   */
+  className?: string;
+  /**
+   * Speed of the oscilloscope
+   * @default 10
+   */
+  speed?: number;
+  /**
+   * Amplitude of the oscilloscope
+   * @default 0.02
+   */
+  amplitude?: number;
+  /**
+   * Frequency of the oscilloscope
+   * @default 20.0
+   */
+  frequency?: number;
+  /**
+   * Color of the oscilloscope
+   * @default '#1FD5F9'
+   */
+  color?: string;
+  /**
+   * Mix of the oscilloscope
+   * @default 1.0
+   */
+  mix?: number;
+  /**
+   * Line width of the oscilloscope in pixels
+   * @default 2.0
+   */
+  lineWidth?: number;
+  /**
+   * Blur of the oscilloscope in pixels
+   * @default 0.5
+   */
+  blur?: number;
+}
+
+function WaveShader({
+  speed = 10,
+  color = '#1FD5F9',
+  mix = 1.0,
+  amplitude = 0.02,
+  frequency = 20.0,
+  lineWidth = 2.0,
+  blur = 0.5,
+  ref,
+  className,
+  ...props
+}: WaveShaderProps & ComponentProps<'div'>) {
+  const rgbColor = useMemo(() => hexToRgb(color), [color]);
+
+  return (
+    <div ref={ref} className={className} {...props}>
+      <ReactShaderToy
+        fs={shaderSource}
+        devicePixelRatio={globalThis.devicePixelRatio ?? 1}
+        uniforms={{
+          uSpeed: { type: '1f', value: speed },
+          uAmplitude: { type: '1f', value: amplitude },
+          uFrequency: { type: '1f', value: frequency },
+          uMix: { type: '1f', value: mix },
+          uLineWidth: { type: '1f', value: lineWidth },
+          uSmoothing: { type: '1f', value: blur },
+          uColor: { type: '3fv', value: rgbColor },
+        }}
+        onError={(error) => {
+          console.error('Shader error:', error);
+        }}
+        onWarning={(warning) => {
+          console.warn('Shader warning:', warning);
+        }}
+        style={{ width: '100%', height: '100%' }}
+      />
+    </div>
+  );
+}
+
+WaveShader.displayName = 'WaveShader';
+
+export const AgentAudioVisualizerWaveVariants = cva(['aspect-square'], {
+  variants: {
+    size: {
+      icon: 'h-[24px]',
+      sm: 'h-[56px]',
+      md: 'h-[112px]',
+      lg: 'h-[224px]',
+      xl: 'h-[448px]',
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+});
+
+export interface AgentAudioVisualizerWaveProps {
+  /**
+   * The size of the visualizer.
+   * @defaultValue 'lg'
+   */
+  size?: 'icon' | 'sm' | 'md' | 'lg' | 'xl';
+  /**
+   * The agent state.
+   * @defaultValue 'speaking'
+   */
+  state?: AgentState;
+  /**
+   * The color of the wave in hex format.
+   * @defaultValue '#1FD5F9'
+   */
+  color?: string;
+  /**
+   * The line width of the wave in pixels.
+   * @defaultValue 2.0
+   */
+  lineWidth?: number;
+  /**
+   * The blur of the wave in pixels.
+   * @defaultValue 0.5
+   */
+  blur?: number;
+  /**
+   * The audio track to visualize. Can be a local/remote audio track or a track reference.
+   */
+  audioTrack?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder;
+  /**
+   * Additional CSS class names to apply to the container.
+   */
+  className?: string;
+}
+
+/**
+ * A wave-style audio visualizer that responds to agent state and audio levels.
+ * Displays an animated wave that reacts to the current agent state (connecting, thinking, speaking, etc.)
+ * and audio volume when speaking.
+ *
+ * @extends ComponentProps<'div'>
+ *
+ * @example ```tsx
+ * <AgentAudioVisualizerWave
+ *   size="lg"
+ *   state="speaking"
+ *   color="#1FD5F9"
+ *   lineWidth={2}
+ *   blur={0.5}
+ *   audioTrack={audioTrack}
+ * />
+ * ```
+ */
+export function AgentAudioVisualizerWave({
+  size = 'lg',
+  state = 'speaking',
+  color,
+  lineWidth,
+  blur,
+  audioTrack,
+  className,
+  style,
+  ref,
+  ...props
+}: AgentAudioVisualizerWaveProps &
+  ComponentProps<'div'> &
+  VariantProps<typeof AgentAudioVisualizerWaveVariants>) {
+  const _lineWidth = useMemo(() => {
+    if (lineWidth !== undefined) {
+      return lineWidth;
+    }
+    switch (size) {
+      case 'icon':
+      case 'sm':
+        return 2;
+      default:
+        return 1;
+    }
+  }, [lineWidth, size]);
+
+  const { speed, amplitude, frequency, opacity } = useAgentAudioVisualizerWave({
+    state,
+    audioTrack,
+  });
+
+  return (
+    <WaveShader
+      ref={ref}
+      speed={speed}
+      color={color}
+      amplitude={amplitude}
+      frequency={frequency}
+      lineWidth={_lineWidth}
+      blur={blur}
+      style={{ opacity, ...style }}
+      className={cn(
+        AgentAudioVisualizerWaveVariants({ size }),
+        'mask-[linear-gradient(90deg,transparent_0%,black_20%,black_80%,transparent_100%)]',
+        'overflow-hidden rounded-full',
+        className
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/components/agents-ui/agent-control-bar.tsx b/components/agents-ui/agent-control-bar.tsx
index 85dd2bde4..fc1702127 100644
--- a/components/agents-ui/agent-control-bar.tsx
+++ b/components/agents-ui/agent-control-bar.tsx
@@ -3,7 +3,7 @@
 import { type ComponentProps, useEffect, useRef, useState } from 'react';
 import { Track } from 'livekit-client';
 import { Loader, MessageSquareTextIcon, SendHorizontal } from 'lucide-react';
-import { motion } from 'motion/react';
+import { type MotionProps, motion } from 'motion/react';
 import { useChat } from '@livekit/components-react';
 import { AgentDisconnectButton } from '@/components/agents-ui/agent-disconnect-button';
 import { AgentTrackControl } from '@/components/agents-ui/agent-track-control';
@@ -20,17 +20,17 @@ import {
 } from '@/hooks/agents-ui/use-agent-control-bar';
 import { cn } from '@/lib/shadcn/utils';
 
-const TOGGLE_VARIANT_1 = [
-  '[&_[data-state=off]]:bg-accent [&_[data-state=off]]:hover:bg-foreground/10',
-  '[&_[data-state=off]_~_button]:bg-accent [&_[data-state=off]_~_button]:hover:bg-foreground/10',
-  '[&_[data-state=off]]:border-border [&_[data-state=off]]:hover:border-foreground/12',
-  '[&_[data-state=off]_~_button]:border-border [&_[data-state=off]_~_button]:hover:border-foreground/12',
-  '[&_[data-state=off]]:text-destructive [&_[data-state=off]]:hover:text-destructive [&_[data-state=off]]:focus:text-destructive',
-  '[&_[data-state=off]]:focus-visible:ring-foreground/12 [&_[data-state=off]]:focus-visible:border-ring',
-  'dark:[&_[data-state=off]_~_button]:bg-accent dark:[&_[data-state=off]_~_button:hover]:bg-foreground/10',
+const LK_TOGGLE_VARIANT_1 = [
+  'data-[state=off]:bg-accent data-[state=off]:hover:bg-foreground/10',
+  'data-[state=off]:[&_~_button]:bg-accent data-[state=off]:[&_~_button]:hover:bg-foreground/10',
+  'data-[state=off]:border-border data-[state=off]:hover:border-foreground/12',
+  'data-[state=off]:[&_~_button]:border-border data-[state=off]:[&_~_button]:hover:border-foreground/12',
+  'data-[state=off]:text-destructive data-[state=off]:hover:text-destructive data-[state=off]:focus:text-destructive',
+  'data-[state=off]:focus-visible:ring-foreground/12 data-[state=off]:focus-visible:border-ring',
+  'dark:data-[state=off]:[&_~_button]:bg-accent dark:data-[state=off]:[&_~_button]:hover:bg-foreground/10',
 ];
 
-const TOGGLE_VARIANT_2 = [
+const LK_TOGGLE_VARIANT_2 = [
   'data-[state=off]:bg-accent data-[state=off]:hover:bg-foreground/10',
   'data-[state=off]:border-border data-[state=off]:hover:border-foreground/12',
   'data-[state=off]:focus-visible:border-ring data-[state=off]:focus-visible:ring-foreground/12',
@@ -41,7 +41,7 @@ const TOGGLE_VARIANT_2 = [
   'dark:data-[state=on]:bg-blue-500/20 dark:data-[state=on]:text-blue-300',
 ];
 
-const MOTION_PROPS = {
+const MOTION_PROPS: MotionProps = {
   variants: {
     hidden: {
       height: 0,
@@ -71,13 +71,16 @@ function AgentChatInput({ chatOpen, onSend = async () => {}, className }: AgentC
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [isSending, setIsSending] = useState(false);
   const [message, setMessage] = useState<string>('');
+  const isDisabled = isSending || message.trim().length === 0;
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const handleSend = async () => {
+    if (isDisabled) {
+      return;
+    }
 
     try {
       setIsSending(true);
-      await onSend(message);
+      await onSend(message.trim());
       setMessage('');
     } catch (error) {
       console.error(error);
@@ -86,7 +89,17 @@ function AgentChatInput({ chatOpen, onSend = async () => {}, className }: AgentC
     }
   };
 
-  const isDisabled = isSending || message.trim().length === 0;
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleButtonClick = async () => {
+    if (isDisabled) return;
+    await handleSend();
+  };
 
   useEffect(() => {
     if (chatOpen) return;
@@ -95,59 +108,61 @@ function AgentChatInput({ chatOpen, onSend = async () => {}, className }: AgentC
   }, [chatOpen]);
 
   return (
-    <form
-      onSubmit={handleSubmit}
-      className={cn('mb-3 flex grow items-end gap-2 rounded-md pl-1 text-sm', className)}
-    >
+    <div className={cn('mb-3 flex grow items-end gap-2 rounded-md pl-1 text-sm', className)}>
       <textarea
         autoFocus
         ref={inputRef}
         value={message}
-        disabled={!chatOpen}
+        disabled={!chatOpen || isSending}
         placeholder="Type something..."
+        onKeyDown={handleKeyDown}
         onChange={(e) => setMessage(e.target.value)}
-        className="field-sizing-content max-h-16 min-h-8 flex-1 py-2 [scrollbar-width:thin] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        className="field-sizing-content max-h-16 min-h-8 flex-1 resize-none py-2 [scrollbar-width:thin] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
       />
       <Button
         size="icon"
-        type="submit"
+        type="button"
         disabled={isDisabled}
         variant={isDisabled ? 'secondary' : 'default'}
         title={isSending ? 'Sending...' : 'Send'}
+        onClick={handleButtonClick}
         className="self-end disabled:cursor-not-allowed"
       >
         {isSending ? <Loader className="animate-spin" /> : <SendHorizontal />}
       </Button>
-    </form>
+    </div>
   );
 }
 
-/**
- * Configuration for which controls to display in the AgentControlBar.
- */
+/** Configuration for which controls to display in the AgentControlBar. */
 export interface AgentControlBarControls {
   /**
    * Whether to show the leave/disconnect button.
+   *
    * @defaultValue true
    */
   leave?: boolean;
   /**
    * Whether to show the camera toggle control.
+   *
    * @defaultValue true (if camera publish permission is granted)
    */
   camera?: boolean;
   /**
    * Whether to show the microphone toggle control.
+   *
    * @defaultValue true (if microphone publish permission is granted)
    */
   microphone?: boolean;
   /**
    * Whether to show the screen share toggle control.
+   *
    * @defaultValue true (if screen share publish permission is granted)
    */
   screenShare?: boolean;
   /**
    * Whether to show the chat toggle control.
+   *
    * @defaultValue true (if data publish permission is granted)
    */
   chat?: boolean;
@@ -156,12 +171,13 @@ export interface AgentControlBarControls {
 export interface AgentControlBarProps extends UseInputControlsProps {
   /**
    * The visual style of the control bar.
+   *
    * @default 'default'
    */
   variant?: 'default' | 'outline' | 'livekit';
   /**
-   * This takes an object with the following keys: `leave`, `microphone`, `screenShare`, `camera`, `chat`.
-   * Each key maps to a boolean value that determines whether the control is displayed.
+   * This takes an object with the following keys: `leave`, `microphone`, `screenShare`, `camera`,
+   * `chat`. Each key maps to a boolean value that determines whether the control is displayed.
    *
    * @default
    * {
@@ -175,41 +191,37 @@ export interface AgentControlBarProps extends UseInputControlsProps {
   controls?: AgentControlBarControls;
   /**
    * Whether to save user choices.
+   *
    * @default true
    */
   saveUserChoices?: boolean;
   /**
    * Whether the agent is connected to a session.
+   *
    * @default false
    */
   isConnected?: boolean;
   /**
    * Whether the chat input interface is open.
+   *
    * @default false
    */
   isChatOpen?: boolean;
-  /**
-   * The callback for when the user disconnects.
-   */
+  /** The callback for when the user disconnects. */
   onDisconnect?: () => void;
-  /**
-   * The callback for when the chat is opened or closed.
-   */
+  /** The callback for when the chat is opened or closed. */
   onIsChatOpenChange?: (open: boolean) => void;
-  /**
-   * The callback for when a device error occurs.
-   */
+  /** The callback for when a device error occurs. */
   onDeviceError?: (error: { source: Track.Source; error: Error }) => void;
 }
 
 /**
- * A control bar specifically designed for voice assistant interfaces.
- * Provides controls for microphone, camera, screen share, chat, and disconnect.
- * Includes an expandable chat input for text-based interaction with the agent.
- *
- * @extends ComponentProps<'div'>
+ * A control bar specifically designed for voice assistant interfaces. Provides controls for
+ * microphone, camera, screen share, chat, and disconnect. Includes an expandable chat input for
+ * text-based interaction with the agent.
  *
  * @example
+ *
  * ```tsx
  * <AgentControlBar
  *   variant="livekit"
@@ -222,8 +234,10 @@ export interface AgentControlBarProps extends UseInputControlsProps {
  *     chat: true,
  *     leave: true,
  *   }}
- * />
+ * />;
  * ```
+ *
+ * @extends ComponentProps<'div'>
  */
 export function AgentControlBar({
   variant = 'default',
@@ -241,7 +255,7 @@ export function AgentControlBar({
   const publishPermissions = usePublishPermissions();
   const [isChatOpenUncontrolled, setIsChatOpenUncontrolled] = useState(isChatOpen);
   const {
-    micTrackRef,
+    microphoneTrack,
     cameraToggle,
     microphoneToggle,
     screenShareToggle,
@@ -304,13 +318,13 @@ export function AgentControlBar({
               source={Track.Source.Microphone}
               pressed={microphoneToggle.enabled}
               disabled={microphoneToggle.pending}
-              audioTrack={micTrackRef}
+              audioTrack={microphoneTrack}
               onPressedChange={microphoneToggle.toggle}
               onActiveDeviceChange={handleAudioDeviceChange}
               onMediaDeviceError={handleMicrophoneDeviceSelectError}
               className={cn(
                 variant === 'livekit' && [
-                  TOGGLE_VARIANT_1,
+                  LK_TOGGLE_VARIANT_1,
                   'rounded-full [&_button:first-child]:rounded-l-full [&_button:last-child]:rounded-r-full',
                 ]
               )}
@@ -332,7 +346,7 @@ export function AgentControlBar({
               onActiveDeviceChange={handleVideoDeviceChange}
               className={cn(
                 variant === 'livekit' && [
-                  TOGGLE_VARIANT_1,
+                  LK_TOGGLE_VARIANT_1,
                   'rounded-full [&_button:first-child]:rounded-l-full [&_button:last-child]:rounded-r-full',
                 ]
               )}
@@ -348,7 +362,7 @@ export function AgentControlBar({
               pressed={screenShareToggle.enabled}
               disabled={screenShareToggle.pending}
               onPressedChange={screenShareToggle.toggle}
-              className={cn(variant === 'livekit' && [TOGGLE_VARIANT_2, 'rounded-full'])}
+              className={cn(variant === 'livekit' && [LK_TOGGLE_VARIANT_2, 'rounded-full'])}
             />
           )}
 
@@ -364,7 +378,7 @@ export function AgentControlBar({
               }}
               className={agentTrackToggleVariants({
                 variant: variant === 'outline' ? 'outline' : 'default',
-                className: cn(variant === 'livekit' && [TOGGLE_VARIANT_2, 'rounded-full']),
+                className: cn(variant === 'livekit' && [LK_TOGGLE_VARIANT_2, 'rounded-full']),
               })}
             >
               <MessageSquareTextIcon />
diff --git a/components/agents-ui/agent-track-control.tsx b/components/agents-ui/agent-track-control.tsx
index 198551df7..7b5441213 100644
--- a/components/agents-ui/agent-track-control.tsx
+++ b/components/agents-ui/agent-track-control.tsx
@@ -36,7 +36,7 @@ const selectVariants = cva(
           'border-none',
           'peer-data-[state=off]/track:bg-destructive/10',
           'peer-data-[state=off]/track:hover:bg-destructive/15',
-          'peer-data-[state=off]/track:[&_svg]:!text-destructive',
+          'peer-data-[state=off]/track:[&_svg]:text-destructive!',
 
           'dark:peer-data-[state=on]/track:bg-accent',
           'dark:peer-data-[state=on]/track:hover:bg-foreground/10',
@@ -48,7 +48,7 @@ const selectVariants = cva(
           'peer-data-[state=off]/track:border-destructive/20',
           'peer-data-[state=off]/track:bg-destructive/10',
           'peer-data-[state=off]/track:hover:bg-destructive/15',
-          'peer-data-[state=off]/track:[&_svg]:!text-destructive',
+          'peer-data-[state=off]/track:[&_svg]:text-destructive!',
           'peer-data-[state=on]/track:hover:border-foreground/12',
 
           'dark:peer-data-[state=off]/track:bg-destructive/10',
diff --git a/components/agents-ui/agent-track-toggle.tsx b/components/agents-ui/agent-track-toggle.tsx
index 5fc53e593..a873373c6 100644
--- a/components/agents-ui/agent-track-toggle.tsx
+++ b/components/agents-ui/agent-track-toggle.tsx
@@ -10,11 +10,16 @@ import {
   VideoIcon,
   VideoOffIcon,
 } from 'lucide-react';
-import { Toggle, toggleVariants } from '@/components/ui/toggle';
+import { Toggle } from '@/components/ui/toggle';
 import { cn } from '@/lib/shadcn/utils';
 
 export const agentTrackToggleVariants = cva(['size-9'], {
   variants: {
+    size: {
+      default: 'h-9 px-2 min-w-9',
+      sm: 'h-8 px-1.5 min-w-8',
+      lg: 'h-10 px-2.5 min-w-10',
+    },
     variant: {
       default: [
         'data-[state=off]:bg-destructive/10 data-[state=off]:text-destructive',
@@ -58,8 +63,12 @@ function getSourceIcon(source: Track.Source, enabled: boolean, pending = false)
 /**
  * Props for the AgentTrackToggle component.
  */
-export type AgentTrackToggleProps = VariantProps<typeof toggleVariants> &
+export type AgentTrackToggleProps = VariantProps<typeof agentTrackToggleVariants> &
   ComponentProps<'button'> & {
+    /**
+     * The size of the toggle.
+     */
+    size?: 'sm' | 'default' | 'lg';
     /**
      * The variant of the toggle.
      * @defaultValue 'default'
@@ -129,6 +138,7 @@ export function AgentTrackToggle({
       onPressedChange={onPressedChange}
       className={cn(
         agentTrackToggleVariants({
+          size,
           variant: variant ?? 'default',
           className,
         })
diff --git a/components/agents-ui/react-shader-toy.tsx b/components/agents-ui/react-shader-toy.tsx
new file mode 100644
index 000000000..9b71ee40e
--- /dev/null
+++ b/components/agents-ui/react-shader-toy.tsx
@@ -0,0 +1,916 @@
+import React, { useEffect, useRef } from 'react';
+
+const PRECISIONS = ['lowp', 'mediump', 'highp'];
+const FS_MAIN_SHADER = `\nvoid main(void){
+    vec4 color = vec4(0.0,0.0,0.0,1.0);
+    mainImage( color, gl_FragCoord.xy );
+    gl_FragColor = color;
+}`;
+const BASIC_FS = `void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
+    vec2 uv = fragCoord/iResolution.xy;
+    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
+    fragColor = vec4(col,1.0);
+}`;
+const BASIC_VS = `attribute vec3 aVertexPosition;
+void main(void) {
+    gl_Position = vec4(aVertexPosition, 1.0);
+}`;
+const UNIFORM_TIME = 'iTime';
+const UNIFORM_TIMEDELTA = 'iTimeDelta';
+const UNIFORM_DATE = 'iDate';
+const UNIFORM_FRAME = 'iFrame';
+const UNIFORM_MOUSE = 'iMouse';
+const UNIFORM_RESOLUTION = 'iResolution';
+const UNIFORM_CHANNEL = 'iChannel';
+const UNIFORM_CHANNELRESOLUTION = 'iChannelResolution';
+const UNIFORM_DEVICEORIENTATION = 'iDeviceOrientation';
+
+type Vector4<T = number> = [T, T, T, T];
+type UniformType = keyof Uniforms;
+
+function isMatrixType(t: string, v: number[] | number): v is number[] {
+  return t.includes('Matrix') && Array.isArray(v);
+}
+function isVectorListType(t: string, v: number[] | number): v is number[] {
+  return t.includes('v') && Array.isArray(v) && v.length > Number.parseInt(t.charAt(0));
+}
+function isVectorType(t: string, v: number[] | number): v is Vector4 {
+  return !t.includes('v') && Array.isArray(v) && v.length > Number.parseInt(t.charAt(0));
+}
+const processUniform = <T extends UniformType>(
+  gl: WebGLRenderingContext,
+  location: WebGLUniformLocation,
+  t: T,
+  value: number | number[]
+) => {
+  if (isVectorType(t, value)) {
+    switch (t) {
+      case '2f':
+        return gl.uniform2f(location, value[0], value[1]);
+      case '3f':
+        return gl.uniform3f(location, value[0], value[1], value[2]);
+      case '4f':
+        return gl.uniform4f(location, value[0], value[1], value[2], value[3]);
+      case '2i':
+        return gl.uniform2i(location, value[0], value[1]);
+      case '3i':
+        return gl.uniform3i(location, value[0], value[1], value[2]);
+      case '4i':
+        return gl.uniform4i(location, value[0], value[1], value[2], value[3]);
+    }
+  }
+  if (typeof value === 'number') {
+    switch (t) {
+      case '1i':
+        return gl.uniform1i(location, value);
+      default:
+        return gl.uniform1f(location, value);
+    }
+  }
+  switch (t) {
+    case '1iv':
+      return gl.uniform1iv(location, value);
+    case '2iv':
+      return gl.uniform2iv(location, value);
+    case '3iv':
+      return gl.uniform3iv(location, value);
+    case '4iv':
+      return gl.uniform4iv(location, value);
+    case '1fv':
+      return gl.uniform1fv(location, value);
+    case '2fv':
+      return gl.uniform2fv(location, value);
+    case '3fv':
+      return gl.uniform3fv(location, value);
+    case '4fv':
+      return gl.uniform4fv(location, value);
+    case 'Matrix2fv':
+      return gl.uniformMatrix2fv(location, false, value);
+    case 'Matrix3fv':
+      return gl.uniformMatrix3fv(location, false, value);
+    case 'Matrix4fv':
+      return gl.uniformMatrix4fv(location, false, value);
+  }
+};
+
+const uniformTypeToGLSLType = (t: string) => {
+  switch (t) {
+    case '1f':
+      return 'float';
+    case '2f':
+      return 'vec2';
+    case '3f':
+      return 'vec3';
+    case '4f':
+      return 'vec4';
+    case '1i':
+      return 'int';
+    case '2i':
+      return 'ivec2';
+    case '3i':
+      return 'ivec3';
+    case '4i':
+      return 'ivec4';
+    case '1iv':
+      return 'int';
+    case '2iv':
+      return 'ivec2';
+    case '3iv':
+      return 'ivec3';
+    case '4iv':
+      return 'ivec4';
+    case '1fv':
+      return 'float';
+    case '2fv':
+      return 'vec2';
+    case '3fv':
+      return 'vec3';
+    case '4fv':
+      return 'vec4';
+    case 'Matrix2fv':
+      return 'mat2';
+    case 'Matrix3fv':
+      return 'mat3';
+    case 'Matrix4fv':
+      return 'mat4';
+    default:
+      console.error(
+        log(`The uniform type "${t}" is not valid, please make sure your uniform type is valid`)
+      );
+  }
+};
+
+const LinearFilter = 9729;
+const NearestFilter = 9728;
+const LinearMipMapLinearFilter = 9987;
+const NearestMipMapLinearFilter = 9986;
+const LinearMipMapNearestFilter = 9985;
+const NearestMipMapNearestFilter = 9984;
+const MirroredRepeatWrapping = 33648;
+const ClampToEdgeWrapping = 33071;
+const RepeatWrapping = 10497;
+
+class Texture {
+  gl: WebGLRenderingContext;
+  url?: string;
+  wrapS?: number;
+  wrapT?: number;
+  minFilter?: number;
+  magFilter?: number;
+  source?: HTMLImageElement | HTMLVideoElement;
+  pow2canvas?: HTMLCanvasElement;
+  isLoaded = false;
+  isVideo = false;
+  flipY = -1;
+  width = 0;
+  height = 0;
+  _webglTexture: WebGLTexture | null = null;
+  constructor(gl: WebGLRenderingContext) {
+    this.gl = gl;
+  }
+  updateTexture = (texture: WebGLTexture, video: HTMLVideoElement, flipY: number) => {
+    const { gl } = this;
+    const level = 0;
+    const internalFormat = gl.RGBA;
+    const srcFormat = gl.RGBA;
+    const srcType = gl.UNSIGNED_BYTE;
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, video);
+  };
+  setupVideo = (url: string) => {
+    const video = document.createElement('video');
+    let playing = false;
+    let timeupdate = false;
+    video.autoplay = true;
+    video.muted = true;
+    video.loop = true;
+    video.crossOrigin = 'anonymous';
+    const checkReady = () => {
+      if (playing && timeupdate) {
+        this.isLoaded = true;
+      }
+    };
+    video.addEventListener(
+      'playing',
+      () => {
+        playing = true;
+        this.width = video.videoWidth || 0;
+        this.height = video.videoHeight || 0;
+        checkReady();
+      },
+      true
+    );
+    video.addEventListener(
+      'timeupdate',
+      () => {
+        timeupdate = true;
+        checkReady();
+      },
+      true
+    );
+    video.src = url;
+    return video;
+  };
+  makePowerOf2 = <T extends HTMLCanvasElement | HTMLImageElement | ImageBitmap>(image: T): T => {
+    if (
+      image instanceof HTMLImageElement ||
+      image instanceof HTMLCanvasElement ||
+      image instanceof ImageBitmap
+    ) {
+      if (this.pow2canvas === undefined) this.pow2canvas = document.createElement('canvas');
+      this.pow2canvas.width = 2 ** Math.floor(Math.log(image.width) / Math.LN2);
+      this.pow2canvas.height = 2 ** Math.floor(Math.log(image.height) / Math.LN2);
+      const context = this.pow2canvas.getContext('2d');
+      context?.drawImage(image, 0, 0, this.pow2canvas.width, this.pow2canvas.height);
+      console.warn(
+        log(
+          `Image is not power of two ${image.width} x ${image.height}. Resized to ${this.pow2canvas.width} x ${this.pow2canvas.height};`
+        )
+      );
+      return this.pow2canvas as T;
+    }
+    return image;
+  };
+  load = async (textureArgs: TextureParams) => {
+    const { gl } = this;
+    const { url, wrapS, wrapT, minFilter, magFilter, flipY = -1 }: TextureParams = textureArgs;
+    if (!url) {
+      return Promise.reject(
+        new Error(log('Missing url, please make sure to pass the url of your texture { url: ... }'))
+      );
+    }
+    const isImage = /(\.jpg|\.jpeg|\.png|\.gif|\.bmp)$/i.exec(url);
+    const isVideo = /(\.mp4|\.3gp|\.webm|\.ogv)$/i.exec(url);
+    if (isImage === null && isVideo === null) {
+      return Promise.reject(
+        new Error(log(`Please upload a video or an image with a valid format (url: ${url})`))
+      );
+    }
+    Object.assign(this, { url, wrapS, wrapT, minFilter, magFilter, flipY });
+    const level = 0;
+    const internalFormat = gl.RGBA;
+    const width = 1;
+    const height = 1;
+    const border = 0;
+    const srcFormat = gl.RGBA;
+    const srcType = gl.UNSIGNED_BYTE;
+    const pixel = new Uint8Array([255, 255, 255, 0]);
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      level,
+      internalFormat,
+      width,
+      height,
+      border,
+      srcFormat,
+      srcType,
+      pixel
+    );
+    if (isVideo) {
+      const video = this.setupVideo(url);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      this._webglTexture = texture;
+      this.source = video;
+      this.isVideo = true;
+      return video.play().then(() => this);
+    }
+    async function loadImage() {
+      return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.crossOrigin = 'anonymous';
+        image.onload = () => {
+          resolve(image);
+        };
+        image.onerror = () => {
+          reject(new Error(log(`failed loading url: ${url}`)));
+        };
+        image.src = url ?? '';
+      });
+    }
+    let image = (await loadImage()) as HTMLImageElement;
+    let isPowerOf2 =
+      (image.width & (image.width - 1)) === 0 && (image.height & (image.height - 1)) === 0;
+    if (
+      (textureArgs.wrapS !== ClampToEdgeWrapping ||
+        textureArgs.wrapT !== ClampToEdgeWrapping ||
+        (textureArgs.minFilter !== NearestFilter && textureArgs.minFilter !== LinearFilter)) &&
+      !isPowerOf2
+    ) {
+      image = this.makePowerOf2(image);
+      isPowerOf2 = true;
+    }
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image);
+    if (
+      isPowerOf2 &&
+      textureArgs.minFilter !== NearestFilter &&
+      textureArgs.minFilter !== LinearFilter
+    ) {
+      gl.generateMipmap(gl.TEXTURE_2D);
+    }
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this.wrapS || RepeatWrapping);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this.wrapT || RepeatWrapping);
+    gl.texParameteri(
+      gl.TEXTURE_2D,
+      gl.TEXTURE_MIN_FILTER,
+      this.minFilter || LinearMipMapLinearFilter
+    );
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.magFilter || LinearFilter);
+    this._webglTexture = texture;
+    this.source = image;
+    this.isVideo = false;
+    this.isLoaded = true;
+    this.width = image.width || 0;
+    this.height = image.height || 0;
+    return this;
+  };
+}
+
+const log = (text: string) => `react-shaders: ${text}`;
+
+const latestPointerClientCoords = (e: MouseEvent | TouchEvent) => {
+  if ('changedTouches' in e) {
+    const t = e.changedTouches[0];
+    return [t?.clientX ?? 0, t?.clientY ?? 0];
+  }
+  return [e.clientX, e.clientY];
+};
+
+const lerpVal = (v0: number, v1: number, t: number) => v0 * (1 - t) + v1 * t;
+const insertStringAtIndex = (currentString: string, string: string, index: number) =>
+  index > 0
+    ? currentString.substring(0, index) +
+      string +
+      currentString.substring(index, currentString.length)
+    : string + currentString;
+
+type Uniform = { type: string; value: number[] | number };
+type Uniforms = Record<string, Uniform>;
+type TextureParams = {
+  url: string;
+  wrapS?: number;
+  wrapT?: number;
+  minFilter?: number;
+  magFilter?: number;
+  flipY?: number;
+};
+
+export interface ReactShaderToyProps {
+  /** Fragment shader GLSL code. */
+  fs: string;
+
+  /** Vertex shader GLSL code. */
+  vs?: string;
+
+  /**
+   * Textures to be passed to the shader. Textures need to be squared or will be
+   * automatically resized.
+   *
+   * Options default to:
+   *
+   * ```js
+   * {
+   *   minFilter: LinearMipMapLinearFilter,
+   *   magFilter: LinearFilter,
+   *   wrapS: RepeatWrapping,
+   *   wrapT: RepeatWrapping,
+   * }
+   * ```
+   *
+   * See [textures in the docs](https://rysana.com/docs/react-shaders#textures)
+   * for details.
+   */
+  textures?: TextureParams[];
+
+  /**
+   * Custom uniforms to be passed to the shader.
+   *
+   * See [custom uniforms in the
+   * docs](https://rysana.com/docs/react-shaders#custom-uniforms) for details.
+   */
+  uniforms?: Uniforms;
+
+  /**
+   * Color used when clearing the canvas.
+   *
+   * See [the WebGL
+   * docs](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/clearColor)
+   * for details.
+   */
+  clearColor?: Vector4;
+
+  /**
+   * GLSL precision qualifier. Defaults to `'highp'`. Balance between
+   * performance and quality.
+   */
+  precision?: 'highp' | 'lowp' | 'mediump';
+
+  /** Custom inline style for canvas. */
+  style?: React.CSSProperties;
+
+  /** Customize WebGL context attributes. See [the WebGL docs](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getContextAttributes) for details. */
+  contextAttributes?: Record<string, unknown>;
+
+  /** Lerp value for `iMouse` built-in uniform. Must be between 0 and 1. */
+  lerp?: number;
+
+  /** Device pixel ratio. */
+  devicePixelRatio?: number;
+
+  /**
+   * Callback for when the textures are done loading. Useful if you want to do
+   * something like e.g. hide the canvas until textures are done loading.
+   */
+  onDoneLoadingTextures?: () => void;
+
+  /** Custom callback to handle errors. Defaults to `console.error`. */
+  onError?: (error: string) => void;
+
+  /** Custom callback to handle warnings. Defaults to `console.warn`. */
+  onWarning?: (warning: string) => void;
+}
+
+export function ReactShaderToy({
+  fs,
+  vs = BASIC_VS,
+  textures = [],
+  uniforms: propUniforms,
+  clearColor = [0, 0, 0, 1],
+  precision = 'highp',
+  style,
+  contextAttributes = {},
+  lerp = 1,
+  devicePixelRatio = 1,
+  onDoneLoadingTextures,
+  onError = console.error,
+  onWarning = console.warn,
+}: ReactShaderToyProps) {
+  // Refs for WebGL state
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const glRef = useRef<WebGLRenderingContext | null>(null);
+  const squareVerticesBufferRef = useRef<WebGLBuffer | null>(null);
+  const shaderProgramRef = useRef<WebGLProgram | null>(null);
+  const vertexPositionAttributeRef = useRef<number | undefined>(undefined);
+  const animFrameIdRef = useRef<number | undefined>(undefined);
+  const mousedownRef = useRef(false);
+  const canvasPositionRef = useRef<DOMRect | undefined>(undefined);
+  const timerRef = useRef(0);
+  const lastMouseArrRef = useRef<number[]>([0, 0]);
+  const texturesArrRef = useRef<Texture[]>([]);
+  const lastTimeRef = useRef(0);
+  const resizeObserverRef = useRef<ResizeObserver | undefined>(undefined);
+  const uniformsRef = useRef<
+    Record<
+      string,
+      { type: string; isNeeded: boolean; value?: number[] | number; arraySize?: string }
+    >
+  >({
+    [UNIFORM_TIME]: { type: 'float', isNeeded: false, value: 0 },
+    [UNIFORM_TIMEDELTA]: { type: 'float', isNeeded: false, value: 0 },
+    [UNIFORM_DATE]: { type: 'vec4', isNeeded: false, value: [0, 0, 0, 0] },
+    [UNIFORM_MOUSE]: { type: 'vec4', isNeeded: false, value: [0, 0, 0, 0] },
+    [UNIFORM_RESOLUTION]: { type: 'vec2', isNeeded: false, value: [0, 0] },
+    [UNIFORM_FRAME]: { type: 'int', isNeeded: false, value: 0 },
+    [UNIFORM_DEVICEORIENTATION]: { type: 'vec4', isNeeded: false, value: [0, 0, 0, 0] },
+  });
+  const propsUniformsRef = useRef<Uniforms | undefined>(propUniforms);
+
+  const setupChannelRes = (texture: TextureParams | Texture, id: number) => {
+    const width = 'width' in texture ? (texture.width ?? 0) : 0;
+    const height = 'height' in texture ? (texture.height ?? 0) : 0;
+    const channelResUniform = uniformsRef.current.iChannelResolution;
+    if (!channelResUniform) return;
+    const channelResValue = Array.isArray(channelResUniform.value)
+      ? channelResUniform.value
+      : (channelResUniform.value = []);
+    channelResValue[id * 3] = width * devicePixelRatio;
+    channelResValue[id * 3 + 1] = height * devicePixelRatio;
+    channelResValue[id * 3 + 2] = 0;
+  };
+
+  const initWebGL = () => {
+    if (!canvasRef.current) return;
+    glRef.current = (canvasRef.current.getContext('webgl', contextAttributes) ||
+      canvasRef.current.getContext(
+        'experimental-webgl',
+        contextAttributes
+      )) as WebGLRenderingContext | null;
+    glRef.current?.getExtension('OES_standard_derivatives');
+    glRef.current?.getExtension('EXT_shader_texture_lod');
+  };
+
+  const initBuffers = () => {
+    const gl = glRef.current;
+    squareVerticesBufferRef.current = gl?.createBuffer() ?? null;
+    gl?.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBufferRef.current);
+    const vertices = [1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0];
+    gl?.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+  };
+
+  const onDeviceOrientationChange = ({ alpha, beta, gamma }: DeviceOrientationEvent) => {
+    uniformsRef.current.iDeviceOrientation!.value = [
+      alpha ?? 0,
+      beta ?? 0,
+      gamma ?? 0,
+      window.orientation ?? 0,
+    ];
+  };
+
+  const mouseDown = (e: MouseEvent | TouchEvent) => {
+    const [clientX = 0, clientY = 0] = latestPointerClientCoords(e);
+    const mouseX = clientX - (canvasPositionRef.current?.left ?? 0) - window.pageXOffset;
+    const mouseY =
+      (canvasPositionRef.current?.height ?? 0) -
+      clientY -
+      (canvasPositionRef.current?.top ?? 0) -
+      window.pageYOffset;
+    mousedownRef.current = true;
+    const mouseValue = Array.isArray(uniformsRef.current.iMouse?.value)
+      ? uniformsRef.current.iMouse.value
+      : undefined;
+    if (mouseValue) {
+      mouseValue[2] = mouseX;
+      mouseValue[3] = mouseY;
+    }
+    lastMouseArrRef.current[0] = mouseX;
+    lastMouseArrRef.current[1] = mouseY;
+  };
+
+  const mouseMove = (e: MouseEvent | TouchEvent) => {
+    canvasPositionRef.current = canvasRef.current?.getBoundingClientRect();
+    const [clientX = 0, clientY = 0] = latestPointerClientCoords(e);
+    const mouseX = clientX - (canvasPositionRef.current?.left ?? 0);
+    const mouseY =
+      (canvasPositionRef.current?.height ?? 0) - clientY - (canvasPositionRef.current?.top ?? 0);
+    if (lerp !== 1) {
+      lastMouseArrRef.current[0] = mouseX;
+      lastMouseArrRef.current[1] = mouseY;
+    } else {
+      const mouseValue = Array.isArray(uniformsRef.current.iMouse?.value)
+        ? uniformsRef.current.iMouse.value
+        : undefined;
+      if (mouseValue) {
+        mouseValue[0] = mouseX;
+        mouseValue[1] = mouseY;
+      }
+    }
+  };
+
+  const mouseUp = () => {
+    const mouseValue = Array.isArray(uniformsRef.current.iMouse?.value)
+      ? uniformsRef.current.iMouse.value
+      : undefined;
+    if (mouseValue) {
+      mouseValue[2] = 0;
+      mouseValue[3] = 0;
+    }
+  };
+
+  const onResize = () => {
+    const gl = glRef.current;
+    if (!gl) return;
+    canvasPositionRef.current = canvasRef.current?.getBoundingClientRect();
+    // Force pixel ratio to be one to avoid expensive calculus on retina display.
+    const realToCSSPixels = devicePixelRatio;
+    const displayWidth = Math.floor((canvasPositionRef.current?.width ?? 1) * realToCSSPixels);
+    const displayHeight = Math.floor((canvasPositionRef.current?.height ?? 1) * realToCSSPixels);
+    gl.canvas.width = displayWidth;
+    gl.canvas.height = displayHeight;
+    if (uniformsRef.current.iResolution?.isNeeded && shaderProgramRef.current) {
+      const rUniform = gl.getUniformLocation(shaderProgramRef.current, UNIFORM_RESOLUTION);
+      gl.uniform2fv(rUniform, [gl.canvas.width, gl.canvas.height]);
+    }
+  };
+
+  const createShader = (type: number, shaderCodeAsText: string) => {
+    const gl = glRef.current;
+    if (!gl) return null;
+    const shader = gl.createShader(type);
+    if (!shader) return null;
+    gl.shaderSource(shader, shaderCodeAsText);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      onWarning?.(log(`Error compiling the shader:\n${shaderCodeAsText}`));
+      const compilationLog = gl.getShaderInfoLog(shader);
+      gl.deleteShader(shader);
+      onError?.(log(`Shader compiler log: ${compilationLog}`));
+    }
+    return shader;
+  };
+
+  const initShaders = (fragmentShader: string, vertexShader: string) => {
+    const gl = glRef.current;
+    if (!gl) return;
+    const fragmentShaderObj = createShader(gl.FRAGMENT_SHADER, fragmentShader);
+    const vertexShaderObj = createShader(gl.VERTEX_SHADER, vertexShader);
+    shaderProgramRef.current = gl.createProgram();
+    if (!shaderProgramRef.current || !vertexShaderObj || !fragmentShaderObj) return;
+    gl.attachShader(shaderProgramRef.current, vertexShaderObj);
+    gl.attachShader(shaderProgramRef.current, fragmentShaderObj);
+    gl.linkProgram(shaderProgramRef.current);
+    if (!gl.getProgramParameter(shaderProgramRef.current, gl.LINK_STATUS)) {
+      onError?.(
+        log(
+          `Unable to initialize the shader program: ${gl.getProgramInfoLog(shaderProgramRef.current)}`
+        )
+      );
+      return;
+    }
+    gl.useProgram(shaderProgramRef.current);
+    vertexPositionAttributeRef.current = gl.getAttribLocation(
+      shaderProgramRef.current,
+      'aVertexPosition'
+    );
+    gl.enableVertexAttribArray(vertexPositionAttributeRef.current);
+  };
+
+  const processCustomUniforms = () => {
+    if (propUniforms) {
+      for (const name of Object.keys(propUniforms)) {
+        const uniform = propUniforms[name];
+        if (!uniform) continue;
+        const { value, type } = uniform;
+        const glslType = uniformTypeToGLSLType(type);
+        if (!glslType) continue;
+        const tempObject: { arraySize?: string } = {};
+        if (isMatrixType(type, value)) {
+          const arrayLength = type.length;
+          const val = Number.parseInt(type.charAt(arrayLength - 3));
+          const numberOfMatrices = Math.floor(value.length / (val * val));
+          if (value.length > val * val) tempObject.arraySize = `[${numberOfMatrices}]`;
+        } else if (isVectorListType(type, value)) {
+          tempObject.arraySize = `[${Math.floor(value.length / Number.parseInt(type.charAt(0)))}]`;
+        }
+        uniformsRef.current[name] = { type: glslType, isNeeded: false, value, ...tempObject };
+      }
+    }
+  };
+
+  const processTextures = () => {
+    const gl = glRef.current;
+    if (!gl) return;
+    if (textures && textures.length > 0) {
+      uniformsRef.current[`${UNIFORM_CHANNELRESOLUTION}`] = {
+        type: 'vec3',
+        isNeeded: false,
+        arraySize: `[${textures.length}]`,
+        value: [],
+      };
+      const texturePromisesArr = textures.map((texture: TextureParams, id: number) => {
+        // Dynamically add textures uniforms.
+        uniformsRef.current[`${UNIFORM_CHANNEL}${id}`] = {
+          type: 'sampler2D',
+          isNeeded: false,
+        };
+        setupChannelRes(texture, id);
+        texturesArrRef.current[id] = new Texture(gl);
+        return texturesArrRef.current[id]?.load(texture).then((t: Texture) => {
+          setupChannelRes(t, id);
+        });
+      });
+      Promise.all(texturePromisesArr)
+        .then(() => {
+          if (onDoneLoadingTextures) onDoneLoadingTextures();
+        })
+        .catch((e) => {
+          onError?.(e);
+          if (onDoneLoadingTextures) onDoneLoadingTextures();
+        });
+    } else if (onDoneLoadingTextures) onDoneLoadingTextures();
+  };
+
+  const preProcessFragment = (fragment: string) => {
+    const isValidPrecision = PRECISIONS.includes(precision ?? 'highp');
+    const precisionString = `precision ${isValidPrecision ? precision : PRECISIONS[1]} float;\n`;
+    if (!isValidPrecision) {
+      onWarning?.(
+        log(
+          `wrong precision type ${precision}, please make sure to pass one of a valid precision lowp, mediump, highp, by default you shader precision will be set to highp.`
+        )
+      );
+    }
+    let fragmentShader = precisionString
+      .concat(`#define DPR ${devicePixelRatio.toFixed(1)}\n`)
+      .concat(fragment.replace(/texture\(/g, 'texture2D('));
+    for (const uniform of Object.keys(uniformsRef.current)) {
+      if (fragment.includes(uniform)) {
+        const u = uniformsRef.current[uniform];
+        if (!u) continue;
+        fragmentShader = insertStringAtIndex(
+          fragmentShader,
+          `uniform ${u.type} ${uniform}${u.arraySize || ''}; \n`,
+          fragmentShader.lastIndexOf(precisionString) + precisionString.length
+        );
+        u.isNeeded = true;
+      }
+    }
+    const isShadertoy = fragment.includes('mainImage');
+    if (isShadertoy) fragmentShader = fragmentShader.concat(FS_MAIN_SHADER);
+    return fragmentShader;
+  };
+
+  const setUniforms = (timestamp: number) => {
+    const gl = glRef.current;
+    if (!gl || !shaderProgramRef.current) return;
+    const delta = lastTimeRef.current ? (timestamp - lastTimeRef.current) / 1000 : 0;
+    lastTimeRef.current = timestamp;
+    const propUniforms = propsUniformsRef.current;
+    if (propUniforms) {
+      for (const name of Object.keys(propUniforms)) {
+        const currentUniform = propUniforms[name];
+        if (!currentUniform) continue;
+        if (uniformsRef.current[name]?.isNeeded) {
+          if (!shaderProgramRef.current) return;
+          const customUniformLocation = gl.getUniformLocation(shaderProgramRef.current, name);
+          if (!customUniformLocation) return;
+          processUniform(
+            gl,
+            customUniformLocation,
+            currentUniform.type as UniformType,
+            currentUniform.value
+          );
+        }
+      }
+    }
+    if (uniformsRef.current.iMouse?.isNeeded) {
+      const mouseUniform = gl.getUniformLocation(shaderProgramRef.current, UNIFORM_MOUSE);
+      gl.uniform4fv(mouseUniform, uniformsRef.current.iMouse.value as number[]);
+    }
+    if (uniformsRef.current.iChannelResolution?.isNeeded) {
+      const channelResUniform = gl.getUniformLocation(
+        shaderProgramRef.current,
+        UNIFORM_CHANNELRESOLUTION
+      );
+      gl.uniform3fv(channelResUniform, uniformsRef.current.iChannelResolution.value as number[]);
+    }
+    if (uniformsRef.current.iDeviceOrientation?.isNeeded) {
+      const deviceOrientationUniform = gl.getUniformLocation(
+        shaderProgramRef.current,
+        UNIFORM_DEVICEORIENTATION
+      );
+      gl.uniform4fv(
+        deviceOrientationUniform,
+        uniformsRef.current.iDeviceOrientation.value as number[]
+      );
+    }
+    if (uniformsRef.current.iTime?.isNeeded) {
+      const timeUniform = gl.getUniformLocation(shaderProgramRef.current, UNIFORM_TIME);
+      gl.uniform1f(timeUniform, (timerRef.current += delta));
+    }
+    if (uniformsRef.current.iTimeDelta?.isNeeded) {
+      const timeDeltaUniform = gl.getUniformLocation(shaderProgramRef.current, UNIFORM_TIMEDELTA);
+      gl.uniform1f(timeDeltaUniform, delta);
+    }
+    if (uniformsRef.current.iDate?.isNeeded) {
+      const d = new Date();
+      const month = d.getMonth() + 1;
+      const day = d.getDate();
+      const year = d.getFullYear();
+      const time =
+        d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds() + d.getMilliseconds() * 0.001;
+      const dateUniform = gl.getUniformLocation(shaderProgramRef.current, UNIFORM_DATE);
+      gl.uniform4fv(dateUniform, [year, month, day, time]);
+    }
+    if (uniformsRef.current.iFrame?.isNeeded) {
+      const timeDeltaUniform = gl.getUniformLocation(shaderProgramRef.current, UNIFORM_FRAME);
+      gl.uniform1i(timeDeltaUniform, (uniformsRef.current.iFrame.value as number)++);
+    }
+    if (texturesArrRef.current.length > 0) {
+      for (let index = 0; index < texturesArrRef.current.length; index++) {
+        const texture = texturesArrRef.current[index];
+        if (!texture) return;
+        const { isVideo, _webglTexture, source, flipY, isLoaded } = texture;
+        if (!isLoaded || !_webglTexture || !source) return;
+        if (uniformsRef.current[`iChannel${index}`]?.isNeeded) {
+          if (!shaderProgramRef.current) return;
+          const iChannel = gl.getUniformLocation(shaderProgramRef.current, `iChannel${index}`);
+          gl.activeTexture(gl.TEXTURE0 + index);
+          gl.bindTexture(gl.TEXTURE_2D, _webglTexture);
+          gl.uniform1i(iChannel, index);
+          if (isVideo) {
+            texture.updateTexture(_webglTexture, source as HTMLVideoElement, flipY);
+          }
+        }
+      }
+    }
+  };
+
+  const drawScene = (timestamp: number) => {
+    const gl = glRef.current;
+    if (!gl) return;
+    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBufferRef.current);
+    gl.vertexAttribPointer(vertexPositionAttributeRef.current ?? 0, 3, gl.FLOAT, false, 0, 0);
+    setUniforms(timestamp);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    const mouseValue = uniformsRef.current.iMouse?.value;
+    if (uniformsRef.current.iMouse?.isNeeded && lerp !== 1 && Array.isArray(mouseValue)) {
+      const currentX = mouseValue[0] ?? 0;
+      const currentY = mouseValue[1] ?? 0;
+      mouseValue[0] = lerpVal(currentX, lastMouseArrRef.current[0] ?? 0, lerp);
+      mouseValue[1] = lerpVal(currentY, lastMouseArrRef.current[1] ?? 0, lerp);
+    }
+    animFrameIdRef.current = requestAnimationFrame(drawScene);
+  };
+
+  const addEventListeners = () => {
+    const options = { passive: true };
+    if (uniformsRef.current.iMouse?.isNeeded && canvasRef.current) {
+      canvasRef.current.addEventListener('mousemove', mouseMove, options);
+      canvasRef.current.addEventListener('mouseout', mouseUp, options);
+      canvasRef.current.addEventListener('mouseup', mouseUp, options);
+      canvasRef.current.addEventListener('mousedown', mouseDown, options);
+      canvasRef.current.addEventListener('touchmove', mouseMove, options);
+      canvasRef.current.addEventListener('touchend', mouseUp, options);
+      canvasRef.current.addEventListener('touchstart', mouseDown, options);
+    }
+    if (uniformsRef.current.iDeviceOrientation?.isNeeded) {
+      window.addEventListener('deviceorientation', onDeviceOrientationChange, options);
+    }
+    if (canvasRef.current) {
+      resizeObserverRef.current = new ResizeObserver(onResize);
+      resizeObserverRef.current.observe(canvasRef.current);
+      window.addEventListener('resize', onResize, options);
+    }
+  };
+
+  const removeEventListeners = () => {
+    const options = { passive: true } as EventListenerOptions;
+    if (uniformsRef.current.iMouse?.isNeeded && canvasRef.current) {
+      canvasRef.current.removeEventListener('mousemove', mouseMove, options);
+      canvasRef.current.removeEventListener('mouseout', mouseUp, options);
+      canvasRef.current.removeEventListener('mouseup', mouseUp, options);
+      canvasRef.current.removeEventListener('mousedown', mouseDown, options);
+      canvasRef.current.removeEventListener('touchmove', mouseMove, options);
+      canvasRef.current.removeEventListener('touchend', mouseUp, options);
+      canvasRef.current.removeEventListener('touchstart', mouseDown, options);
+    }
+    if (uniformsRef.current.iDeviceOrientation?.isNeeded) {
+      window.removeEventListener('deviceorientation', onDeviceOrientationChange, options);
+    }
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect();
+      window.removeEventListener('resize', onResize, options);
+    }
+  };
+
+  useEffect(() => {
+    propsUniformsRef.current = propUniforms;
+  }, [propUniforms]);
+
+  // Main effect for initialization and cleanup
+  useEffect(() => {
+    const textures = texturesArrRef.current;
+
+    function init() {
+      initWebGL();
+      const gl = glRef.current;
+      if (gl && canvasRef.current) {
+        gl.clearColor(...clearColor);
+        gl.clearDepth(1.0);
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.LEQUAL);
+        gl.viewport(0, 0, canvasRef.current.width, canvasRef.current.height);
+        canvasRef.current.height = canvasRef.current.clientHeight;
+        canvasRef.current.width = canvasRef.current.clientWidth;
+        processCustomUniforms();
+        processTextures();
+        initShaders(preProcessFragment(fs || BASIC_FS), vs || BASIC_VS);
+        initBuffers();
+        requestAnimationFrame(drawScene);
+        addEventListeners();
+        onResize();
+      }
+    }
+
+    requestAnimationFrame(init);
+
+    // Cleanup function
+    return () => {
+      const gl = glRef.current;
+      if (gl) {
+        gl.getExtension('WEBGL_lose_context')?.loseContext();
+        gl.useProgram(null);
+        gl.deleteProgram(shaderProgramRef.current ?? null);
+        if (textures.length > 0) {
+          for (const texture of textures as Texture[]) {
+            gl.deleteTexture(texture._webglTexture);
+          }
+        }
+        shaderProgramRef.current = null;
+      }
+      removeEventListeners();
+      cancelAnimationFrame(animFrameIdRef.current ?? 0);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Empty dependency array to run only once on mount
+
+  return <canvas ref={canvasRef} style={{ height: '100%', width: '100%', ...style }} />;
+}
diff --git a/components/ai-elements/conversation.tsx b/components/ai-elements/conversation.tsx
index e6b70f6f4..2799d7c15 100644
--- a/components/ai-elements/conversation.tsx
+++ b/components/ai-elements/conversation.tsx
@@ -73,10 +73,7 @@ export const ConversationScrollButton = ({
   return (
     !isAtBottom && (
       <Button
-        className={cn(
-          'dark:bg-background dark:hover:bg-muted absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full',
-          className
-        )}
+        className={cn('absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full', className)}
         onClick={handleScrollToBottom}
         size="icon"
         type="button"
diff --git a/components/app/audio-visualizer.tsx b/components/app/audio-visualizer.tsx
new file mode 100644
index 000000000..c47a18b96
--- /dev/null
+++ b/components/app/audio-visualizer.tsx
@@ -0,0 +1,96 @@
+import { useVoiceAssistant } from '@livekit/components-react';
+import { AppConfig } from '@/app-config';
+import { cn } from '@/lib/shadcn/utils';
+import { AgentAudioVisualizerAura } from '../agents-ui/agent-audio-visualizer-aura';
+import { AgentAudioVisualizerBar } from '../agents-ui/agent-audio-visualizer-bar';
+import { AgentAudioVisualizerGrid } from '../agents-ui/agent-audio-visualizer-grid';
+import { AgentAudioVisualizerRadial } from '../agents-ui/agent-audio-visualizer-radial';
+import { AgentAudioVisualizerWave } from '../agents-ui/agent-audio-visualizer-wave';
+
+interface AudioVisualizerProps {
+  appConfig: AppConfig;
+}
+
+export function AudioVisualizer({ appConfig }: AudioVisualizerProps) {
+  const { audioVisualizerType } = appConfig;
+  const { state, audioTrack } = useVoiceAssistant();
+
+  switch (audioVisualizerType) {
+    case 'aura': {
+      const { audioVisualizerColor, audioVisualizerColorShift } = appConfig;
+      return (
+        <AgentAudioVisualizerAura
+          key="audio-visualizer-aura"
+          size="md"
+          state={state}
+          audioTrack={audioTrack}
+          color={audioVisualizerColor}
+          colorShift={audioVisualizerColorShift}
+          className="h-[360px]"
+        />
+      );
+    }
+    case 'wave': {
+      const { audioVisualizerColor } = appConfig;
+      return (
+        <AgentAudioVisualizerWave
+          key="audio-visualizer-wave"
+          size="md"
+          state={state}
+          audioTrack={audioTrack}
+          lineWidth={3}
+          color={audioVisualizerColor}
+          className="h-[360px]"
+        />
+      );
+    }
+    case 'grid': {
+      const { audioVisualizerRowCount, audioVisualizerColumnCount } = appConfig;
+      return (
+        <AgentAudioVisualizerGrid
+          key="audio-visualizer-grid"
+          size="sm"
+          state={state}
+          audioTrack={audioTrack}
+          rowCount={audioVisualizerRowCount}
+          columnCount={audioVisualizerColumnCount}
+          className="h-[360px]"
+        />
+      );
+    }
+    case 'radial': {
+      const { audioVisualizerRadius, audioVisualizerBarCount } = appConfig;
+      return (
+        <AgentAudioVisualizerRadial
+          key="audio-visualizer-radial"
+          size="sm"
+          state={state}
+          audioTrack={audioTrack}
+          radius={audioVisualizerRadius}
+          barCount={audioVisualizerBarCount}
+        />
+      );
+    }
+    default: {
+      const { audioVisualizerBarCount } = appConfig;
+
+      return (
+        <AgentAudioVisualizerBar
+          key="audio-visualizer-bar"
+          state={state}
+          audioTrack={audioTrack}
+          barCount={audioVisualizerBarCount}
+          className={cn('flex h-[360px] items-center justify-center gap-1 px-4 py-2')}
+        >
+          <span
+            className={cn([
+              'bg-muted min-h-2.5 w-2.5 rounded-full',
+              'origin-center transition-colors duration-250 ease-linear',
+              'data-[lk-highlighted=true]:bg-foreground data-[lk-muted=true]:bg-muted',
+            ])}
+          />
+        </AgentAudioVisualizerBar>
+      );
+    }
+  }
+}
diff --git a/components/app/session-view.tsx b/components/app/session-view.tsx
index 00b2e852b..597a3e82c 100644
--- a/components/app/session-view.tsx
+++ b/components/app/session-view.tsx
@@ -121,7 +121,7 @@ export const SessionView = ({
         className="space-y-3 transition-opacity duration-300 ease-out"
       />
       {/* Tile layout */}
-      <TileLayout chatOpen={chatOpen} />
+      <TileLayout chatOpen={chatOpen} appConfig={appConfig} />
       {/* Bottom */}
       <MotionBottom
         {...BOTTOM_VIEW_MOTION_PROPS}
diff --git a/components/app/tile-layout.tsx b/components/app/tile-layout.tsx
index b15453568..a4294599e 100644
--- a/components/app/tile-layout.tsx
+++ b/components/app/tile-layout.tsx
@@ -8,8 +8,9 @@ import {
   useTracks,
   useVoiceAssistant,
 } from '@livekit/components-react';
-import { AgentAudioVisualizerBar } from '@/components/agents-ui/agent-audio-visualizer-bar';
+import { AppConfig } from '@/app-config';
 import { cn } from '@/lib/shadcn/utils';
+import { AudioVisualizer } from './audio-visualizer';
 
 const MotionContainer = motion.create('div');
 
@@ -71,14 +72,11 @@ export function useLocalTrackRef(source: Track.Source) {
 
 interface TileLayoutProps {
   chatOpen: boolean;
+  appConfig: AppConfig;
 }
 
-export function TileLayout({ chatOpen }: TileLayoutProps) {
-  const {
-    state: agentState,
-    audioTrack: agentAudioTrack,
-    videoTrack: agentVideoTrack,
-  } = useVoiceAssistant();
+export function TileLayout({ chatOpen, appConfig }: TileLayoutProps) {
+  const { videoTrack: agentVideoTrack } = useVoiceAssistant();
   const [screenShareTrack] = useTracks([Track.Source.ScreenShare]);
   const cameraTrack: TrackReference | undefined = useLocalTrackRef(Track.Source.Camera);
 
@@ -88,6 +86,7 @@ export function TileLayout({ chatOpen }: TileLayoutProps) {
 
   const animationDelay = chatOpen ? 0 : 0.15;
   const isAvatar = agentVideoTrack !== undefined;
+  const isVoiceOnly = agentVideoTrack == undefined;
   const videoWidth = agentVideoTrack?.publication.dimensions?.width ?? 0;
   const videoHeight = agentVideoTrack?.publication.dimensions?.height ?? 0;
 
@@ -96,7 +95,20 @@ export function TileLayout({ chatOpen }: TileLayoutProps) {
       <div className="relative mx-auto h-full max-w-2xl px-4 md:px-0">
         <div className={cn(classNames.grid)}>
           {/* Agent */}
-          <div
+          <MotionContainer
+            key="agent"
+            layoutId="agent"
+            initial={{
+              opacity: 0,
+            }}
+            animate={{
+              opacity: 1,
+              scale: chatOpen ? 0.25 : 1,
+            }}
+            transition={{
+              ...ANIMATION_TRANSITION,
+              delay: animationDelay,
+            }}
             className={cn([
               'grid',
               !chatOpen && classNames.agentChatClosed,
@@ -105,43 +117,16 @@ export function TileLayout({ chatOpen }: TileLayoutProps) {
             ])}
           >
             <AnimatePresence mode="popLayout">
-              {!isAvatar && (
+              {isVoiceOnly && (
                 // Audio Agent
-                <MotionContainer
-                  key="agent"
-                  layoutId="agent"
-                  initial={{
-                    opacity: 0,
-                    scale: 0,
-                  }}
-                  animate={{
-                    opacity: 1,
-                    scale: chatOpen ? 1 : 4,
-                  }}
-                  transition={{
-                    ...ANIMATION_TRANSITION,
-                    delay: animationDelay,
-                  }}
+                <div
                   className={cn(
-                    'bg-background aspect-square h-[90px] rounded-md border border-transparent transition-[border,drop-shadow]',
+                    'bg-background aspect-square rounded-3xl border border-transparent transition-[border,drop-shadow]',
                     chatOpen && 'border-input/50 drop-shadow-lg/10 delay-200'
                   )}
                 >
-                  <AgentAudioVisualizerBar
-                    barCount={5}
-                    state={agentState}
-                    audioTrack={agentAudioTrack}
-                    className={cn('flex h-full items-center justify-center gap-1 px-4 py-2')}
-                  >
-                    <span
-                      className={cn([
-                        'bg-muted min-h-2.5 w-2.5 rounded-full',
-                        'origin-center transition-colors duration-250 ease-linear',
-                        'data-[lk-highlighted=true]:bg-foreground data-[lk-muted=true]:bg-muted',
-                      ])}
-                    />
-                  </AgentAudioVisualizerBar>
-                </MotionContainer>
+                  <AudioVisualizer appConfig={appConfig} />
+                </div>
               )}
 
               {isAvatar && (
@@ -186,7 +171,7 @@ export function TileLayout({ chatOpen }: TileLayoutProps) {
                 </MotionContainer>
               )}
             </AnimatePresence>
-          </div>
+          </MotionContainer>
 
           <div
             className={cn([
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 50e8b1754..e9254a826 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -19,9 +19,11 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
         lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
         icon: 'size-9',
+        'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
         'icon-sm': 'size-8',
         'icon-lg': 'size-10',
       },
diff --git a/hooks/agents-ui/use-agent-audio-visualizer-aura.ts b/hooks/agents-ui/use-agent-audio-visualizer-aura.ts
new file mode 100644
index 000000000..8a971de9c
--- /dev/null
+++ b/hooks/agents-ui/use-agent-audio-visualizer-aura.ts
@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useRef, useState } 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<T>(initialValue: T) {
+  const [value, setValue] = useState(initialValue);
+  const motionValue = useMotionValue(initialValue);
+  const controlsRef = useRef<AnimationPlaybackControlsWithThen | null>(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
+) {
+  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 volume = useTrackVolume(audioTrack as TrackReference, {
+    fftSize: 512,
+    smoothingTimeConstant: 0.55,
+  });
+
+  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' && volume > 0 && !scaleMotionValue.isAnimating()) {
+      animateScale(0.2 + 0.2 * volume, { duration: 0 });
+    }
+  }, [
+    state,
+    volume,
+    scaleMotionValue,
+    animateScale,
+    animateAmplitude,
+    animateFrequency,
+    animateBrightness,
+  ]);
+
+  return {
+    speed,
+    scale,
+    amplitude,
+    frequency,
+    brightness,
+  };
+}
diff --git a/hooks/agents-ui/use-agent-audio-visualizer-wave.ts b/hooks/agents-ui/use-agent-audio-visualizer-wave.ts
new file mode 100644
index 000000000..27be09cf7
--- /dev/null
+++ b/hooks/agents-ui/use-agent-audio-visualizer-wave.ts
@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { LocalAudioTrack, 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 = 5;
+const DEFAULT_AMPLITUDE = 0.025;
+const DEFAULT_FREQUENCY = 10;
+const DEFAULT_TRANSITION: ValueAnimationTransition = { duration: 0.2, ease: 'easeOut' };
+
+function useAnimatedValue<T>(initialValue: T) {
+  const [value, setValue] = useState(initialValue);
+  const motionValue = useMotionValue(initialValue);
+  const controlsRef = useRef<AnimationPlaybackControlsWithThen | null>(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, controls: controlsRef, animate: animateFn };
+}
+
+interface UseAgentAudioVisualizerWaveAnimatorArgs {
+  state?: AgentState;
+  audioTrack?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder;
+}
+
+export function useAgentAudioVisualizerWave({
+  state,
+  audioTrack,
+}: UseAgentAudioVisualizerWaveAnimatorArgs) {
+  const [speed, setSpeed] = useState(DEFAULT_SPEED);
+  const { value: amplitude, animate: animateAmplitude } = useAnimatedValue(DEFAULT_AMPLITUDE);
+  const { value: frequency, animate: animateFrequency } = useAnimatedValue(DEFAULT_FREQUENCY);
+  const { value: opacity, animate: animateOpacity } = useAnimatedValue(1.0);
+
+  const volume = useTrackVolume(audioTrack as TrackReference, {
+    fftSize: 512,
+    smoothingTimeConstant: 0.55,
+  });
+
+  useEffect(() => {
+    switch (state) {
+      case 'disconnected':
+        setSpeed(DEFAULT_SPEED);
+        animateAmplitude(0, DEFAULT_TRANSITION);
+        animateFrequency(0, DEFAULT_TRANSITION);
+        animateOpacity(1.0, DEFAULT_TRANSITION);
+        return;
+      case 'listening':
+        setSpeed(DEFAULT_SPEED);
+        animateAmplitude(DEFAULT_AMPLITUDE, DEFAULT_TRANSITION);
+        animateFrequency(DEFAULT_FREQUENCY, DEFAULT_TRANSITION);
+        animateOpacity([1.0, 0.3], {
+          duration: 0.75,
+          repeat: Infinity,
+          repeatType: 'mirror',
+        });
+        return;
+      case 'thinking':
+      case 'connecting':
+      case 'initializing':
+        setSpeed(DEFAULT_SPEED * 4);
+        animateAmplitude(DEFAULT_AMPLITUDE / 4, DEFAULT_TRANSITION);
+        animateFrequency(DEFAULT_FREQUENCY * 4, DEFAULT_TRANSITION);
+        animateOpacity([1.0, 0.3], {
+          duration: 0.4,
+          repeat: Infinity,
+          repeatType: 'mirror',
+        });
+        return;
+      case 'speaking':
+      default:
+        setSpeed(DEFAULT_SPEED * 2);
+        animateAmplitude(DEFAULT_AMPLITUDE, DEFAULT_TRANSITION);
+        animateFrequency(DEFAULT_FREQUENCY, DEFAULT_TRANSITION);
+        animateOpacity(1.0, DEFAULT_TRANSITION);
+        return;
+    }
+  }, [state, setSpeed, animateAmplitude, animateFrequency, animateOpacity]);
+
+  useEffect(() => {
+    if (state === 'speaking') {
+      animateAmplitude(0.015 + 0.4 * volume, { duration: 0 });
+      animateFrequency(20 + 60 * volume, { duration: 0 });
+    }
+  }, [state, volume, animateAmplitude, animateFrequency]);
+
+  return {
+    speed,
+    amplitude,
+    frequency,
+    opacity,
+  };
+}
diff --git a/hooks/agents-ui/use-agent-control-bar.ts b/hooks/agents-ui/use-agent-control-bar.ts
index 1c32a4a62..4d9305daf 100644
--- a/hooks/agents-ui/use-agent-control-bar.ts
+++ b/hooks/agents-ui/use-agent-control-bar.ts
@@ -1,10 +1,10 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { Track } from 'livekit-client';
 import {
-  type TrackReferenceOrPlaceholder,
-  useLocalParticipant,
+  type TrackReference,
   useLocalParticipantPermissions,
   usePersistentUserChoices,
+  useSessionContext,
   useTrackToggle,
 } from '@livekit/components-react';
 
@@ -55,7 +55,7 @@ export interface UseInputControlsProps {
 }
 
 export interface UseInputControlsReturn {
-  micTrackRef?: TrackReferenceOrPlaceholder;
+  microphoneTrack?: TrackReference;
   microphoneToggle: ReturnType<typeof useTrackToggle<Track.Source.Microphone>>;
   cameraToggle: ReturnType<typeof useTrackToggle<Track.Source.Camera>>;
   screenShareToggle: ReturnType<typeof useTrackToggle<Track.Source.ScreenShare>>;
@@ -69,6 +69,10 @@ export function useInputControls({
   saveUserChoices = true,
   onDeviceError,
 }: UseInputControlsProps = {}): UseInputControlsReturn {
+  const {
+    local: { microphoneTrack },
+  } = useSessionContext();
+
   const microphoneToggle = useTrackToggle({
     source: Track.Source.Microphone,
     onDeviceError: (error) => onDeviceError?.({ source: Track.Source.Microphone, error }),
@@ -84,17 +88,6 @@ export function useInputControls({
     onDeviceError: (error) => onDeviceError?.({ source: Track.Source.ScreenShare, error }),
   });
 
-  const { microphoneTrack, localParticipant } = useLocalParticipant();
-  const micTrackRef = useMemo(() => {
-    return localParticipant && microphoneTrack
-      ? {
-          participant: localParticipant,
-          source: Track.Source.Microphone,
-          publication: microphoneTrack,
-        }
-      : undefined;
-  }, [localParticipant, microphoneTrack]);
-
   const {
     saveAudioInputEnabled,
     saveVideoInputEnabled,
@@ -157,7 +150,7 @@ export function useInputControls({
   );
 
   return {
-    micTrackRef,
+    microphoneTrack,
     cameraToggle: {
       ...cameraToggle,
       toggle: handleToggleCamera,
diff --git a/package.json b/package.json
index 47d3200c9..8da5a01f3 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "lint": "next lint",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "shadcn:install": "pnpm dlx shadcn@latest add @agents-ui/agent-audio-visualizer-bar @agents-ui/agent-audio-visualizer-grid @agents-ui/agent-audio-visualizer-radial @agents-ui/agent-control-bar @agents-ui/agent-session-provider @agents-ui/agent-track-control @agents-ui/agent-track-toggle @agents-ui/agent-chat-transcript @agents-ui/agent-chat-indicator @agents-ui/start-audio-button"
+    "shadcn:install": "pnpm dlx shadcn@latest add -y @agents-ui/agent-audio-visualizer-bar @agents-ui/agent-audio-visualizer-grid @agents-ui/agent-audio-visualizer-radial @agents-ui/agent-control-bar @agents-ui/agent-session-provider @agents-ui/agent-track-control @agents-ui/agent-track-toggle @agents-ui/agent-chat-transcript @agents-ui/agent-chat-indicator @agents-ui/start-audio-button @agents-ui/agent-audio-visualizer-aura @agents-ui/agent-audio-visualizer-wave && pnpm format"
   },
   "dependencies": {
     "@livekit/components-react": "^2.9.18",