Components
Scratch card
A lottery-ticket foil over anything — a coupon, a prize, a spoiler. Drag to scratch: the holographic foil flakes away under your finger, catches the light as you hover, and once enough is gone the rest dissolves (with confetti, if you like).
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { ScratchCard } from '@vizzele/react';
<ScratchCard
label="Scratch for your code"
confetti
onReveal={() => track('coupon_revealed')}
style={{ width: 340, height: 200 }}
>
<Coupon code="VIZZELE20" />
</ScratchCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The prize under the foil. |
label | string | 'Scratch to reveal' | Printed on the foil. |
colors | string[] | holographic silver | The foil gradient. |
brush | number | 22 | Brush radius in px. |
threshold | number | 0.55 | Share of the foil (0–1) to scratch before the rest dissolves. |
confetti | boolean | false | Throw confetti from the card when it is revealed. |
revealLabel | string | 'Reveal' | The keyboard / screen-reader button. |
onProgress | (p: number) => void | — | Scratched share, 0–1. |
onReveal | () => void | — | Called once, when it is revealed. |
Accessibility
- Keyboard and screen-reader users get a Reveal button (it appears when focused).
- The prize is inert — not focusable, not read out — until it is revealed.
- Progress is tracked on a coarse grid, never by reading pixels back, so scratching stays smooth on phones.
- With reduced motion there are no falling flakes and the foil disappears without a fade.