REFERENCE
- Gallery page: https://magpui.com/en/i/invite-code-reveal-with-copy-64d557
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/invite-code-reveal-with-copy-64d557/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/invite-code-reveal-with-copy-64d557/clip.mp4
- Original post: https://x.com/nitishkmrk/status/2103061978680086905 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
An invite code component: a soft pill with a dashed inner border reading Your Invite Code. Tapping it expands into a second state that shows the code in bold with a green Copy button; copying turns the button into a check.
DESIGN SYSTEM
- Background #F2F2F2. Pill 320x56, white, 28px radius, dashed 2px #E5E5E5 inner border, label 16px #A3A3A3.
- Code 22px bold #111, Copy button green #22C55E, white bold text, 20px radius.
MOTION
- Reveal: pill height and content animate with layout transition 350ms cubic-bezier(0.34, 1.56, 0.64, 1); code letters fade up with 20ms stagger.
- Copy: button scales 0.94 then morphs to a check with a 200ms crossfade; returns after 1.5s.
SECTIONS
- Idle pill.
- Revealed row: code + Copy.
IMPLEMENTATION
- Framer Motion layout; navigator.clipboard with a visible fallback; aria-live announces Copied.
- 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
- Code is selectable text.
- Copy works on iOS Safari.
- Collapsed and expanded states keep the same width.
