An interactive canvas component that uses globalCompositeOperation = "destination-out" to allow the user to "scratch" away a top layer and reveal hidden content underneath. Great for easter eggs or gamified interactions.
Live Preview
Installation
npx kinetic-ui-cli@latest add scratch-to-revealUsage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { ScratchToReveal } from "@/components/creative/scratch-to-reveal";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { ScratchToReveal } from "@/components/creative/scratch-to-reveal";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<ScratchToReveal
width{10}
height{10}
brushSize{10}
>
<div>Content goes here</div>
</ScratchToReveal>
</div>
);
}