REFERENCE
- Gallery page: https://magpui.com/en/i/wallet-sheet-with-spinning-3d-coins-afdadd
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/wallet-sheet-with-spinning-3d-coins-afdadd/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/wallet-sheet-with-spinning-3d-coins-afdadd/clip.mp4
- Original post: https://x.com/Hollysem/status/2109628383156170792 by @Hollysem
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 mobile wallet 'Add money' bottom sheet: at the top a horizontal row of coin icons (flags and crypto logos) that spin continuously in 3D like coins on a table; below, two option rows (receive cash, receive crypto) and onboarding screens.
DESIGN SYSTEM
- Sheet #FFFFFF, 28px top radius, over a dimmed balance screen.
- Coins 56px, metallic edge #D9D9D9, faces with placeholder flag/crypto art.
- Rows 64px with 12px radius, title 15px semibold, caption 12px grey, chevron right.
MOTION
- Coins rotate on Y continuously, 2.4s per turn, linear, each offset by 0.15s so the row ripples.
- Sheet opens with a spring from the bottom (stiffness 380, damping 34); content fades in 150ms after.
- Row press: scale 0.98 for 100ms.
SECTIONS
- Balance screen.
- Add money sheet: coins, title, two options.
- Onboarding steps with progress dots.
IMPLEMENTATION
- CSS 3D (rotateY with backface-visibility) for coins, or a short pre-rendered loop if many.
- 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
- Coins never stop or stutter.
- Sheet can be dragged down to close.
- Rows are buttons with visible focus.
