Scratch Coupon

Drop a coupon card on any page and visitors scratch it with the mouse or a finger to uncover a discount code. A button copies the code in one click, and a small burst of confetti marks the reveal.

Two types in one component: Coupon, the finished card with the code built in, and Overlay, just the scratch-off foil. Lay Overlay on top of your own Framer layers (a price, a prize, a whole card) and scratching uncovers them. Clicks pass through once it is revealed.

Eight covers drawn in code, sharp at any size: Cobweb (Halloween), Gold Foil (Black Friday), Frost (Christmas), Silver, Holographic, Hearts (Valentine’s), Summer, or Custom in any colour you pick. One purchase covers the whole year’s campaigns.

Settings: code, title, hint and cover label, how much to scratch before the rest clears, brush size, button texts, an optional link shown after the reveal, card, text and accent colours, radius and font. Remember lets a returning visitor see the code already revealed. An On Reveal event hooks into Framer interactions.

Works on phones: touch scratches only the scratch area, so the page still scrolls. Keyboard and screen-reader friendly: a real Reveal code button does the same as scratching, and the code is announced once revealed. Respects reduced motion, pauses off-screen and stays still in the editor.

Setup: paste the component URL from your purchase into Framer and drop the component on the page. Change the code and the cover in the properties panel.

Licence: one project (Framer Community terms). Support: contact@no-code.supply