REFERENCE
- Gallery page: https://magpui.com/en/i/ribbed-metal-card-that-flips-in-3d-2970ed
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/ribbed-metal-card-that-flips-in-3d-2970ed/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/ribbed-metal-card-that-flips-in-3d-2970ed/clip.mp4
- Original post: https://x.com/MoizArshi29/status/2116798199558209778 by @MoizArshi29
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 single 3D payment card rendered in WebGL on a black stage, with no 3D models or textures from outside: everything is generated in code. The front face is covered by fine vertical ribs, like a ribbed metal or fluted glass plate, so a soft highlight sweeps across the ribs as the card tilts. A small chip sits top-left, a bold italic wordmark bottom-right. The card tilts toward the cursor, and a click or drag flips it to the back (magnetic stripe, small grey printed text, signature strip). It should feel heavy, premium and quiet.
DESIGN SYSTEM: Stage #050505, card centered, about 320 x 202px on desktop (ratio 1.586, ISO card), radius 14px, thickness 2px with a lighter edge #8A8A8A. Front base #2A2A2A to #6B6B6B; ribs: about 28 vertical ribs across the width, each rib a cylinder-like normal bump, rib highlights up to #EDEDED, grooves #1A1A1A. Chip 34 x 26px, radius 4px, darker #3A3A3A with engraved contact lines. Wordmark bold italic sans 18px #F2F2F2, with a tiny 6px subline below. Back: base #1C1C1C, black stripe #0A0A0A 34px tall 18px from the top, signature strip #D9D9D9 at 40% opacity, small 7px grey #8C8C8C text lines. A small white 6px dot cursor follows the pointer.
MOTION: Pointer tilt: rotateX up to 12 degrees and rotateY up to 18 degrees from the pointer offset, smoothed with a spring (stiffness 120, damping 18) or lerp 0.08 per frame. Highlight: the specular position on the ribs follows the tilt, so a bright band slides across the ribs opposite to the rotation; the whole card brightens from about 35% to 80% luminance as it faces the light. Idle: when the pointer is still for 2s the card drifts in a slow figure eight (period 6s, amplitude 6 degrees). Flip: click or drag past 60 degrees rotates the card 180 degrees on Y over 900ms cubic-bezier(0.65, 0, 0.35, 1) with a slight overshoot settle (spring stiffness 140, damping 16); the back face shows when the normal faces the camera. Motion blur feel: during fast flips briefly lower rib contrast by 30%.
SECTIONS: Parts: card mesh (rounded box), front material (ribs, chip, wordmark), back material (stripe, signature strip, text), pointer dot. States: idle drift, tilt (pointer over), flipping, back side, front side.
IMPLEMENTATION: Three.js (or React Three Fiber) with a RoundedBoxGeometry, a MeshPhysicalMaterial with metalness 0.9 and roughness 0.35 plus a procedural normal map for the ribs generated in a shader or a canvas, and an environment made from a few RectAreaLights or a generated PMREM gradient so no HDRI file is needed. Draw chip, wordmark and back text into a CanvasTexture. Cap devicePixelRatio at 2, render on demand when idle. prefers-reduced-motion: no idle drift, flip becomes a 200ms crossfade between front and back. Keyboard: the card is a focusable button, Enter or Space flips it, arrow keys tilt it by 6 degrees; provide an aria-label describing the side shown. Fallback for no WebGL: a CSS 3D card with a repeating-linear-gradient rib pattern.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, fonts and components; map the colors to the closest existing tokens. Never copy the original brand name or logo: use a placeholder wordmark.
SUCCESS CHECK:
- Moving the pointer tilts the card smoothly and slides a bright highlight across the vertical ribs.
- Clicking flips the card to a readable back side in under 1s with a soft settle.
- No external 3D models or image textures are loaded; reduced motion disables drift and the flip becomes a crossfade.
