Scratch Card Reveal with Gold Foil on Canvas
Overview
A scratch-off card for React and Next.js. Brushed gold foil tears away under the cursor or a finger to show a photo and a message, and once enough is gone the rest falls off in a burst of flakes.
The card slides in and overshoots, a band of light sweeps across the foil, and a silver coin comes in and scratches a couple of strokes so it's obvious what to do. The coin keeps going slowly until a cursor arrives. Each scratch erases a rough-edged brush from a baked sheet of brushed gold, leaves a bright torn rim, and throws gold flakes that tumble and flash as they fall.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 055 / Cursor
Gold Leaf Cursor Trail Effect in Canvas
Mouse Move · On Click · Drag
No. 116 / Cards
Stretchy Cloth Image Card You Can Grab, with Canvas Physics
On Load · Drag · Mouse Move · On Click
No. 115 / Cards
Peel-Off Sticker Card with a Draggable Curl, on Canvas
On Load · Drag · Mouse Move · On Click
(02)FAQ
Scratch Card Reveal with Gold Foil on Canvas — FAQ
01How do I change what's under the foil?
Pass image and alt for the photo, and eyebrow, title and message for the text that rises. The lines printed on the foil come from foilLabel and foilCall.
02Can I change how much has to be scratched?
Yes. threshold is the share of the foil from 0 to 1 and defaults to 0.6. The coverage is counted on a small grid in JavaScript, so nothing is read back from the canvas.
03Does it work without a mouse?
The Scratch for me button runs the coin across the whole card, and Reset brings a new sheet of foil. The message and alt text are in the page for screen readers from the start.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. Give the stage a height through className, and pass a font-family to serif, usually a CSS variable with a fallback. Anything you pass as children sits beside the card.
05What happens with reduced motion?
The photo and message show as a still with no running loop. Reset puts the foil back as a still image, and Scratch for me takes it off again.