REFERENCE
- Gallery page: https://magpui.com/en/i/swipe-away-meetings-with-emoji-a61d24
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/swipe-away-meetings-with-emoji-a61d24/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/swipe-away-meetings-with-emoji-a61d24/clip.mp4
- Original post: https://x.com/desdivj/status/2111407045819912314 by @desdivj
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 compact mobile day-planner component with swipe-to-delete agenda rows, a celebratory emoji burst after deletion, and an expanding meeting detail panel. Keep it tactile and calm except for the moment of celebration. Do not build a full website or a decorative phone frame.
DESIGN SYSTEM: Use a 360px-wide responsive surface with 20px side padding, an off-white #F6F6F7 background, near-black #141414 text and pale gray #E9E9EC dividers. Put a small avatar and greeting at the top left and a short date on the right. Follow with a pink dot and day label, a bold 30px sans-serif two-line heading about free time, and an 11px muted summary. Use 14px event titles, 11px times, and 10px metadata. Agenda rows share a rounded 18px white container with 12px padding. A thin colored vertical marker separates each time from its event. Use pink #F6DDE0 for secondary actions and red #F45C6A for deletion.
MOTION: On horizontal drag, translate only the event content to expose a right-aligned red Delete action; snap back over 220ms with cubic-bezier(0.22,1,0.36,1) if not committed. On delete, move the row left and fade it over 180ms, then collapse its height over 240ms with cubic-bezier(0.4,0,0.2,1). Launch about 14 yellow face emoji from the agenda region with varied rotation and curved trajectories lasting 900-1500ms, staggered by 25ms; use cubic-bezier(0.16,1,0.3,1) for launch and gravity-driven fall. On meeting activation, expand a rounded detail surface from the event position over 320ms with cubic-bezier(0.22,1,0.36,1), softly blur the surrounding header, and reveal its people and actions with 40ms stagger. These timings are implementation targets.
SECTIONS: Compact greeting and date; day indicator and prominent free-time heading; agenda with meeting, walking habit and muted free-time row. Deletable rows expose a labeled trash action. Expanded meeting state shows time range, title, location metadata, short description, attendee avatar row, add-person options, a close button, and two bottom actions: a dark join button and pale pink cancel button. Updating participants updates the visible count. Closing returns to the same agenda context.
IMPLEMENTATION: Use React and Motion for drag gestures, layout transitions and shared layout expansion. Render emoji in an absolute pointer-events-none layer; animate transforms and opacity only and cap particles at 18. Use native emoji and placeholder avatars, no image-generation assets. Make deletion and expansion real state changes and include an accessible undo action. Expose a keyboard-accessible Delete button instead of requiring swipe, provide visible focus, Escape to close, focus containment in the dialog and focus return to the event. Under prefers-reduced-motion, suppress particles and blur animation and use immediate layout changes with a short fade.
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:
- Swiping exposes Delete without moving neighboring rows; deleting removes the event and updates the summary.
- Emoji celebrate deletion without blocking controls, and stop after their one-shot burst.
- Meeting details open and close from the selected row, preserve context, and work with keyboard and reduced motion.
