A scratch card wrapped in a web component, inspired by the CodePen made by Totati and written with Lit and TypeScript.

• Demo
• Installation
• Usage
  • Properties
  • CSS properties
• Known issues
• License

You can see the scratch card in action here with explicit config details.

# npm
npm install scratch-card-web-component

# yarn
yarn add scratch-card-web-component

# pnpm
pnpm add scratch-card-web-component

The scratch card can be imported and used in an HTML page in this way:

<script type="module">
    import "scratch-card-web-component"
</script>

<div id="app">
    <scratch-card fillColor="salmon">
        <span>Ciao!</span>
    </scratch-card>
</div>

The scratch card sets its dimensions to 100% width and height of its parent.

You should not create a scratch card via JavaScript/TypeScript, but there you can access and modify its attributes:

import type { ScratchCard } from "scratch-card-web-component";

const scratchCard = document.querySelector("scratch-card") as ScratchCard;
scratchCard.fillColor = "rebeccapurple";

Note that the boolean properties are false when they are missing from the html (Lit docs).

• brushScale: number (default 1), scales up (> 1) or down (< 1) the size of the uncovered area with a single scratch.
• centerCover: boolean (default false), if true, the cover image is centered in the scratching area.
• coverSrc: string or undefined (default undefined), URL path (relative or absolute) of the image to be used as cover to scratch. If undefined, then the scratch area will be filled with a rectangle with style specified by the fillColor property.
• fillColor: string (default white), specifies the color to use to fill the scratch area if a coverSrc is not provided. If this is an invalid value while the coverSrc is missing, the scratch card will show as already scratched.
• preserveAspectRatio: boolean (default false), whether to scale or not the cover to avoid leaving empty spaces in the scratch area. This can happen when the scratch area and the cover image have not the same aspect ratio.
• showAllAt: number (default 100), percentage threshold to consider the card as fully scratched. For instance, if showAllAt="80" the content will be entirely revealed when the 80% of the card's surface is scratched.
• silenceWarnings: boolean (default false), whether to stop emitting or not warnings to the browser console, such as "The image is being scaled up".

You can customize some styling of the scratch card via these CSS properties:

• --scratch-card-bg-fallback (default transparent): background to show while the canvas image is still loading (use to avoid FUOC effect).
• --scratch-card-border-radius (default 0): applies a border-radius to the scratch card.
• --scratch-card-cursor (default default): applies a custom cursor when scratching the card.

You can set a CSS property directly on one of the scratch-card's parent elements.

On Android the scratch card does not behave as expected.

MIT