The ScratchToReveal component covers your content in a foil the user rubs away with a pointer, firing onComplete and dropping the rest of the foil once enough has been cleared.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/scratch-to-reveal.jsonEverything Scratch to Reveal accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | No default | Content hidden under the foil |
| width | number | 300 | Width of the scratch area, in pixels |
| height | number | 200 | Height of the scratch area, in pixels |
| brushSize | number | 22 | Radius of the scratching brush, in pixels |
| threshold | number | 0.55 | Fraction of the foil (0–1) that must be cleared before the rest falls away |
| coverFrom | string | "#9ca3af" | Start colour of the foil gradient |
| coverTo | string | "#4b5563" | End colour of the foil gradient |
| label | string | "Scratch here" | Prompt printed on the foil, scratched away with it |
| onComplete | () => void | No default | Fired once, when the threshold is crossed |
| className | string | '' | Additional CSS classes applied to the card |
You won
BEATS-30
30% off, one use only
Drag across the foil.