REFERENCE
- Gallery page: https://magpui.com/en/i/stock-pill-expands-into-chart-a0f00e
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/stock-pill-expands-into-chart-a0f00e/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/stock-pill-expands-into-chart-a0f00e/clip.mp4
- Original post: https://x.com/alexabraham/status/2117327926580625417 by @alexabraham
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 stock quote pill that expands into an interactive market chart card. Preserve visual continuity between the compact identity row and the expanded header. Use fictional data and a generic circular symbol.
DESIGN SYSTEM: Approximate rebuild targets: collapsed 300 by 52px, expanded 300 by 270px, 16px radius, 14px internal padding. Dark charcoal #171918 surface against a transparent host, white #F3F5F4 labels, muted #858D89 metadata, green #42BD90 chart and positive change. Use a neutral sans serif, 13px labels, 11px metadata, 22px price with tabular numerals. Collapsed state places a 30px identity disc left, two lines of text, then a small sparkline right. Expanded state has identity and expand/collapse control at top, price and change below, then a large line chart with a faint green gradient fill. Footer contains the current quote and a compact trade action.
MOTION: On activation morph width, height, radius and child positions over a suggested 420ms using cubic-bezier(0.22,1,0.36,1). Fade expanded metadata and footer over 180ms after 90ms. On pointer scrub move a thin vertical guide and point immediately, update price and time to the nearest sample, and mute the unselected curve to gray. Interpolate numerical price changes over 100ms using cubic-bezier(0.2,0,0.2,1). Collapse reverses the shared layout transition over 350ms without jumping the identity row. These timings are implementation targets.
SECTIONS: Idle pill with identity, quote, percentage and sparkline; expanded card with header, large quote, timestamp, area chart and footer; scrub state with selected point and guide, green historical portion and muted remainder; collapsed return. Negative values use a restrained red accent and explicit sign.
IMPLEMENTATION: Use React and Motion layout transitions for the shared shell and SVG for the chart, fill and clipping. Use one fixed data array and a single nearest-point calculation on pointer movement; avoid remounting the chart on every move. Provide a semantic toggle with aria-expanded and a keyboard-operable chart slider with arrow keys, Home and End. Add visible focus rings and a text summary of the selected value. With prefers-reduced-motion switch layouts instantly and disable number tweening. Keep chart under 200 samples and animate transforms/opacity where possible.
ADAPT TO THE PROJECT: Reuse existing tokens, components and fonts; map these estimated colors to the closest project tokens. Never copy original logos, brand names, photos or illustrations; use placeholders.
SUCCESS CHECK:
- Expansion and collapse preserve the identity row without a flash or jump.
- Scrubbing synchronizes the guide, selected price, time and highlighted curve.
- Keyboard users can expand, inspect chart samples and collapse; reduced motion works.
