REFERENCE
- Gallery page: https://magpui.com/en/i/gradient-ai-cards-on-a-warped-carousel-f04800
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/gradient-ai-cards-on-a-warped-carousel-f04800/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/gradient-ai-cards-on-a-warped-carousel-f04800/clip.mp4
- Original post: https://x.com/basit_designs/status/2114733820155134045 by @basit_designs
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 looping feature showcase of vivid gradient UI cards moving through a curved 3D carousel. Each card is a portrait panel with a grainy mesh gradient background (blue, magenta, orange, green) and a small live widget on top: a dotted LED-style readout with a slider, a rotating wireframe globe, a thin outline circle, a compass dial with a filled sector. Cards drift horizontally; the one in the center sits flat and sharp, while cards near the left and right edges bend away, stretch and bloom into a soft lens-like distortion with chromatic fringes before leaving the frame. It should feel futuristic, colorful and calm.
DESIGN SYSTEM: Light page #F1F2F4. Cards ~220x300px, 18px radius, 16px padding, title 13px semibold white with a 11px subtitle at 70% opacity, small pill CTA at the bottom (rgba(255,255,255,0.18), 999px radius). Gradients built from 3-4 color blobs (#1E5BFF, #FF4FD8, #FF7A1A, #34C759) with heavy blur and a fine film-grain overlay at ~8% opacity. Widgets drawn in white lines at 1-1.5px. Cards spaced ~24px, with depth: side cards smaller and further back.
MOTION: Continuous horizontal drift of the whole row at ~40px/s, linear, looping seamlessly. Each card's transform depends on its x position: center = scale 1, rotateY 0; towards edges rotateY up to ±55deg, scale down to 0.7, and a vertex bulge/stretch of the outer edge that grows non-linearly in the last 20% of the viewport, with blur and RGB split increasing. Widgets animate in place: LED readout counts, globe rotates 1 turn / 12s, compass sector sweeps 2s cubic-bezier(0.65,0,0.35,1). Drag or wheel scrubs the row with inertia.
SECTIONS: Parts: carousel track, cards (each with gradient, title, subtitle, widget, CTA), edge distortion zones. States: drifting, dragging, hovered card (pauses drift, lifts 8px, 250ms cubic-bezier(0.22,1,0.36,1)).
IMPLEMENTATION: Three.js or OGL: render each card's DOM-like content to a texture (or build it in a canvas), place cards on subdivided planes and bend them in the vertex shader with a curve based on screen-space x; add the RGB split and blur in the fragment shader near the edges. Gradients as GLSL noise-driven mesh gradients with grain. Fallback without WebGL: CSS 3D transforms with perspective and filter blur. prefers-reduced-motion: stop the drift and distortion, show cards as a static scrollable row. Cards focusable with visible focus ring; arrow keys move the row. Cap at ~8 cards in view, devicePixelRatio max 2, pause when tab hidden.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map every color to the closest existing token. Never copy logos, brand names, photos or illustrations from the original; use placeholders.
SUCCESS CHECK:
- The card row loops smoothly and center cards are flat and sharp while edge cards bend, stretch and fringe.
- Each card shows a grainy multicolor gradient with a small animated widget.
- Reduced motion shows a static row and cards are reachable by keyboard.
