Scratch Reveal
Scratch off a cover to reveal text or a picture. Free, MIT · Animated components › Stickers, tickets and boards
A card under a coat that the reader scratches off with a finger or the mouse; past the threshold the rest disappears. The Show button reveals it at once. The coat is a visual effect, not protection: the content is in the page, and whether a prize is due is the app's decision.
Installation
npx valyro-cli@latest add scratch-revealnpx shadcn@latest add https://valyro.xyz/r/scratch-reveal.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { ScratchReveal } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
children * | ReactNode | What the cover hides: text, a picture or a card. It cannot be focused until revealed. | |
cover | ScratchCover | Look of the coat. | |
brushSize | number | 36 | Brush diameter in CSS px. Default 36. |
threshold | number | 0.6 | Share of the card that must be cleared to reveal it all. Default 0.6. |
revealed | boolean | Controlled revealed; use with onRevealedChange. | |
defaultRevealed | boolean | false | Initial revealed when uncontrolled. |
onRevealedChange | (revealed: boolean, reason: ScratchRevealReason) => void | A request to reveal (scratch, button) or cover again (reset). Controlled cards follow revealed. | |
onReveal | (reason: 'scratch' | 'button') => void | Once per cycle, when the threshold is reached or the button is pressed; not when revealed is set from outside. | |
onProgressChange | (progress: number) => void | Cleared share 0…1 while scratching, at most about ten times a second. | |
resetKey | string | number | 0 | A new key clears the scratches of a covered card. It does not cover a revealed one (revealed={false} does). |
resettable | boolean | false | Offer a button that covers the card again once revealed. Default false. |
disabled | boolean | false | No scratching and no button. |
labels | Partial<ScratchRevealLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Peel Sticker — A sticker you peel back by its corner to reveal what is under it
- Tear-off Ticket — A ticket whose stub tears off along the perforation
- Split-Flap Board — Mechanical departure board: only the changed characters flip
- Swipe Action Card — Swipe a card sideways to reveal its actions
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Number Wheel — Number on a spinning wheel with neighboring values
Previous: Peel Sticker · Next: Tear-off Ticket · All Animated components