Audio Chat — Interactive Voice Chat UI. Features expandable grid, click-to-speak audio per user, animated wave indicators, and fully customizable participant list via Framer properties.

The Voice Chat component is a high-fidelity, interactive simulation of a live audio room interface (similar to Clubhouse or Twitter/X Spaces) designed specifically for Framer websites. It serves as a powerful tool for social proof, testimonials, or demonstrating community engagement.

Key Features:

• Expandable Interface:

  • Collapsed State: Appears as a sleek, compact "pill" showing a stack of recent avatars, a "live" audio wave icon, and a counter for remaining participants (e.g., "+3").

  • Expanded State: Smoothly transitions into a full card grid view, revealing all participants with their names and a full control header.

• Interactive Audio Playback:

  • Each participant can be assigned a unique audio file (MP3/WAV).

  • Click-to-Speak: Clicking an avatar in the expanded view instantly plays that specific user's audio track while muting others.

  • Visual Feedback: The active speaker is highlighted with a green ring, and a dynamic CSS wave animation appears next to their avatar to simulate real-time voice activity.

• Framer Native Customization:

  • Fully integrated with Framer's sidebar using addPropertyControls.

  • Users can add/remove participants, upload avatars, set names, and attach audio files without touching the code.

  • Includes global font controls to match the typography to the rest of the site brand.