REFERENCE
- Gallery page: https://magpui.com/en/i/email-scanner-hit-rate-card-09e563
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/email-scanner-hit-rate-card-09e563/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/email-scanner-hit-rate-card-09e563/clip.mp4
- Original post: https://x.com/alixasssan/status/2115486815155343536 by @alixasssan
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 soft-UI card that visualizes email verification in real time. A thin glowing vertical scan line sits in the card; rows of email address chips scroll horizontally through it like a conveyor. When a chip crosses the line it gets a small green check badge, then the part of the row that has passed the line turns into blurred, empty placeholder strips. A small "Hit rate" pill at the top of the line shows a ring loader and a percentage that climbs from 0% to 80%. It should feel calm, precise and reassuring, like a quiet instrument working in the background.
DESIGN SYSTEM: Square card about 400x400px, radius 24px, background #ffffff on a page of #f3f4f6, soft layered shadow (0 1px 2px rgba(0,0,0,0.04), 0 20px 40px rgba(15,23,42,0.06)). Four rows of chips with about 16px vertical gap; each chip is a pill (radius 999px, height 30px, padding 0 14px) with a faint border #eef0f3 and white fill, text 13px sans-serif in #334155. Verified badge: 14px green circle #22c55e with a white check. Scan line: 2px wide, color #2dd4bf with a soft glow (box-shadow 0 0 12px rgba(45,212,191,0.6)), ends in a small round target icon button at the bottom (32px white circle with shadow and a crosshair glyph). Hit-rate pill at the top: white pill with shadow, 12px label in #64748b, a 12px ring spinner in teal, and the value in a tinted chip (#e6faf6 background, #0f766e text, tabular numbers). Passed area: chips are replaced by blurred light-gray strips (#eceff3, filter blur 2px, a subtle dotted texture), with the left edge fading out via a mask gradient.
MOTION: (1) Conveyor: rows move left at about 40px/s, each row offset in phase so chips never line up; linear easing, infinite. (2) Verify: when a chip's check point crosses the line, the badge pops in with scale 0 to 1 over 260ms, cubic-bezier(0.34,1.56,0.64,1). (3) Dissolve: about 300ms after crossing, the chip text and border fade out over 400ms while a blurred strip of the same width fades in, cubic-bezier(0.22,1,0.36,1). (4) Hit rate: counts from 0 to 80 over about 4000ms with ease-out cubic-bezier(0.16,1,0.3,1), synced so it grows as chips get verified, then holds at 80% while the ring keeps spinning (1000ms per turn, linear). (5) Scan line glow breathes between 0.6 and 1 opacity every 2000ms, ease-in-out.
SECTIONS: Card container; hit-rate pill (spinner, label, value); scan line with target button; four chip rows (states: incoming, crossing, verified with badge, dissolved strip). Component states: idle (line static, 0%), scanning, done (80%, conveyor keeps running slowly), hover on the target button (lift 2px, shadow grows).
IMPLEMENTATION: React with Framer Motion for the badge pops, counter and dissolve; drive the conveyor with a single requestAnimationFrame loop and transform: translateX on each row, computing each chip's x against the scan line to trigger its verify and dissolve states (no per-frame React re-render, use refs or motion values). Use a CSS mask-image gradient on the card edges so rows fade in and out. Counter in a live region with tabular-nums. prefers-reduced-motion: no conveyor, show the final verified layout and 80% statically. Keyboard: the target button is focusable with a visible focus ring and restarts the scan. Performance: only transform and opacity animate; blur is pre-applied to static strips, not animated.
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 placeholder email addresses.
SUCCESS CHECK:
- Every chip gets its check exactly when it crosses the scan line, never before.
- The hit-rate value climbs smoothly to 80% and is announced as text, not only drawn.
- With prefers-reduced-motion on, the card shows a static verified state with no movement.
