REFERENCE
- Gallery page: https://magpui.com/en/i/exploded-metallic-card-layers-1f6b1d
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/exploded-metallic-card-layers-1f6b1d/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/exploded-metallic-card-layers-1f6b1d/clip.mp4
- Original post: https://x.com/shedsgns/status/2112973721011208264 by @shedsgns
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 self-contained animated material breakdown of a silver payment card. Begin with a face-on card, tilt it into an oblique view, separate its surface into six thin planes with small labels, then collapse it and return to the front. Keep the scene quiet and spacious.
DESIGN SYSTEM: Use an off-white #F4F4F3 stage and a 340 by 214px card with 14px corners. Layer a #B9BABB base, fine horizontal brushed texture, a broad diagonal #FFFFFF sheen, inset edge highlight, thin border, and engraved placeholder typography. Keep most overlays around 3–10% opacity. Use 10–12px neutral sans-serif annotations in #727473, 14px spaced monospace sample digits, and a small muted gold #B9A85C chip. Add a soft ambient shadow, not a heavy drop shadow.
MOTION: Suggested reconstruction timing: on entry hold 700ms, tilt from front to rotateX(52deg) rotateZ(-24deg) over 900ms using cubic-bezier(0.22,1,0.36,1). Expand the six planes along local Z by 22px increments over 1100ms with 60ms stagger. Fade small labels in over 300ms after expansion. Hold 1400ms, collapse over 1000ms, then restore the frontal view over 800ms with the same easing. Pause before replay.
SECTIONS: Assembled face with generic digits and chip; tilted stack; expanded planes with labels for base, brushed texture, sheen, inner highlight, border and engraving; reassembled card. Keep labels outside the stack with ample clearance.
IMPLEMENTATION: Use CSS perspective and preserve-3d for the planes, SVG or procedural noise for brushed grain, and GSAP for the reversible timeline. Do not rasterize text. Animate transforms and opacity only; keep the scene to six main planes. Offer a keyboard-focusable replay button with visible focus. For prefers-reduced-motion show the static expanded view and labels instead of looping.
ADAPT TO THE PROJECT: Reuse existing design tokens, components and fonts. Map these estimated colors to the closest project tokens. Never copy logos, brand names, photos or illustrations; use generic placeholder card details.
SUCCESS CHECK:
- Six individually readable planes form one aligned card when collapsed.
- The brushed finish and broad sheen remain subtle and metallic.
- Replay is keyboard accessible and reduced motion removes the loop.
