REFERENCE
- Gallery page: https://magpui.com/en/i/holographic-3d-tilt-card-c3e4fc
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/holographic-3d-tilt-card-c3e4fc/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/holographic-3d-tilt-card-c3e4fc/clip.mp4
- Original post: https://x.com/ann_nnng/status/2108122086569136417 by @ann_nnng
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 collectible profile card that tilts in 3D following the pointer, with a holographic foil highlight sweeping across an iridescent character illustration. A row of small thumbnails under the card switches between characters with a flip.
DESIGN SYSTEM
- Card 300x420, background #0B0B0B, 18px radius, title 28px bold lowercase white, 11px caption in caps.
- Page background #FFFFFF, card drop shadow 0 30px 60px rgba(0,0,0,.25) that shifts opposite to the tilt.
- Holographic layer: conic-gradient of cyan, magenta, yellow, green at 40% opacity, blend-mode color-dodge.
MOTION
- Tilt: rotateX/rotateY up to ±14deg mapped to pointer position, spring (stiffness 150, damping 15).
- Foil: background-position of the holo layer follows the pointer so the shine slides across the art.
- Switching character: card flips 180deg on Y, 600ms, cubic-bezier(0.65, 0, 0.35, 1), content swaps at 90deg.
SECTIONS
- Card: art, name, caption.
- Thumbnail row with active state.
IMPLEMENTATION
- CSS 3D transforms with perspective 900px on the parent; pointer math in a small hook.
- On touch devices use device orientation if allowed, otherwise a gentle idle wobble.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- The shine always faces the light source opposite to the pointer.
- No jitter when the pointer leaves: card springs back to flat.
- 60fps on a mid laptop.
