Scratch To Reveal

Component 148

About

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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scratch To Reveal to your project and fits it to your theme.

Code

How Scratch To Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

const ScratchToRevealDemo = () => {
  const handleComplete = () => {
  };

  return (
    <div>
      <ScratchToReveal
        width={250}
        height={250}
        minScratchPercentage={70}
        className="flex items-center justify-center overflow-hidden rounded-2xl border-2 bg-gray-100"
        onComplete={handleComplete}
        gradientColors={["#A97CF8", "#F38CB8", "#FDCC92"]}
      >
        <p className="text-9xl">😎</p>
      </ScratchToReveal>
    </div>
  );
};

export { ScratchToRevealDemo };