Motion

Avatar status picker on hover

Hover a contact avatar and colored status buttons fan out; pick one and it snaps back into a small badge.

Industries: communication
Colors: light greygreenyelloworange
Styles: softplayfulrounded
Category: avatarmicrointeraction

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.

1
Install the skill
Run these commands once in Claude Code. The skill gives the agent know-how for this kind of piece. With other agents, follow the instructions on the skill page.
frontend-design
```
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
2
Paste the prompt in your agent
Hit Copy prompt above, open your project in the agent and paste it. The prompt links the original frames, so the agent can look at them before building.
Claude Code Codex
Uses
Motion
3

Compare with the original

Put the two side by side. If something is off, tell the agent exactly what: timing, size, color or spacing.

Install the skill

Paste the prompt in your agent

Compare with the original