REFERENCE
- Gallery page: https://magpui.com/en/i/confidential-folder-opens-in-perspective-8f9e1b
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/confidential-folder-opens-in-perspective-8f9e1b/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/confidential-folder-opens-in-perspective-8f9e1b/clip.mp4
- Original post: https://x.com/AdityaSur11/status/2113095498575810588 by @AdityaSur11
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 small interactive confidential-document folder, not a full page. A vivid blue cover opens in perspective to reveal a white note, then closes on pointer exit.
DESIGN SYSTEM: Use an approximately 180 by 220px folder on a cream #F4EADD field. Blue #3059CB rounded panels, 10px corners, a white paper inset by 14px, tiny 10px monospaced cover labels and compact 12px dark note text. A small white decorative mark sits at top left.
MOTION: On hover or focus, rotate the cover around its left edge from 0 to approximately -150deg over 650ms, cubic-bezier(0.22,1,0.36,1). Translate the note right by 130px over 550ms with 80ms delay; allow gentle perspective tilt. Reverse smoothly on exit, including interrupted transitions. These timings are reconstruction targets.
SECTIONS: Back panel, hinged front cover, inner paper, small cover label. States: closed, opening, revealed, closing.
IMPLEMENTATION: Use CSS perspective and transform-style preserve-3d with Motion for reversible state transitions. Keep text on its own plane, use backface visibility intentionally, and animate transforms only. Make the folder a keyboard-accessible toggle with visible focus and aria-expanded. Reduced motion uses an immediate flat reveal.
ADAPT TO THE PROJECT: Reuse existing tokens, components and fonts; map colors to the nearest project tokens. Never copy original logos, brand names, photos or illustrations; use placeholder note text and a simple geometric mark.
SUCCESS CHECK:
- Cover hinges at its edge without detaching.
- Paper remains legible and never clips when revealed.
- Pointer exit, keyboard toggle and reduced motion all work.
