REFERENCE
- Gallery page: https://magpui.com/en/i/bento-cards-linked-by-a-swooping-path-e04f6e
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/bento-cards-linked-by-a-swooping-path-e04f6e/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/bento-cards-linked-by-a-swooping-path-e04f6e/clip.mp4
- Original post: https://x.com/emblemo/status/2095421153716158947 by @emblemo
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 services bento grid of four colored cards (Product UI and web, Icons, Illustrations, AI design setup). A thick white path draws itself through the cards in a loop; when it reaches a card, that card's small illustration animates.
DESIGN SYSTEM
- Cards: coral #FF8A65, pink #F9A8D4, yellow #FBBF24, lavender #A78BFA; 18px radius; title 13px bold, text 10px.
- Path 18px stroke white, round caps.
MOTION
- Path draws with stroke-dashoffset over 3s ease-in-out on scroll into view.
- Card illustrations animate with 150ms delay when the path head passes (scale, rotate, or pattern shift).
- Optional loop: path erases and redraws every 6s.
SECTIONS
- Four cards in a bento layout.
- SVG path overlay.
IMPLEMENTATION
- GSAP with MotionPathPlugin or DrawSVG; the path is one SVG over the grid, recomputed on resize.
- 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
- The path always lines up with the cards at every breakpoint.
- Text stays readable over the path.
- On mobile the path simplifies to a vertical line.
