Interactive Scratch Off Components for Svelte

Scratch to Reveal is a lightweight Svelte component that implements scratch card functionality within Svelte applications.

The component creates a canvas element over your desired content. You can configure this overlay as a multi-color gradient or a specific image.

Your users can then “scratch” this canvas to uncover what lies beneath. Useful for digital promotions, interactive advertisements, or gamified content reveals.

GitHub

Features

🎨 Customizable Overlay. You can use either a multi-color gradient or a specific image for the scratchable surface.

📢 Event-Driven. The component fires an on:complete event when the scratch threshold is met and an on:scratchProgress event for live percentage updates.

⚙️ Completion Threshold. You can define the percentage of the area that needs to be scratched before a completion event is triggered.

🕹️ Programmatic Control. You can reveal the content or reset the component to its initial state using exposed methods.

See It In Action

Use Cases

Marketing campaigns with hidden discount codes or messages.
Educational applications that progressively reveal information.
Gaming interfaces requiring interactive discovery mechanics.
Mobile applications implementing scratch card style interactions.
Data visualization with user-controlled content disclosure.

How to Use It

1. Install the scratch-to-reveal-svelte component with NPM.

npm i @dellamora/scratch-to-reveal-svelte

2. Import it into your Svelte file and place your hidden content inside its default slot.

You must provide width and height props for the canvas dimensions.

<script>
  import ScratchToReveal from '@dellamora/scratch-to-reveal-svelte';
</script>
<ScratchToReveal
  width={300}
  height={300}
  gradientColors={["#A97CF8", "#F38CB8", "#FDCC92"]}
>
  <h2>You Won!</h2>
</ScratchToReveal>

3. Customize the component’s appearance and behavior through the following props:

width: Sets the width of the scratchable canvas area.
height: Sets the height of the scratchable canvas area.
minScratchPercentage: Defines the percentage of the canvas that must be cleared to trigger the on:complete event.
gradientColors: An array of color strings to create a gradient for the scratchable overlay.
imageUrl: A URL for an image to use as the scratchable overlay, which takes precedence over gradientColors.

<script>
  import ScratchToReveal from '@dellamora/scratch-to-reveal-svelte';
</script>
<ScratchToReveal
  width={500}
  height={200}
  imageUrl={'/cover-image.png'}
  minScratchPercentage={60}
  className="my-scratch-card"
>
  <p>This is the hidden content.</p>
</ScratchToReveal>

4. The component emits two main events:

on:complete event fires once the minScratchPercentage is reached.
on:scratchProgress event fires continuously, providing the current percentage of the revealed area.

<script>
  import ScratchToReveal from '@dellamora/scratch-to-reveal-svelte';
  function handleComplete() {
    console.log('Reveal complete!');
  }
  function handleProgress(event) {
    console.log(`Progress: ${event.detail.percentage}%`);
  }
</script>
<ScratchToReveal
  width={300}
  height={300}
  gradientColors={['#333', '#555']}
  minScratchPercentage={50}
  on:complete={handleComplete}
  on:scratchProgress={handleProgress}
>
  <p>Reveal Me</p>
</ScratchToReveal>

5. For more advanced control, you can bind to the component instance. This allows you to call its .reveal() and .reset() methods directly.

The .reveal() method uncovers all content, while .reset() restores the scratchable overlay.

<script>
  import ScratchToReveal from '@dellamora/scratch-to-reveal-svelte';
  let scratchComponent;
  function revealContent() {
    scratchComponent.reveal();
  }
  function resetContent() {
    scratchComponent.reset();
  }
</script>
<button on:click={revealContent}>Reveal</button>
<button on:click={resetContent}>Reset</button>
<ScratchToReveal
  bind:this={scratchComponent}
  width={300}
  height={300}
  gradientColors={['#000', '#444']}
>
  <p>Programmatic Control</p>
</ScratchToReveal>

FAQs

Q: Is the component responsive?
A: You can achieve responsiveness by binding the width and height props to reactive variables that update based on the container’s size.

Q: What kind of content can be placed inside the component?
A: Any valid HTML or Svelte components can be placed inside. The component uses a slot to render the content that gets revealed.

Q: How does the on:scratchProgress event work?
A: It fires continuously as the user interacts with the canvas. The event detail contains a percentage property that reflects the portion of the revealed area.