REFERENCE
- Gallery page: https://magpui.com/en/i/deposit-banner-and-rolling-balance-6c1cf0
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/deposit-banner-and-rolling-balance-6c1cf0/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/deposit-banner-and-rolling-balance-6c1cf0/clip.mp4
- Original post: https://x.com/Hollysem/status/2112523746489798727 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: Build only a mobile wallet balance header with an incoming-deposit notification and rolling total, not a full banking app or phone mockup. A white header briefly becomes a rounded dark notification panel with a small sender icon and deposit amount; the monetary value then rolls to the updated spendable balance.
DESIGN SYSTEM: Use a fluid container up to 360px wide and a header about 240px tall, with 20px horizontal padding. Center a 12px muted gray balance label above a 32px medium-weight neo-grotesk monetary value with tabular numerals. Use white #FAFAF9, near-black #101111, muted gray #959694 and a pale green #89D8A0 status accent. The dark notification surface has approximately 30px lower corner radii and a subtle blue or pink glow near its bottom depending on sender. A 28px circular sender mark sits above a 12px sender label and 28px deposit figure. Keep Add funds and Send actions in a two-column row below the header, with pill-shaped controls about 40px tall.
MOTION: On a supplied deposit event, reveal the dark panel with a top-origin translateY from -24px and opacity from 0 over 280ms, easing cubic-bezier(0.22,1,0.36,1). Hold the sender and incoming amount for about 700ms. Transition into the balance view over 450ms using an opacity crossfade and a subtle vertical shift. Roll changed digit columns upward in clipped one-line windows over 650ms with 40ms column stagger and cubic-bezier(0.16,1,0.3,1); unchanged digits and currency punctuation remain stable. Fade the panel back to white over 350ms after the digit roll starts. These timings are reconstruction targets, not measured original values.
SECTIONS: Idle: spendable label, current balance, small green status line and two actions. Deposit: circular sender placeholder, sender name and a positive amount on the dark surface. Updating: clipped digit reels move toward the new total. Complete: restore the white header and updated balance. Demonstrate two separate +$100.00 events, taking $2,450.00 to $2,550.00 and then $2,650.00, without replaying automatically in production.
IMPLEMENTATION: Use React and Motion for sequencing the panel and transform-based digit reels. Store amounts in integer cents. Reserve fixed numeral widths to prevent layout shifts, hide visual digit reels from assistive technology and expose one formatted accessible balance. Announce the deposit once via a polite live region. Queue events instead of interrupting updates. Use CSS gradients for the glow; no canvas or 3D needed. Actions are keyboard-accessible buttons with visible 2px focus rings; only add a subtle 0.98 pressed scale. With prefers-reduced-motion, replace reels and sliding with an immediate number update and a short opacity change. Animate transforms and opacity, keep reel nodes bounded and remove inactive content.
ADAPT TO THE PROJECT: Reuse existing tokens, buttons, spacing and fonts. Map estimated colors to the nearest existing tokens. Never copy source logos, brand names, avatars, photos or illustrations; use geometric sender placeholders and generic labels.
SUCCESS CHECK:
- Two +$100.00 events produce exactly $2,650.00 from $2,450.00, with stable punctuation and no width jump.
- The deposit panel, rolling digits and restored white header form one readable sequence without moving the action row.
- Reduced-motion and keyboard users receive the same final value and deposit information without duplicate screen-reader announcements.
