The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.
1import { ScratchToReveal } from "@/components/magicui/scratch-to-reveal";
2
3const ScratchToRevealDemo = () => {
4 const handleComplete = () => {
5 // Do Something
6 };
7
8 return (
9 <ScratchToReveal
10 width={250}
11 height={250}
12 minScratchPercentage={70}
13 className="flex items-center justify-center overflow-hidden rounded-2xl border-2 bg-gray-100"
14 onComplete={handleComplete}
15 gradientColors={["#A97CF8", "#F38CB8", "#FDCC92"]}
16 >
17 <p className="text-9xl">😎</p>
18 </ScratchToReveal>
19 );
20};
21
22export ScratchToRevealDemo;