REFERENCE
- Gallery page: https://magpui.com/en/i/ghost-pass-waitlist-page-71369d
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/ghost-pass-waitlist-page-71369d/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/ghost-pass-waitlist-page-71369d/clip.mp4
- Original post: https://x.com/lochieaxon/status/2098484382935949553 by @lochieaxon
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.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Floating ticket with a ghost mascot: 3D render of a glossy rounded ticket card in pastel lavender tilted at 15 degrees, with a cute white ghost mascot with small eyes peeking from it, soft iridescent highlights, soft shadow below, transparent background, centered, no text, 1:1.
BUILD
A single-screen waitlist page: a floating 3D ticket with a cute ghost mascot at the top, headline You have been sent a Ghost Pass with the last words highlighted, a short explanation, a code with a Copy button and two download buttons.
DESIGN SYSTEM
- Background gradient #F3EEFF to white; headline 34px bold #111, highlight #8B5CF6.
- Code pill white with monospace code and purple Copy chip; primary button #8B5CF6, secondary #EDE9FE.
MOTION
- Ticket floats (translateY ±8px, rotate ±3deg, 4s loop).
- Page enters with 60ms staggered fade-up for headline, text, code and buttons.
- Copy chip turns into Copied with a check for 1.5s.
SECTIONS
- Ticket illustration.
- Headline and text.
- Code row.
- Buttons and small footnote.
IMPLEMENTATION
- Static 3D render (Spline export or PNG) for the ticket; Framer Motion for the rest.
- 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
- Works on one mobile screen without scroll.
- Code is copyable and selectable.
- Buttons have clear focus states.
