REFERENCE
- Gallery page: https://magpui.com/en/i/blue-cards-in-leather-wallet-fdee4b
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/blue-cards-in-leather-wallet-fdee4b/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/blue-cards-in-leather-wallet-fdee4b/clip.mp4
- Original post: https://x.com/JohnPhamous/status/2112955848805040275 by @JohnPhamous
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 standalone animated card wallet: two blue service cards rise from a dark stitched pocket, followed by a muted upcoming-services card. The feel is tactile, restrained and premium, not a whole landing page.
DESIGN SYSTEM: Use a roughly 340px wide wallet on a black background, scaled down responsively. The front pocket is about 200px tall with 20px rounded corners, charcoal #191919 shading, a fine gray outer edge and inset dashed stitching 9px from the edge. Cut a shallow centered thumb notch into its upper edge. Cards have 10px corners, deep blue #17569B and electric blue #1768F5 gradients, with 14px light sans-serif labels at the upper left and tiny placeholder metadata at the right. About 32px of each card remains exposed. Put a small neutral mark and label at the pocket's lower left. A dark third card carries a subdued upcoming-items label.
MOTION: On mount, start with cards tucked behind the pocket, with only blue visible through the notch. Translate the two blue cards upward around 70px over 700ms with 100ms stagger and cubic-bezier(0.22,1,0.36,1). Reveal the dark back card another 30px over 500ms after a 450ms delay. Settle without excessive bounce and hold the final stack. These are suggested reconstruction timings.
SECTIONS: Rear upcoming-items card; two overlapping blue cards; foreground pocket with notch, stitching and small caption. States are tucked, revealing and fully exposed.
IMPLEMENTATION: Use layered HTML/CSS surfaces and GSAP for one coordinated entrance timeline. Keep the pocket above the cards in stacking order; mask the lower card area so nothing protrudes below the wallet. Use CSS gradients and a subtle procedural noise overlay for material rather than heavy 3D. Animate transforms only. With prefers-reduced-motion show the final stack immediately. Decorative cards must not enter the tab order; if service selection is added, use buttons with visible focus outlines, accessible names and Enter/Space support.
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:
- The pocket stays still while the blue cards emerge behind it and remain visible through its notch.
- At rest, two blue headers and one muted back header are legible without overlapping labels.
- The wallet fits a 320px viewport and reduced-motion users see the completed stack without movement.
