Scratch Card

Rub with a mouse, pen or finger; once enough is gone the rest falls away. For giveaways, discount codes, onboarding surprises and spoilers.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add scratch-card

Usage

Example

import { ScratchCard } from "@/components/galactrex/scratch-card";

<ScratchCard onReveal={claim}>
  <p className="p-8 font-mono text-2xl">GLTX-20</p>
</ScratchCard>

Source

Installs to components/galactrex/scratch-card.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	What is underneath.
`cover`	`string`	`"Scratch here"`	Text printed on the foil.
`threshold`	`number`	`0.55`	Share cleared before the foil falls away.
`brush`	`number`	`34`	Scratch width in px.
`onReveal`	`() => void`	—	Called once when revealed.
`className`	`string`	—	Extra classes for the outer element.

Variants

Promo code. A code underneath, revealed with a single gesture.
Spoiler. Hide an answer until someone wants it.

Accessibility

The foil is a button: Enter or Space reveals everything at once.
Content underneath is in the document, so screen readers can reach it.

Motion and reduced motion

Canvas erasing under the pointer; the foil fades and blurs away once revealed.