---
title: "Scratch Card Reveal — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Nabeel · Interactive. About Scratch Reveal creates an interactive scratching effect that reveals a hidden image underneath when users interact with the overlay."
canonical: "https://framer.elliotli.dev/component/scratch-card-reveal"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Scratch Card Reveal

# Scratch Card Reveal

[View on Framer](https://framer.com/marketplace/components/scratch-card-reveal/?via=elliot-li)

![Scratch Card Reveal preview image 1](https://framer.elliotli.dev/og/component/scratch-card-reveal/b231e937bd981efe/1600x1200.jpg)

## Summary

About Scratch Reveal creates an interactive scratching effect that reveals a hidden image underneath when users interact with the overlay.

## Description

## 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](https://segmentui.com/uikit) 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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-di2dq7oc-TgmMphkbE0PViOgb2YYvCWURdqghA6)

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](mailto:hello@segmentui.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #10310

## Details

- **Author**: Nabeel
- **Price**: $15.00
- **Published**: 2025-07-31
- **Updated**: 2025-08-07
- **Added**: 2025-07-29
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step