REFERENCE
- Gallery page: https://magpui.com/en/i/tear-off-ticket-with-a-stamp-278f5c
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/tear-off-ticket-with-a-stamp-278f5c/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/tear-off-ticket-with-a-stamp-278f5c/clip.mp4
- Original post: https://x.com/justyna_framer/status/2113613367407493272 by @justyna_framer
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 draggable concert ticket with a detachable dark stub, a pale foil-like body and a small completion stamp. Keep the interaction contained to this component.
DESIGN SYSTEM: Use an approximately 460 by 200px ticket with a 330px ivory body and 130px charcoal stub, 8px outer corners, a vertical perforation and soft grounded shadows. Estimate colors #edece7, #faf9f4, #232323 and #aaa9a2. Use neutral sans-serif type: 26px event title, 52px stub number, 10px metadata. Place a barcode at the stub bottom, small event metadata along the body bottom and a faint oversized number behind the body copy.
MOTION: Proposed timings: pointer movement shifts a clipped metallic gradient over 150ms; dragging moves and rotates the stub around its inner edge, exposing a ragged pale seam. Once dragged 70px, detach it with a 350ms ease cubic-bezier(0.2,0.8,0.2,1), then reveal a tilted rectangular outline stamp over 220ms after a 100ms delay. A short drag springs back over 300ms with cubic-bezier(0.2,0.9,0.3,1).
SECTIONS: Idle attached ticket; reflective hover; dragged stub; detached stub offset to the right; stamped body. Include a reset control outside the artwork.
IMPLEMENTATION: Use Motion for pointer drag and transforms, CSS gradients for foil and SVG masks for the perforated seam. Keep all text selectable except the drag handle. Provide a keyboard button to tear, visible focus, touch support and reduced-motion instant state changes. Animate transforms and opacity, not layout; no continuous work while idle.
ADAPT TO THE PROJECT: Reuse existing tokens, fonts and components; map colors to nearby project tokens. Never copy source logos, brand names, photos or illustrations; use placeholder event details.
SUCCESS CHECK:
- The stub follows the pointer and a short drag resets.
- Detachment exposes the perforated edge and shows the stamp once.
- Keyboard, touch and reduced-motion paths reach the same final state.
