REFERENCE
- Gallery page: https://magpui.com/en/i/scratch-to-reveal-gift-card-f92c91
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/scratch-to-reveal-gift-card-f92c91/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/scratch-to-reveal-gift-card-f92c91/clip.mp4
- Original post: https://x.com/pixelbyayo/status/2114636755483918658 by @pixelbyayo
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: An interactive gift card with a scratch-off code panel. A rounded red card shows a small brand name and subtitle top left, a simple white line illustration top right, a huge cream price like "€50", a short line of small print, and a wide brushed-silver panel that says "Scratch here with a coin". The cursor becomes a gold coin. Dragging the coin over the panel erases the foil along its path with a slightly rough brush, sheds tiny silver flakes that fall and fade around the card, and reveals a monospace code (like K7QM-29XD-4FHA) on a cream strip. When about 60% of the panel is cleared, the remaining foil dissolves, a caption under the card changes from "Scratch the silver panel to reveal your code" to "Your code is ready" and a dark pill button "Copy code" fades in. It should feel tactile, satisfying and a little playful.
DESIGN SYSTEM: Page background #E4E2DD. Card 360x230px, radius 14px, fill #D9322B, shadow 0 18px 40px rgba(80,20,15,0.25). Text #FFF4E6; price 64px heavy grotesk, tight tracking; brand 12px semibold, subtitle 10px at 70% opacity. Scratch panel 320x46px, radius 6px, silver gradient #C9CCD1 to #F1F2F4 to #B8BCC2 with fine noise. Revealed strip #F6F1E7 with code in 20px monospace #1F1F1F, letter-spacing 0.12em. Coin cursor 26px gold radial gradient #F5D27A to #C9962F with an embossed rim. Copy button: #161616 pill, 13px white label, 8px 16px padding.
MOTION: Foil erases on pointer move with a 22px textured brush (destination-out on canvas). Each move spawns 2 to 4 flakes (2 to 4px silver squares) that fall 30 to 60px with slight rotation and fade over 600ms. Coin tilts rotate up to 12deg in the drag direction. On completion: leftover foil fades in 250ms, caption crossfades 200ms, button scales 0.9 to 1 and fades in over 220ms with a spring. Copy click: label swaps to "Copied" for 1.2s.
SECTIONS: Centered stage; card; scratch canvas overlay; caption and button row below the card.
IMPLEMENTATION: React with a canvas overlay for the foil, sampling cleared pixels every few moves to compute the percentage. Motion for the reveal and button. Support pointer and touch; keyboard users get a "Reveal code" button. prefers-reduced-motion: no flakes, reveal with a simple fade. Code text is real DOM text so it can be selected and read by screen readers once revealed.
ADAPT TO THE PROJECT: Use the project's brand color for the card, its fonts and button style. Do not copy the original brand or illustration; use your own.
SUCCESS CHECK:
- Scratching clears the foil only where the coin passes, with falling flakes.
- Past the threshold the code is fully revealed and Copy code appears and works.
- Works with touch, keyboard fallback and reduced motion.
