REFERENCE
- Gallery page: https://magpui.com/en/i/stacked-tags-that-spread-on-hover-3e7b8a
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/stacked-tags-that-spread-on-hover-3e7b8a/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/stacked-tags-that-spread-on-hover-3e7b8a/clip.mp4
- Original post: https://x.com/gabriell_lab/status/2117611847805272267 by @gabriell_lab
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 task list group ('In Progress') where each row shows an issue title on the left and a cluster of metadata pills on the right: priority, due date, a label and the assignee. At rest the pills are stacked and overlap each other like a deck of cards, so only a sliver of each shows and the title keeps its full width. When the pointer enters a row, that row's pills spread apart into full, readable tags, pushing over the end of the title, which truncates with a fade; when the pointer leaves they collapse back into the stack. It should feel quiet, tidy and tactile.
DESIGN SYSTEM: Background near black #0B0B0B. Group header 'In Progress' 13px/500 #6E6E6E with a small chevron at left, 24px above the rows. Rows 34px tall, width about 300px for the title area plus the tag cluster, no row dividers. Leading status icon: 12px ring in yellow #F5C518 with a small filled center. Title 14px/500 #EDEDED, single line, ellipsis or a right-edge mask fade. Pills: height 22px, radius 11px, background #2A2A2A, 1px inner border rgba(255,255,255,0.06), text 11.5px/500 #D8D8D8, icon 11px #A0A0A0, padding 0 8px, a 1px ring of the page color around each pill so overlaps read as separate layers. Pill content examples: signal-bars icon + 'High' or 'Medium', calendar icon + 'Mar 31', a 7px red dot #F0334A + 'Infra', person icon + assignee first name. Stacked state: each pill overlaps the previous by about 70% of its width (negative margin about -22px), later pills on top, earlier pills clipped so only the icon and first letters show. Spread state: 6px gap between full pills.
MOTION: Row hover in: pills translate from their stacked x to their spread x with a spring (stiffness 500, damping 38), staggered 25ms from the rightmost pill leftwards, each pill's clipped width expanding to its natural width over the same spring; the title's right mask moves left at the same time so it truncates smoothly. Hover out: reverse with 0ms stagger and a slightly softer spring (stiffness 420, damping 40). Moving quickly between rows hands off cleanly: one row collapses while the next spreads, no jumps. Optional: a faint row background #151515 fades in over 120ms on hover.
SECTIONS: Parts: group header with chevron, row (status icon, title, tag cluster), pills (priority, date, label with colored dot, assignee). States: rest (stacked), hover or focus-within (spread), keyboard-focused row (2px focus ring #3A3A3A radius 8px), long titles (truncate further on spread).
IMPLEMENTATION: React with Motion: give each pill a layout animation or animate x and a clip width (clip-path inset or max-width) between two measured states; measure natural pill widths once with a ResizeObserver. Pure CSS also works with flex gap and negative margins transitioned on :hover and :focus-within using a linear() spring approximation. Trigger on hover and on focus-within so keyboard users get the spread; each pill keeps its full text in an aria-label. prefers-reduced-motion: switch states instantly or with a 100ms opacity crossfade. Animate only transform, clip-path and opacity; avoid animating width on every row of long lists.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components, icon set and fonts; map the colors above to the closest existing tokens. Never copy logos, brand names or product names from the original: use placeholder task titles, labels and names.
SUCCESS CHECK:
- At rest every row shows its pills stacked and overlapping, and the full title is readable.
- Hovering or tabbing into a row spreads its pills into full tags with a springy stagger and collapses them on leave.
- It works with the keyboard and respects prefers-reduced-motion.
