REFERENCE
- Gallery page: https://magpui.com/en/i/holographic-email-confirmation-ticket-7606d6
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/holographic-email-confirmation-ticket-7606d6/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/holographic-email-confirmation-ticket-7606d6/clip.mp4
- Original post: https://x.com/siddhartharun/status/2099872536112591183 by @siddhartharun
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 confirmation screen after sign-up: a small ticket-shaped card with a notched edge, holographic iridescent surface, a big logo letter, Thanks! and a one-line instruction, floating on a dark background with soft colored ambient light.
DESIGN SYSTEM
- Background #101012 with radial glows of #7C3AED and #0EA5E9 at 25%.
- Ticket 200x260, 14px radius, notches on both sides, iridescent conic gradient overlay, text #111 serif 22px.
MOTION
- Entry: ticket rises 30px and rotates from 12deg to 0, spring (stiffness 140, damping 16).
- Tilt follows the pointer ±10deg; the foil gradient shifts with the tilt.
- Idle: slow 5s float.
SECTIONS
- Ticket card.
- Ambient glow layer.
IMPLEMENTATION
- CSS 3D transforms, conic-gradient with mix-blend-mode, notches via mask.
- 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
- Text stays readable over the foil.
- Tilt resets smoothly when the pointer leaves.
- Looks good on mobile without pointer (gentle auto-tilt).
