REFERENCE
- Gallery page: https://magpui.com/en/i/faq-accordion-that-answers-anything-5d44e2
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/faq-accordion-that-answers-anything-5d44e2/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/faq-accordion-that-answers-anything-5d44e2/clip.mp4
- Original post: https://x.com/heyimgustavo/status/2100728786694136224 by @heyimgustavo
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
An FAQ section with a title column on the left and an accordion on the right. The last row is an input: typing a question and pressing Enter streams an AI answer into a new expanded row.
DESIGN SYSTEM
- Background #0C0C0C, title 18px white, small grey intro.
- Rows 44px, 1px #1F1F1F dividers, question 13px #D4D4D4, plus icon right.
MOTION
- Accordion: height animates 250ms cubic-bezier(0.2, 0.8, 0.2, 1), icon rotates to minus.
- Streaming answer: tokens appear with a 120ms fade; a 6px pulsing dot shows while waiting.
SECTIONS
- Title column.
- Preset questions.
- Ask input row and streamed answer.
IMPLEMENTATION
- Native details/summary for preset rows; a server route that streams from your model; render with aria-live polite.
- 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
- Presets work without JavaScript.
- Streaming never jumps the scroll position.
- Enter submits, Escape clears.
