Scratch To Reveal
An interactive scratch card component that reveals content when scratched.
1Installation
npm i elementra-ui
2Add Components Using CLI
npx elementra-ui add
Select components using the up/down arrow keys. Press spacebar to select multiple components, then press enter to add them to your src folder.
🎉
3:Radial gradient prize reveal with bounce animation
Import and use the ScratchToReveal component in your project.
🎁
You Won!
$50 Gift Card
4:Circular scratch card with fade animation
Import and use the ScratchToReveal component in your project.
🏆
5:Discount code reveal with spin animation
Import and use the ScratchToReveal component in your project.
Your special code:
FREE50OFF
Valid until May 31, 2025
6:Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| width | number | required | Width of the scratch card in pixels |
| height | number | required | Height of the scratch card in pixels |
| minScratchPercentage | number | 100 | Percentage of the card that needs to be scratched to trigger completion |
| onComplete | function | undefined | Callback function triggered when scratch is completed |
| variant | string | 'gradient' | Style of the scratch overlay: 'gradient', 'radial', 'solid', 'pattern' |
| gradientColors | array | ['#A97CF8', '#F38CB8', '#FDCC92'] | Array of colors for gradient overlays |
| scratchRadius | number | 30 | Size of the scratch area when scratching |
| backgroundColor | string | '#f0f0f0' | Background color of the component |
| revealAnimation | string | 'pop' | Animation on reveal: 'pop', 'fade', 'spin', 'bounce' |
| cursorSize | number | 32 | Size of the scratch cursor in pixels |
| borderRadius | string | '24px' | Border radius of the scratch card |
| showOverlayOnly | boolean | true | When true, hides content until scratched |