Peel Reveal

ScratchCard brings a playful reveal experience into your Framer website. Instead of showing content immediately, you can hide text or images behind a customizable scratch cover and let users uncover the information themselves.

It is perfect for discounts, promo codes, mystery offers, product reveals, portfolio interactions, gamified landing pages, onboarding surprises, and any section where you want users to interact before discovering the content.

What ScratchCard Does

ScratchCard allows you to place hidden content underneath a scratchable surface. When users drag across the cover, the surface clears gradually until the hidden content becomes visible.

You can decide what sits beneath the scratch layer, how the scratch behaves, how much needs to be scratched before the reveal completes, and how the cover should look before interaction begins.

Key Features

Scratch-to-Reveal Interaction

Users can scratch across the card using their cursor or touch input to reveal the hidden content beneath.

Reveal Text or Image

You can reveal simple text, promotional messages, product details, discount codes, images, or visual content.

Custom Scratch Type

Choose how the scratch effect behaves based on the experience you want to create.

Reveal Point Control

Set how much of the card needs to be scratched before the content is considered fully revealed.

Scratch Cover Settings

Customize the cover layer, including its appearance, style, color, and overall presentation.

Cover Text

Add text on top of the scratch cover, such as:

“Scratch to reveal”“Reveal your offer”“Swipe to uncover”“Scratch here”“Unlock surprise”

Fully Interactive

The component is designed to make a regular section feel more engaging and memorable.

Support Note

If you need help setting up the component, customizing the scratch cover, or creating the right reveal experience for your website, support is available.

License / Usage Note

This component is intended for use in your Framer project. Please do not resell, redistribute, or repackage it as your own component.