Scratch Card

The other day I came across dmytro’s portfolio, and one of his works caught my eye. It was a component that imitates scratch cards, where the user drags the mouse over the surface to reveal text underneath (in this example, an API key). I thought it was a playful detail you don’t usually see in apps.

So I decided to recreate it using a canvas element. The canvas starts with a background that looks like the silver surface of scratch cards, and as the user drags the mouse (or a finger on touch devices), the surface is erased to reveal the hidden text. Once enough of the surface is cleared, a copy button appears next to the text. It’s probably not the best idea for something important like hiding an API key or token, but it could be a fun way to reveal easter eggs, rewards, or other surprises. You can check out the full code here if you’re interested in the details.