Scratch to Reveal

A highly optimized HTML5 <canvas> interaction. As the user scrubs their mouse across the container, it visually erases the overlay and calculates the cleared percentage of the bounding box. Once the threshold is crossed, it snaps the rest of the overlay away.

Installation

CLI

npx @modus-ui/cli add scratch-to-reveal

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/scratch-to-reveal.tsx.
3. Paste the code.

Usage

import { ScratchToReveal } from "@/components/ui/scratch-to-reveal";

export default function Example() {
  return (
    <ScratchToReveal width={300} height={300} threshold={0.5}>
      <div className="flex h-full w-full items-center justify-center rounded-xl bg-muted p-8">
        <h2 className="text-xl font-bold">Hidden Treasure</h2>
      </div>
    </ScratchToReveal>
  );
}

Props