REFERENCE
- Gallery page: https://magpui.com/en/i/liquid-storage-bar-cd4591
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/liquid-storage-bar-cd4591/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/liquid-storage-bar-cd4591/clip.mp4
- Original post: https://x.com/alimdesigner_/status/2111076529421635891 by @alimdesigner_
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 dark settings card 'Storage — 38.2 of 50 GB' with a horizontal bar split into colored sections (Apps, Photos, iOS, System Data, Cache). Hovering a section makes its surface wobble like liquid and the section swells slightly; the others dim and the header shows that section's name and size. A 'Clean up' button shrinks the Cache section with a slosh.
DESIGN SYSTEM
- Card 520x150 on #111, background #1A1A1A, radius 14px.
- Bar 22px high, radius 11px; colors Apps #3B82F6, Photos #EAB308, iOS #6B7280, System #9CA3AF, Cache #EF4444.
- Labels 11px with colored dots; header 15px white, sub 12px #8B8B8B.
MOTION
- Hover: the section's top edge becomes a sine wave (amplitude 3px, travelling 1.2s) and its height grows to 28px; others opacity 0.35, 200ms.
- Moving between sections: the wave hands over with a 120ms delay, like liquid flowing.
- Clean up: Cache width animates to 0 with a spring (overshoot 4%), then the remaining sections slosh for 600ms.
SECTIONS
- Header (title, total, hovered section), bar, legend, Clean up button with undo.
- States: idle, hover section, cleaning, cleaned (Undo).
IMPLEMENTATION
- SVG path per section with an animated wave (update path d via requestAnimationFrame) or a canvas; Motion for widths.
- Keep the bar accessible as a list of sections with sizes.
- prefers-reduced-motion: swap the motion for a 150ms opacity change.
- Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense.
- Animate only transform, opacity and filter.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders.
SUCCESS CHECK
- Hovering a section wobbles only that section and shows its size.
- Clean up removes Cache with a liquid settle and Undo brings it back.
- Sizes are readable without hovering (legend).
