REFERENCE
- Gallery page: https://magpui.com/en/i/agent-cards-with-expanding-marks-29660c
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-cards-with-expanding-marks-29660c/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-cards-with-expanding-marks-29660c/clip.mp4
- Original post: https://x.com/indurajaditya/status/2110732426062549318 by @indurajaditya
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 four-card agent selector, not a full page. Its resting arrangement resembles a loose hand of slightly overlapping white cards. Selecting one isolates it and expands its colorful geometric emblem into a full-card motif; closing restores the hand.
DESIGN SYSTEM: Use a light gray #F6F6F6 surrounding surface. Each white card is approximately 145 by 200px with 12px corners and a restrained diffuse shadow. Place a 56px circular segmented SVG emblem near the top and a short name plus one muted role line at the bottom. Use neutral sans-serif type, 16px semibold names and 10px supporting labels. Emblem colors: cyan #19B7C2, magenta #D82C95, orange #EE7119 and purple #A333E4. Fan cards with about 100px horizontal offsets and rotations between -5 and 5 degrees. Expanded card remains portrait and shows a large cropped tone-on-tone version of its emblem, small white text below and a dark circular close button at top right.
MOTION: Treat timings as implementation targets. On select, move the chosen card toward the center and straighten it over 420ms with cubic-bezier(0.22,1,0.36,1); fade and translate neighboring cards away over 220ms. Expand the selected emblem from 56px to roughly 300px over 520ms using the same easing, clipping it within the card while filling the surface with its base hue. Fade detail text in after a 160ms delay over 200ms. Close reverses the transformation over 450ms and restores each card's fan position.
SECTIONS: Resting hand: four independent labeled card buttons. Selected: one colored detail card with oversized geometric pattern, compact description and close control. Returning: original positions and text restored without a layout jump.
IMPLEMENTATION: Use React and Motion shared-layout transitions with stable IDs, plus simple segmented SVG paths for emblems. Animate transforms and opacity, clipping the scaled emblem inside the card; no image assets needed. Allow selection with Enter or Space, close with Escape, restore focus to the selected trigger, and show visible focus rings. Honor prefers-reduced-motion with immediate geometry changes and a short opacity fade. Keep only four cards mounted and avoid continuous animation.
ADAPT TO THE PROJECT: Reuse existing design tokens, components and fonts. Map these estimated colors to the nearest existing tokens. Never copy original logos, brand names, photos or illustrations; use original geometric placeholder marks and sample names.
SUCCESS CHECK:
- Selecting any card expands that card's emblem and color rather than opening an unrelated overlay.
- Closing restores the same four-card arrangement without jumping.
- Keyboard selection, Escape, restored focus and reduced-motion mode work.
