REFERENCE
- Gallery page: https://magpui.com/en/i/retro-boarding-pass-scanner-40846e
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/retro-boarding-pass-scanner-40846e/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/retro-boarding-pass-scanner-40846e/clip.mp4
- Original post: https://x.com/mjbarton_/status/2098082543966867524 by @mjbarton_
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 skeuomorphic boarding pass scanner: a detailed paper boarding pass above an aged beige plastic reader with a slot, a red dot-matrix display and a status LED. Dragging the pass down through the slot runs the states READY, READING, ERROR or SUCCESS.
DESIGN SYSTEM
- Background #F6F1EA, pass off-white with printed monospace fields and a barcode, reader beige #D8CDB8 with grime texture.
- Display #1A0D0D with red #FF3B30 LED text, LED dot with glow.
MOTION
- Drag the pass vertically; inside the slot it is masked by the reader top.
- READING: display text scrolls, LED blinks at 120ms.
- ERROR: pass is pushed back up 30px with a buzz shake; SUCCESS: LED turns green #34C759 and the pass slides fully through.
SECTIONS
- Boarding pass (drag handle).
- Reader body with slot.
- Display and LED.
IMPLEMENTATION
- Pre-rendered reader image or a Blender render, DOM pass with Framer Motion drag constrained to the y axis; state machine for the display.
- 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
- Each state has distinct text, color and sound-free feedback.
- Releasing halfway returns the pass.
- Keyboard alternative: a Scan button.
