REFERENCE
- Gallery page: https://magpui.com/en/i/frosted-glass-folder-icon-0858eb
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/frosted-glass-folder-icon-0858eb/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/frosted-glass-folder-icon-0858eb/clip.mp4
- Original post: https://x.com/alex_barashkov/status/2112171007465103548 by @alex_barashkov
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 hero-size folder icon that loops between closed and open. The back panel is a solid blue gradient; the front panel is frosted glass with a progressive blur (sharp at the top edge, strongest at the bottom) so the back panel glows through.
DESIGN SYSTEM
- Background #F4F6FC. Back panel gradient #4F8BFF to #2F6BF0, 14px radius.
- Front panel: rgba(140,170,255,.35) with backdrop-filter blur stacked in 4 bands (2, 6, 12, 20px) masked with linear gradients.
- Soft colored shadow under the icon: 0 30px 60px rgba(80,120,255,.35).
MOTION
- Open: front panel rotates on X around its bottom edge to -18deg, 900ms, cubic-bezier(0.34, 1.56, 0.64, 1).
- Close: back to 0deg, 700ms, ease-in-out. Loop with 600ms pauses.
SECTIONS
- Back panel with tab.
- Frosted front panel.
- Ground shadow.
IMPLEMENTATION
- Pure CSS: layered divs with backdrop-filter and mask-image for the progressive blur; or a pre-rendered video if backdrop-filter is unavailable.
- 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
- The blur visibly increases toward the bottom of the front panel.
- The hinge sits at the bottom edge.
- Looks crisp on a 2x display.
