Templates

Ghost pass waitlist page

A pastel landing for skipping a waitlist: floating 3D ticket with a ghost mascot, a copyable code and two clear buttons.

Industries: fintechcrypto
Colors: lavenderwhitepurple
Styles: pastel3d mascotfriendly
Category: landing pagewaitlist

View original

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.

1
Install the skill
Run these commands once in Claude Code. The skill gives the agent know-how for this kind of piece. With other agents, follow the instructions on the skill page.
frontend-design
```
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
2
Create the images
Code cannot draw these well. Generate them with any image generator (hover the button to see a few), or with your agent's image tool if it has one, and save them in the project.

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.

Paste the prompt in your agent

Hit Copy prompt above, open your project in the agent and paste it. The prompt links the original frames, so the agent can look at them before building.

Uses

Compare with the original

Put the two side by side. If something is off, tell the agent exactly what: timing, size, color or spacing.

Install the skill

Create the images

Paste the prompt in your agent

Compare with the original