ScratchToReveal Component | TFE Svelte Templates

Basic Text Reveal

Simple scratch surface with text overlay and progress bar. Auto-reveals at 70% threshold. Demonstrates core functionality with minimal configuration.

🎉

Congratulations!

You've revealed the hidden message!

<ScratchToReveal
  scratchText="Scratch Here!"
  showProgress={true}
  revealThreshold={70}
  width={400}
  height={300}
>
  <div class="prize-content">
    <h3>Congratulations!</h3>
    <p>You've revealed the hidden message!</p>
  </div>
</ScratchToReveal>

Lottery Card Style

Custom scratch surface with lottery ticket appearance. Shows how gamified experiences can be created with visual textures. Uses a solid grey surface to simulate metallic coating.

🎊 WINNER! 🎊

£50

Prize Money

<ScratchToReveal
  scratchText="🎰 SCRATCH TO WIN 🎰"
  scratchColor="#c0c0c0"
  scratchTextColor="#333333"
  brushSize={50}
  width={400}
  height={300}
>
  <div class="lottery-content">
    <div class="lottery-header">🎊 WINNER! 🎊</div>
    <div class="lottery-prize">£50</div>
  </div>
</ScratchToReveal>

Promotional Coupon Code

Marketing use case with coupon code reveal and copy functionality. Demonstrates custom revealed content with interactive elements.

50% OFF

SAVE50

Limited Time Offer

<ScratchToReveal
  scratchText="SCRATCH FOR DISCOUNT!"
  scratchColor="#ff6b6b"
  scratchTextColor="#ffffff"
  width={400}
  height={300}
>
  <div class="coupon-content">
    <div class="coupon-badge">50% OFF</div>
    <div class="coupon-code">SAVE50</div>
    <button onclick={copyCouponCode}>Copy Code</button>
  </div>
</ScratchToReveal>

Customization Options

Customise colours, brush sizes, shapes, and behaviors to match your design system.

Large Brush (60px)

🌟

Revealed!

Square Brush

⬛

Blocky!

Custom Colors

💜

Violet

Manual Reveal

⏸️

Manual

Component Features

🎨

Fully Customisable

Configure colours, textures, text, brush size, and behaviours via props. Supports both solid colours and image textures for scratch surfaces.

⚡

60fps Performance

RAF-based drawing with pixel sampling provides smooth scratching at 60fps even on mobile devices. Optimised for low CPU usage.

📱

Touch Optimised

Unified pointer events work with mouse, touch, and pen input. Touch-action CSS prevents page scrolling during scratch interaction.

🔌

Zero Dependencies

Pure HTML5 Canvas implementation with no external libraries. Fully self-contained and copy-paste ready to any project.

♿

Accessible

Keyboard shortcuts (Space/Enter to skip, 'r' to reset), ARIA labels, live regions for screen readers, and skip button for non-mouse users.

🎯

TypeScript Ready

Fully typed props with comprehensive interfaces. Svelte 5 snippets for revealed content with type safety.

Props Reference

Prop	Type	Default	Description
`scratchColor`	string	'#999999'	Scratch surface colour
`scratchImage`	string	undefined	Optional texture image URL for scratch surface
`scratchText`	string	undefined	Overlay text on scratch surface
`scratchTextColor`	string	'#ffffff'	Colour of overlay text
`scratchTextSize`	string	'24px'	Font size of overlay text
`revealThreshold`	number	70	Percentage scratched to trigger auto-reveal (0-100)
`autoReveal`	boolean	true	Automatically reveal when threshold reached
`brushSize`	number	40	Size of scratch brush in pixels
`brushShape`	'circle' \| 'square'	'circle'	Shape of scratch brush
`width`	number \| 'auto'	'auto'	Canvas width in pixels or 'auto' to match content
`height`	number \| 'auto'	'auto'	Canvas height in pixels or 'auto' to match content
`showProgress`	boolean	false	Show progress bar indicator
`progressColor`	string	'#3b82f6'	Colour of progress bar
`allowReset`	boolean	true	Show reset button after reveal
`resetButtonText`	string	'Reset'	Text for reset button
`skipText`	string	'Skip'	Text for skip button
`onReveal`	() => void	undefined	Callback fired when content is fully revealed
`onProgress`	(percentage) => void	undefined	Callback fired with scratch percentage (0-100)
`disabled`	boolean	false	Disable scratching interaction
`class`	string	''	Additional CSS classes for container
`children`	Snippet	undefined	Svelte 5 snippet for revealed content

Use Cases

🎮

Gamification

Lottery cards, scratch prizes, mystery reveals, and interactive games that engage users through tactile interaction.

🎁

Marketing

Coupon codes, promotional offers, discount reveals, and flash sales that create excitement and increase conversion rates.

✨

Interactive Content

Hidden messages, easter eggs, progressive disclosure, and surprise content that keeps users engaged and exploring.

📚

Education

Quiz answers, learning reveals, memory games, and interactive lessons that make education fun and engaging.