Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Scratch reveal

A scratch card. Rub the foil with a finger or the mouse and it comes away under the stroke; once enough is gone the rest lifts off and what was underneath settles into place. A Reveal button does the same from the keyboard.

Pro
pnpm dlx shadcn@latest add @caliper/scratch-reveal

You've got a reward

Thanks for inviting three teammates.

Scratch the foil, or reveal it.

Installs components/ui/scratch-reveal.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

  • Promotions, rewards and referral codes.
  • Playful reveals in onboarding or games.

Skip it when

  • Information people need right away; reveal it plainly.
  • Anything that looks like gambling for money.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Enough is enough
Half the foil scratched away is treated as done, so nobody has to clear every corner.

Usage

Hidden until revealed
The prize is kept from assistive technology and the keyboard until it is revealed, and Reveal is always there.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/scratch-reveal

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { ScratchReveal } from "@/components/ui/scratch-reveal"

The worked example comes with Pro

The 28-line example behind the preview opens here, ready to copy.

  • 602 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

ScratchReveal

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
children *ReactNode—What is underneath, such as a code or a prize.
label *string—Says what is hidden, e.g. "Your discount code".
coverTextstring"Scratch here"Text on the foil.
thresholdnumber0.5Share of the foil to scratch away before the rest falls away, 0 to 1.
onReveal(() => void)—

Accessibility

It exposes img semantics, with aria-hidden, aria-label and aria-live kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Surfaces examples