Scratch to Reveal

Installation

Mechanics

This effect leverages the HTML5 <canvas> element and its powerful globalCompositeOperation property:

1. Cover Generation: When mounted, the canvas draws a procedural metallic gold foil gradient over its context using createLinearGradient().
2. Scratching: As the user drags their cursor/finger over the canvas, we set ctx.globalCompositeOperation = "destination-out". This turns any subsequent arc() drawing commands into an "eraser", clearing the pixels where the mouse moved and revealing the DOM elements layered beneath the canvas.
3. Threshold Checking: Periodically, we read the getImageData pixel array to check the alpha channel. If a certain percentage of the pixels have become transparent (e.g. 50%), we trigger a full reveal and fade the canvas out via CSS opacity transitions.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { PaperTearReveal } from "@/components/creative/paper-tear-reveal";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { PaperTearReveal } from "@/components/creative/paper-tear-reveal";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <PaperTearReveal
      >
        <div>Content goes here</div>
      </PaperTearReveal>
    </div>
  );
}