lumen 3.0 beta
<ScratchToReveal variant="minimal" />Clean surfaces and measured motion.
Installation
Use the shadcn CLI to copy the component source and its dependencies into your own project. Only the Minimal world, with motion, plus the Ovio theme, world, motion items.
npx shadcn add JanaSundar/ovio/scratch-to-reveal-minimal↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.
Usage
Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.
TSXvariant="minimal"
import { ScratchToReveal } from "@/components/ovio/scratch-to-reveal/scratch-to-reveal"
<ScratchToReveal
variant="minimal"
label="Invite code"
children={<code>LMN-7K2F-Q9</code>}
/>Built with: Canvas 2D · Motion for React (spring pop; Retro: stepped)
Motion in Minimal: Small springs, opacity and layout shifts that show state.
Props
Control the data, selected world, animation behavior, and callbacks.
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | What the coating hides. It stays inert, and hidden from assistive tech, until revealed. Images fill the pad. |
| variantdefault minimal | minimalcraftretrotoy | Which world to render. Uses the nearest OvioProvider when there is one. |
| revealed / defaultRevealeddefault false | boolean | Controlled, or the starting state. Setting it back to false puts a fresh coating on. |
| onRevealedChange | (revealed: boolean) => void | Fires when scratching, or Enter or Space, reveals it. |
| onProgress | (share: number) => void | Fires while scratching, with the share scratched away from 0 to 1. |
| thresholddefault 0.5 | number | The share to scratch, 0–1, before the rest of the coating clears by itself. |
| hintdefault "Scratch to reveal" | string | Printed on the coating until the first scratch. |
| labeldefault "Hidden content" | string | Accessible name for the pad, printed by the worlds. |
| aspectRatiodefault "3 / 2" | string | CSS aspect ratio of the pad. |
| disabled | boolean | Ignores scratching and keys; the coating stays on. |
| className | string | Merged onto the root. |