I built this for the Framer 3.0 Agents Hackathon.
Overview
The Voice Control Agent is a floating widget that lets visitors navigate and interact with a site using their voice. It uses the browser’s Web Speech API for both recognition and synthesis, so it listens to spoken commands and responds out loud. It is self-contained and can be dropped onto any page.
Key features
An animated gradient orb that breathes when idle and pulses while listening.
An chat panel that shows spoken input and assistant responses with a scrollable history.
Configurable voice commands, each supporting multiple trigger phrases and one of four actions: navigate, scroll to a section, read content aloud, or speak a response.
A status pill for clear feedback (Listening, Processing, Done) and a button to clear the conversation.
Details
It detects tooltip placement to avoid edge clipping, respects reduced-motion preferences, is SSR-safe with a clear unsupported fallback, and exposes colors, size, locale, and the full command list as property controls.
I would welcome feedback on the interaction model.
I built this for the Framer 3.0 Agents Hackathon.
Overview
The Voice Control Agent is a floating widget that lets visitors navigate and interact with a site using their voice. It uses the browser’s Web Speech API for both recognition and synthesis, so it listens to spoken commands and responds out loud. It is self-contained and can be dropped onto any page.
Key features
An animated gradient orb that breathes when idle and pulses while listening.
An chat panel that shows spoken input and assistant responses with a scrollable history.
Configurable voice commands, each supporting multiple trigger phrases and one of four actions: navigate, scroll to a section, read content aloud, or speak a response.
A status pill for clear feedback (Listening, Processing, Done) and a button to clear the conversation.
Details
It detects tooltip placement to avoid edge clipping, respects reduced-motion preferences, is SSR-safe with a clear unsupported fallback, and exposes colors, size, locale, and the full command list as property controls.
I would welcome feedback on the interaction model.
