Scratch Card Reveal

About

Scratch Reveal creates an interactive scratching effect that reveals a hidden image underneath when users interact with the overlay. Once a certain percentage is revealed, the full image automatically appears with an optional confetti celebration. Perfect for revealing prizes, special offers, or creating interactive "before and after" experiences. Great for contests & promotional campaigns.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library

Instructions

1. Copy and paste the component into your project

2. Configure the settings in the right properties panel:

   • Add your main Image (what users will reveal)

   • Add an Overlay Image

   • Set Brush Size for scratching (10-100px)

   • Adjust Auto Reveal percentage (0-100%)

   • Toggle Show Confetti on/off

   • Customize Radius and Shadow if needed

3. Place your Scratch Reveal component where you want the interaction to occur

4. Preview and test by scratching the overlay to reveal the image underneath

How It Works

The component requires:

• Base image (what you want to reveal)

• Overlay Image

• Customizable properties for brush size and reveal threshold

• Optional confetti celebration

• Visual customizations like border radius and shadow

Support

For any queries and help setting up the component, contact hello@segmentui.com