Return

Scratch Card

A metallic foil coating rendered on canvas with diagonal sheen streaks and noise speckle. Scratch with your cursor or finger to erode the coating - soft radial dabs create a natural edge. A tiny scratch sound plays via Web Audio synthesis. When enough is cleared (55% by default), the coating fades away with an eased animation and a chime plays.

scratch-card-preview

Loading preview...

Why it helps: A scratch card taps into the same impulse as a real lottery ticket - the physical act of revealing something hidden is inherently satisfying. The scratch sound and percentage counter add to the tactile feel.

Also good to know:

  • -The percentage measurement downscales to 64x64 for speed, so very small scratches near edges may not register accurately
  • -Web Audio synthesis creates a new AudioContext on first interaction - some browsers may block this until a user gesture
  • -The coating is purely visual (canvas) so screen readers can't interact with the scratch mechanic

Source

components/live/ScratchCard.tsx
// Loading source...

Usage

example.tsx
import { ScratchCard } from "@/components/live/ScratchCard";

<ScratchCard
  coatingLabel="Scratch here"
  brushSize={34}
  clearThreshold={0.65}
  sound
/>

Props

revealContentgradient placeholder
ReactNode

Content revealed when scratched away.

coatingLabel-
ReactNode

Label centered on the coating.

brushSize34
number

Scratch brush diameter in px.

clearThreshold0.65
number

Fraction of area to auto-reveal (0-1).

coatingColorA"#b8bdc6"
string

Primary metallic coating color.

coatingColorB"#8a909c"
string

Secondary coating color for gradient.

soundtrue
boolean

Play scratch and reveal sounds.

autoRevealOnThresholdtrue
boolean

Auto-reveal when threshold is met.

className-
string

Additional CSS classes.