REFERENCE
- Gallery page: https://magpui.com/en/i/voice-glow-for-agent-uis-4c51d5
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/voice-glow-for-agent-uis-4c51d5/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/voice-glow-for-agent-uis-4c51d5/clip.mp4
- Original post: https://x.com/Jakubantalik/status/2100620796796502264 by @Jakubantalik
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A voice mode panel: dark rounded container with a mode pill, mic and close buttons, and an animated gradient glow hugging its bottom edge that reacts to listening, thinking and speaking states.
DESIGN SYSTEM
- Panel #0D0D0D, 28px radius; buttons 32px circles #1C1C1C.
- Glow: blurred blobs of #8B5CF6, #2DD4BF, #F472B6 at 60% opacity, blur 40px.
MOTION
- Listening: blobs drift slowly along the edge (8s loop), intensity follows mic volume.
- Thinking: glow narrows to a moving highlight that sweeps left to right, 1.4s.
- Speaking: blobs pulse with output amplitude, scale 0.9 to 1.2.
SECTIONS
- Mode pill.
- Mic and close buttons.
- Glow layer.
IMPLEMENTATION
- Pure CSS gradients and filters animated via CSS variables, no dependencies; read volume with an AnalyserNode.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- Each state is visually distinct.
- Idle CPU near zero (CSS animations only).
- Works in light theme by switching blend mode.
