REFERENCE
- Gallery page: https://magpui.com/en/i/invite-chips-become-member-avatars-e65f81
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/invite-chips-become-member-avatars-e65f81/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/invite-chips-become-member-avatars-e65f81/clip.mp4
- Original post: https://x.com/dev_ya/status/2113630311066251271 by @dev_ya
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: Build a small file-sharing card where entered email addresses become removable chips, then morph into circular member initials after invitation. Support Undo that returns newly invited members to the input.
DESIGN SYSTEM: Center a white card about 400px wide with 20px padding, 22px radius and a soft low-opacity shadow over #f1f2ee. Use a neutral sans-serif, 15px medium title and 12px muted helper. Place three overlapping pastel initials at left in a member row, count at right. Bottom row contains a rounded outlined email field and an 88px dark #191919 Invite button. Chips use pale fills #edf7ee and #fff2df, small initial circles and compact email labels. Input height about 42px; gap 8px.
MOTION: On email confirmation reveal a chip with 160ms opacity and scale from .96 using cubic-bezier(0.2,0.8,0.2,1). On Invite move each chip initial to its destination in the avatar row using shared layout, shrink the surrounding label, and update count. Suggested travel 500ms, 60ms stagger, cubic-bezier(0.22,1,0.36,1). Crossfade button label to Invited with a check over 180ms. Undo reverses the shared layout journey over 450ms. These timings are rebuild targets.
SECTIONS: Title and edit-permission helper; existing members and count; editable email field; chips with remove controls; disabled empty Invite, active Invite and completed Invited states; Undo action inside the cleared field. Keep entered emails intact when undoing.
IMPLEMENTATION: Use React state and Motion shared layout IDs for each initial, AnimatePresence for labels and chip removal. Validate addresses, allow Enter and comma to commit, and prevent duplicate invitations. Announce success and count with aria-live. Provide keyboard buttons and focus outlines. Under prefers-reduced-motion replace travel with immediate layout updates and a short fade; avoid animating the entire page.
ADAPT TO THE PROJECT: Reuse existing design tokens, components and fonts. Map colors to the nearest existing tokens. Never copy source logos, brand names, photos or illustrations; use placeholders.
SUCCESS CHECK:
- All controls work with keyboard and visible focus.
- State changes remain legible at narrow widths.
- Reduced motion removes travel without hiding information.
