REFERENCE
- Gallery page: https://magpui.com/en/i/emoji-reactions-that-fly-afa3de
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/emoji-reactions-that-fly-afa3de/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/emoji-reactions-that-fly-afa3de/clip.mp4
- Original post: https://www.rareui.com/components/emojireaction 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 reaction picker: a round close button opens a dark pill with five emoji. Clicking one throws a copy upward with a random arc and spin, while the picked emoji does a quick squash in place.
DESIGN SYSTEM
- Background #121212; pill #1F1F1F radius 999px, emoji 26px with 6px gap; close button 28px circle #2A2A2A with an X.
- Hint text 11px #6B6B6B.
MOTION
- Open: pill scales from 0.6 and blurs in, emoji stagger 30ms with spring.
- Hover: emoji lifts 4px and scales 1.2.
- Pick: the copy flies up 300-500px with a curved path (x drift ±60px), rotates up to 360deg, scales 1 to 1.6 and fades out over 1.1s; the original squashes scaleY 0.8 then back.
SECTIONS
- Toggle button, emoji pill, flying copies layer.
- States: closed, open, emoji hover, thrown.
IMPLEMENTATION
- Motion for the pill and keyframes for the flying copies (absolute layer, removed after the animation).
- 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
- Each click throws a new emoji on a different path.
- Spamming clicks never blocks the UI.
- The picker is a group of buttons with aria-labels.
