REFERENCE
- Gallery page: https://magpui.com/en/i/avatar-status-picker-on-hover-99ea51
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/avatar-status-picker-on-hover-99ea51/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/avatar-status-picker-on-hover-99ea51/clip.mp4
- Original post: https://x.com/nitishkmrk/status/2096487561581498558 by @nitishkmrk
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 large round avatar that, on hover or focus, fans out three status buttons (available, focus, do not disturb) along an arc at its top right; choosing one flies the button into the avatar's corner as a badge.
DESIGN SYSTEM
- Background #F4F4F4, avatar 96px with 3px white ring.
- Status buttons 32px circles: green #22C55E, yellow #FACC15, orange #F97316, white icons; tooltip pill above the hovered one.
MOTION
- Fan out: buttons translate from the avatar corner along a 60deg arc, spring (stiffness 500, damping 26), 40ms stagger.
- Hover a button: scale 1.12 and show tooltip (fade + 4px rise, 150ms).
- Select: chosen button shrinks to 18px and moves to the badge spot (layoutId shared transition, 350ms); others collapse back.
SECTIONS
- Avatar.
- Arc of status buttons.
- Badge.
IMPLEMENTATION
- Framer Motion layoutId between button and badge; radio group semantics with arrow keys.
- 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
- The badge color always matches the last choice.
- Leaving the avatar collapses the fan within 200ms.
- Works with keyboard only.
