REFERENCE
- Gallery page: https://magpui.com/en/i/holographic-id-with-sliding-sleeve-f0b7f7
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/holographic-id-with-sliding-sleeve-f0b7f7/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/holographic-id-with-sliding-sleeve-f0b7f7/clip.mp4
- Original post: https://x.com/TobiasWhetton/status/2112689798167269563 by @TobiasWhetton
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 compact identity card with a pastel holographic finish and a dark sleeve that slides over the card to hide a change of identity. Include two identity selection pills and a replay button below it. Rebuild only this component.
DESIGN SYSTEM: Place an approximately 320 by 200px rounded card on a #101010 background. Use an off-white base with pale cyan #bde9e5 and pink #f2c9df sheen. Arrange tiny 9–11px monospaced labels, a grayscale placeholder portrait on the left, identity fields in the center, a large 26px serial in the top right and code-like rows along the bottom. Use generic SVG security ornaments, not government symbols. The charcoal #242420 sleeve matches card width, has rounded lower corners and a shallow central notch at its upper edge. Small dark pills sit 40px below; selected pill is cream with dark type.
MOTION: Proposed timings: selecting a different identity raises the sleeve over 450ms, cubic-bezier(0.65,0,0.35,1), replaces card data while concealed, then lowers it over 500ms after a 100ms pause. Animate the pastel sheen using a translated background gradient over 3000ms, alternating gently. Optional pointer tilt is limited to 5 degrees and settles over 250ms, cubic-bezier(0.2,0.8,0.2,1). Replay repeats the sleeve sequence without changing the selected person.
SECTIONS: Visible card and selected person; sleeve covering card; hidden data swap; sleeve retreat; second identity visible. Preserve layout and serial position throughout.
IMPLEMENTATION: Use layered HTML and CSS gradients with Motion for the sleeve and phase sequencing. Clip sheen to card boundaries, keep text on a separate sharp layer and animate transforms instead of layout. Prevent overlapping transitions. Use native buttons with visible focus and pressed state. Under prefers-reduced-motion, switch identity immediately with a short opacity fade, disabling tilt and sheen drift. Replace portraits with initials so no external imagery is required.
ADAPT TO THE PROJECT: Reuse the existing design tokens, components and fonts, map the estimated colors to the closest existing tokens, and never copy logos, brand names, photos or illustrations from the original; use placeholders and fictional identity details.
SUCCESS CHECK:
- Data changes only while the sleeve obscures the portrait and fields.
- Holographic colors never make identity text unreadable.
- Keyboard selection, replay and reduced motion work without animation overlap.
