REFERENCE
- Gallery page: https://magpui.com/en/i/accordion-with-detached-answer-cards-f4dd78
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/accordion-with-detached-answer-cards-f4dd78/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/accordion-with-detached-answer-cards-f4dd78/clip.mp4
- Original post: https://x.com/sucodeee/status/2112558878885851227 by @sucodeee
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 dark FAQ accordion where the selected question separates from the surrounding stack into its own softly illuminated answer card. Only one answer is open at a time.
DESIGN SYSTEM: Use a roughly 310px wide stack on #191914. Five rows, 44px collapsed height, 14px sans-serif text, small muted outline icons left and a plus right. Text #eeeeea, secondary text #92928c. Surfaces #20211c, 10px outer radii, thin #34362e borders. The open card gains about 12px vertical separation from adjacent groups and a diffuse pale edge glow.
MOTION: On click animate answer height and surrounding layout over 320ms using cubic-bezier(.22,1,.36,1). Fade answer opacity over 180ms after 60ms. Rotate the plus 45 degrees over 200ms. Animate card separation and border brightness together. Reverse smoothly when another row opens. Timings are reconstruction targets.
SECTIONS: Five collapsed question buttons with leading icons. Active row includes a short answer beneath its label; inactive rows remain grouped above and below. Hover gives a restrained lighter fill. Focus uses a visible outline.
IMPLEMENTATION: Use semantic heading buttons with aria-expanded and aria-controls. Use Motion layout transitions and a clipped height wrapper; avoid scaling text. Keep answer content mounted for accessible relationships. Support Enter and Space. Reduced motion switches state immediately with no layout tween. Avoid full-page blur and keep glow local to the active card.
ADAPT TO THE PROJECT: Reuse existing design tokens, components and fonts. Map colors to closest tokens. Never copy logos, brand names, photos or illustrations; use placeholder questions and icons.
SUCCESS CHECK:
- Active question visibly separates without changing stack width.
- Switching answers keeps neighboring rows moving continuously.
- Keyboard access and reduced-motion fallback preserve all content.
