Scratch Card | Scratch Card

🎁 Easy to Use

Use it with minimal configuration.

✨ Focus on UX

Meticulously optimized to ensure each scratch is smooth as silk, providing an unprecedented interactive experience.

🎉 Fully functional

Whether it's custom patterns, scratch-off effects, or interactive logic, the scratch card can effortlessly meet all your needs with its comprehensive functionality.

Experience

Scratch with your mouse or finger

width

height

Available

Usage


<div className='flex items-center flex-col gap-4'>
  <div className="relative overflow-hidden rounded w-[400px]">
    <div className="text-primary-50 absolute z-[-1] flex h-full w-full items-center justify-center bg-gradient-to-br from-[#4ADE80] to-[#06B6D4] text-3xl">
      Thanks!
    </div>
    <ScratchCard
      id="usage-demo"
      width={480}
      height={270}
      ref={ref}
      cover="img/cover2.jpg"
    />
  </div>
  <div className='flex gap-4'>
    <Button
      onClick={() => {
        ref.current.finishScratching();
      }}
    >
      Finish
    </Button>
    <Button
      onClick={() => {
        ref.current.fillArea();
      }}
    >
      Reset
    </Button>
  </div>
</div>

API

attritube	type	description	default
id	`string`	The id of canvas DOM	`scratch-card`
width	`number`	The width of canvas DOM	-
height	`number`	The height of canvas DOM	-
available	`boolean`	If it's available to scratch	`true`
finishTransition	`boolean`	If the transition is enabled when it's finished	`true`
cover	`string`	Cover image of scratch card	-
threshold	`number`	Threshold to finish scratching automatically	`0.95`
fadeDuration	`number`	Duration for cover fade out	`1`
scratchRadius	`number`	Radius while scratching	`15`
fillStyle	`number`	FillStyle under img	`#fff`
onFill	`() => void`	Callback when fillArea	-
onFinishStart	`() => void`	Callback when finish transition start	-
onFinish	`() => void`	Callback when scratching finished	-