REFERENCE
- Gallery page: https://magpui.com/en/i/dot-matrix-voice-orb-19ab46
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/dot-matrix-voice-orb-19ab46/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/dot-matrix-voice-orb-19ab46/clip.mp4
- Original post: https://www.rareui.com/components/matrixorb by Rare UI
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 assistant status indicator made of a circular grid of dots on black. Three states switch with a small segmented control: Idle (slow breathing), Listening (rings ripple outward with the voice level), Thinking (a bright spot orbits and the dots behind it trail).
DESIGN SYSTEM
- Background #0E0E0E; about 15x15 dots in a circle, 4px each, color #FF4D1A with brightness from 20% to 100%.
- State label 11px #8A8A8A; segmented control dark pill, active segment #2A2A2A text white.
MOTION
- Idle: all dots scale 0.8-1 on a 3s sine.
- Listening: brightness = sin(distance*8 - t*6) mapped to 30-100%, amplitude follows mic level.
- Thinking: a hotspot circles at 1 turn/1.2s, dots light up by distance to it with a 300ms falloff.
- State change crossfades over 300ms.
SECTIONS
- Dot grid, state label, segmented control.
- States: idle, listening, thinking.
IMPLEMENTATION
- Canvas 2D drawing all dots each frame (cheap) or CSS variables per dot; Web Audio analyser for real mic level, a fake sine otherwise.
- prefers-reduced-motion: swap the motion for a 150ms opacity change.
- Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense.
- Animate only transform, opacity and filter.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders.
SUCCESS CHECK
- The three states are clearly different at a glance.
- Switching states does not jump.
- Runs at 60fps on a laptop.
