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.
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.
Users can scratch across the card using their cursor or touch input to reveal the hidden content beneath.
You can reveal simple text, promotional messages, product details, discount codes, images, or visual content.
Choose how the scratch effect behaves based on the experience you want to create.
Set how much of the card needs to be scratched before the content is considered fully revealed.
Customize the cover layer, including its appearance, style, color, and overall presentation.
Add text on top of the scratch cover, such as:
“Scratch to reveal”“Reveal your offer”“Swipe to uncover”“Scratch here”“Unlock surprise”
The component is designed to make a regular section feel more engaging and memorable.
If you need help setting up the component, customizing the scratch cover, or creating the right reveal experience for your website, support is available.
This component is intended for use in your Framer project. Please do not resell, redistribute, or repackage it as your own component.
Isaac Alipoe
