REFERENCE
- Gallery page: https://magpui.com/en/i/folder-with-peeking-papers-fcecac
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/folder-with-peeking-papers-fcecac/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/folder-with-peeking-papers-fcecac/clip.mp4
- Original post: https://www.rareui.com/components/foldercomponent by Rare UI
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 large folder icon in glossy black with a frosted front pocket. Hovering lifts three sheets of paper out of the top; they rotate apart slightly. Pressing squashes the folder a little. Leaving tucks them back in.
DESIGN SYSTEM
- Background #EDEDED; folder 220x170, back panel #0E0E0E radius 18px, front pocket translucent (backdrop blur 10px, rgba(255,255,255,.12)) with a top highlight.
- Papers white with grey text lines, radius 6px.
MOTION
- Hover: papers translateY -40/-50/-45px and rotate -6/0/6deg, spring (300/20), stagger 40ms.
- Press: folder scaleY 0.96 for 120ms.
- Leave: papers drop back in reverse with a slight bounce.
SECTIONS
- Back panel, 3 papers, front pocket.
- States: idle, hover, pressed, focus.
IMPLEMENTATION
- Plain CSS/Motion transforms; the front pocket overlaps the papers (z-index) so they look inside.
- 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
- Papers rise and fan out only on hover/focus.
- No layout shift around the folder.
- Works as a focusable link or button.
