Skip to main content

​
Overview

The Scratch to Reveal component creates an interactive scratch-off effect similar to lottery tickets. Users can scratch away the surface to reveal hidden content beneath with customizable completion thresholds and gradient colors.

​
Usage

<ScratchToReveal
  :width="300"
  :height="200"
  :minScratchPercentage="50"
  :gradientColors="['#A97CF8', '#F38CB8', '#FDCC92']"
  @complete="handleComplete"
>
  <div class="text-center">
    You won a prize!
  </div>
</ScratchToReveal>

​
Props

​
class
string
default:""
The class name to apply to the component.
​
width
number
required
Width of the scratch container.
​
height
number
required
Height of the scratch container.
​
minScratchPercentage
number
default:"50"
Minimum percentage of scratched area to be considered as completed (Value between 0 and 100).
​
gradientColors
[string, string, string]
required
Gradient colors for the scratch effect.

​
Events

​
complete
void
Callback function called when scratch is completed.

​
Slots

​
default
The content to be revealed below the scratch-off ticket.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us