Skip to main content

Scratch Card

A smooth and easy-to-use canvas scratch card component

npm install @kiefer/scratch

🎁 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

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
attritubetypedescriptiondefault
idstringThe id of canvas DOMscratch-card
widthnumberThe width of canvas DOM-
heightnumberThe height of canvas DOM-
availablebooleanIf it's available to scratchtrue
finishTransitionbooleanIf the transition is enabled when it's finishedtrue
coverstringCover image of scratch card-
thresholdnumberThreshold to finish scratching automatically0.95
fadeDurationnumberDuration for cover fade out1
scratchRadiusnumberRadius while scratching15
fillStylenumberFillStyle under img#fff
onFill() => voidCallback when fillArea-
onFinishStart() => voidCallback when finish transition start-
onFinish() => voidCallback when scratching finished-