Voice Agent Aura

Installation

Architecture

This component is a classic example of Vertex Displacement combined with a Fresnel (Rim Lighting) Shader.

• GLSL Vertex Shader: We use Stefan Gustavson's classic 3D Perlin noise implementation to displace the vertices of a high-resolution sphere (<sphereGeometry args={[1.2, 128, 128]} />). As the volume prop increases, the amplitude of the noise increases, causing the orb to warp violently.
• GLSL Fragment Shader: We calculate the dot product between the surface normal and the view direction to create an iridescent fresnel effect around the rim. The colors (uColor1, uColor2, uColor3) are interpolated based on the displacement height and the fresnel intensity.
• React-Three-Fiber: The volume uniform is continuously smoothly interpolated in a useFrame loop using THREE.MathUtils.lerp to ensure that sudden jumps in audio volume don't cause the mesh geometry to snap violently.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { VoiceAgentAura } from "@/components/creative/voice-agent-aura";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { VoiceAgentAura } from "@/components/creative/voice-agent-aura";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <VoiceAgentAura
        volume{10}
        color1="example"
        color2="example"
      />
    </div>
  );
}