Scratch Reveal

Стираемое покрытие над текстом или картинкой. Бесплатно, MIT · Анимированные компоненты › Наклейки, билеты и табло

Установка

npx valyro-cli@latest add scratch-reveal

npx shadcn@latest add https://valyro.xyz/r/scratch-reveal.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ScratchReveal } from 'valyro-ui';

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.