REFERENCE
- Gallery page: https://magpui.com/en/i/live-orders-globe-card-ee7d3b
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/live-orders-globe-card-ee7d3b/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/live-orders-globe-card-ee7d3b/clip.mp4
- Original post: https://x.com/Ansenilayda/status/2112144949336494224 by @Ansenilayda
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 compact dark analytics card titled 'Where orders come from'. A slowly turning wireframe globe sits in the middle; when an order comes in a green pin rises from its city with a short label, and the total counter below ticks up with a percentage badge. Below it, a progress bar and three city stats.
DESIGN SYSTEM
- Card 320x420, background #1C1F1C, 1px border #FFFFFF14, radius 14px; page #232723.
- Globe: 1px lines #3FAF6A at 40% opacity, dots for land; pins #48E07F with a 6px glow.
- Counter 28px semibold white, badge 10px on #1F3A27 text #48E07F; city stats 11px #8A8F8A.
MOTION
- Globe rotates 360deg every 40s; drag rotates it with inertia.
- New order: a pin line grows from the surface (scaleY 0 to 1, 400ms cubic-bezier(0.22, 1, 0.36, 1)), the head pulses once, the city label fades in for 1.5s.
- Counter rolls digits up (each digit translateY, 300ms) and the progress bar extends.
SECTIONS
- Header, globe, counter + badge, progress bar, 3 city stats.
- States: idle rotation, new order, dragging, hover on pin shows city and count.
IMPLEMENTATION
- Canvas 2D with an orthographic projection of lat/long points is enough (no 3D library); or Three.js with a line sphere if you already use it.
- Feed fake orders from a timer every 1.5-3s.
- prefers-reduced-motion: swap the motion for a 150ms opacity change.
- Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense.
- Animate only transform, opacity and filter.
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 placeholders.
SUCCESS CHECK
- Pins appear at the right cities as the globe turns.
- The counter rolls without layout shift (tabular numbers).
- Dragging rotates the globe and it keeps spinning after release.
