Scratch to Reveal

What it does

The component draws a cover over whatever you put underneath and turns it into a scratch surface. As the visitor drags across it, the cover is erased where they touch — with scattered flecks along the stroke, the way real foil comes off rather than a clean wipe. When enough of it is gone, the rest clears on its own.

It reads how much has actually been scratched off the canvas, so completion responds to what the visitor did, not to how long they spent.

Where you would use it

• A discount code the visitor has to uncover — the most natural fit, and the reason the Reward mode exists

• A product reveal on a launch page

• A giveaway or competition entry

• Anywhere you want a moment of play in an otherwise static page

It works because it costs the visitor a small effort. Use it once on a page; a second scratch card is a chore.

It lets visitors rub it away with a cursor or finger — perfect for promo codes, giveaways, product teasers, and playful landing pages.

How to add it

1. Paste the component into your layout.

2. Pick a Content Type — this is the decision everything else follows from.

3. Pick a Surface for the cover.

4. Leave the scratch feel at its defaults unless something bothers you.

Controls

Forty-two controls, but you never see all of them. Content Type is a mode switch: choosing one hides the controls belonging to the other four. In practice you work with about fifteen at a time.

Content Type — start here

Slot is the escape hatch. If none of the built-in layouts fit, design the reveal as a normal Framer layer and drop it into the Content slot.

One inconsistency worth knowing: Text Color appears in Text and Reward modes but not in Mixed, even though Mixed shows text. In Mixed the text colour comes from the font controls instead.

The cover

A Cover Image beats every preset for brand work. The presets are good defaults, but a scratch card that carries your own artwork reads as designed rather than as a component.

How it scratches

These five decide whether the interaction feels good, and two of them matter most:

Roughness is what stops it looking like an eraser. At 0 the stroke is a clean band and the illusion breaks; the default scatters flecks around the stroke so the cover comes off unevenly, like foil.

Release Finish is a kindness. Without it, the visitor has to keep scratching until they hit the 70% Threshold — which is a lot of rubbing. With it on, they scratch past 25%, let go, and the rest clears. Turn it off only when the scratching itself is the point.

The hint

Leave the hint on. A scratch card that does not say it is a scratch card is just a shape that ignores clicks. This is the one control where the default is not a style choice.

Frame

After it is revealed

Turn Reset Button off for a real promo code. A code that can be re-scratched implies it can be re-rolled, and the reveal stops feeling like a prize. Reset is for demos and for playful reveals where nothing is at stake.

Auto Reset belongs on a showcase page — a card that re-covers itself so the next visitor sees it unscratched.

Events

Wire Complete to whatever should follow the reveal — reveal a section, start an animation, fire an analytics event.

Tips

• Pick the mode first, then style. Half the panel changes when you change Content Type, so any styling you do beforehand may belong to controls that are about to disappear.

• Reward mode is the whole promo-code flow in one component — code, button, link and a click event. Do not rebuild it out of Text mode plus a button.

• Match Radius to the card it sits in. The cover is drawn to the component's own frame, so a mismatched radius shows as a corner that does not line up.

• Size the Brush to the card, not to taste. A 56px brush on a small card clears it in two strokes and the interaction is over before it registers.

Performance and limits

• The reveal is drawn on a canvas and only runs while the visitor is scratching. Nothing animates on its own.

• A cross-origin Cover Image degrades the progress measurement. The component normally reads the canvas pixels to know exactly how much has been removed; when the browser blocks that read because the image comes from another domain, it falls back to estimating progress from the strokes drawn. Completion still works, but Threshold becomes approximate. Upload the cover image into your project rather than linking it from elsewhere.

• Static rendering is handled, so canvas previews and exports show the card covered rather than mid-scratch.