REFERENCE
- Gallery page: https://magpui.com/en/i/fintech-bento-with-tiny-live-loops-6c3dba
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/fintech-bento-with-tiny-live-loops-6c3dba/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/fintech-bento-with-tiny-live-loops-6c3dba/clip.mp4
- Original post: https://x.com/zahragr8r/status/2117023377282281932 by @zahragr8r
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 3x2 bento grid of feature cards for a digital wallet, each card with a small animated illustration on top and a label, title and one-line description below. The illustrations loop quietly and continuously so the whole grid feels alive but calm; one saturated red accent is the only color besides greys.
DESIGN SYSTEM: Page background #EFEFEF. Cards #FFFFFF, radius 20px, no border, very soft shadow 0 1px 2px rgba(0,0,0,0.04); card about 290x270px, gap 32px, inner padding 18px. Illustration area takes the top 55% of the card. Neutral icon chips: 28px circles #F4F4F5 with a 1px #E7E7EA border and grey glyphs #9A9AA2. Accent #E0182D with a darker edge #B5101F and a soft red glow rgba(224,24,45,0.35). Small label 10px #6B6B73, title 15px semibold #111113, description 12px #7A7A82, sans-serif throughout.
MOTION: 1) Total balance: a red rounded-octagon money badge sits above a central shield node; thin grey lines connect it to 6 account chips; every 2.4s a red dot travels from each chip to the center along the lines (600ms, cubic-bezier(0.4,0,0.2,1), stagger 120ms) and the center node pulses scale 1 to 1.08 and back. 2) Quick pay: two contact chips on each side, a red glowing dot shoots left to right through a middle node (900ms, ease-in-out), loop every 1.8s. 3) Recent transactions: a 6x3 grid of empty light tiles; brand-like app icons pop into random tiles (scale 0.6 to 1, opacity 0 to 1, 300ms, cubic-bezier(0.34,1.56,0.64,1)) and fade out later, while a row of small round chips below highlights one red send icon. 4) Bill reminders: three list rows with toggles; a cursor arrow moves to each row and the toggle flips on to red (200ms) in sequence, then resets. 5) Rewards: a faded placeholder card above a row of small tiles; a cursor slides in and taps a red gift tile, which presses (scale 0.92, 120ms) and bounces back. 6) Security center: a red shield badge with a lightning glyph emits concentric thin red rings (scale 1 to 2.2, opacity 0.5 to 0, 1600ms, ease-out, every 800ms) over a stack of two grey cards with "All systems secure" and "2FA enabled" pills.
SECTIONS: Parts per card: illustration stage, label, title, description. States: idle loop; hover lifts the card 2px and brightens the accent glow; focus shows a 2px #111113 ring offset 2px.
IMPLEMENTATION: Build the illustrations as inline SVG plus HTML chips animated with Motion (Framer Motion) or CSS keyframes; use offset-path or a motion path for the travelling dots. Start loops only when the card is in view (IntersectionObserver) and pause them when offscreen. prefers-reduced-motion: show each illustration in its final state with no loops. Keep everything transform and opacity only for 60fps. Grid collapses to 2 columns on tablet and 1 on mobile.
ADAPT TO THE PROJECT: Reuse the project's design tokens, card component and fonts; map the red to the project's brand or danger accent. Never copy logos, brand names or app icons from the original; use neutral placeholder icons.
SUCCESS CHECK:
- Six cards render in a 3x2 grid with the same spacing and each has a distinct, seamless looping animation.
- Only one accent color is used and the motion never jumps when a loop restarts.
- Loops stop offscreen and under reduced motion, and cards are keyboard focusable.
CREDIT: Original work by Zahra (@zahragr8r), https://x.com/zahragr8r/status/2117023377282281932
