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
Copy and paste the component into your project
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
Place your Scratch Reveal component where you want the interaction to occur
Preview and test by scratching the overlay to reveal the image underneath
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
For any queries and help setting up the component, contact hello@segmentui.com
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
Copy and paste the component into your project
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
Place your Scratch Reveal component where you want the interaction to occur
Preview and test by scratching the overlay to reveal the image underneath
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
For any queries and help setting up the component, contact hello@segmentui.com
Nabeel
