Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Scratch To Reveal

Scratch To Reveal

The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.

😎

Installation

npx shadcn@latest add "https://magicui.design/r/scratch-to-reveal"

Props

PropTypeDefaultDescription
classNamestring-The class name to apply to the component.
widthnumber-Width of the scratch container.
heightnumber-Height of the scratch container.
minScratchPercentagenumber50Minimum percentage of scratched area to be considered as completed (Value between 0 and 100).
childrennode-The content to display in the marquee.
onCompetefunction-Callback function called when scratch is completed
gradientColorsstring[]-Gradient colors for the scratch effect.

Credits