Scratch Reveal, animated React component

A reward scratch card: rub the silver foil and it wears through where you scratch, shedding dust that falls out of the card. Once enough is gone the rest lifts away with a burst of confetti and the code can be copied to the clipboard.

Pro
Cards

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

You won20% off Pro

Scratch the foil · 0%

Props

Prop	Type	Default	What it does
code	string	"MOTION20"	The code under the foil; the Copy button writes it to the clipboard.
headline	string	"20% off Pro"	Prize line above the code.
eyebrow	string	"You won"	Small uppercase line above the headline.
accent	string	"#bf5af2"	Colour of the eyebrow.
threshold	number	0.55	Share of the foil (0 to 1) that must be scratched before the rest lifts away.
onReveal	() => void	—	Called each time the foil comes off.
onCopy	(code: string) => void	—	Called with the code after it has been copied.
className	string	—	Extra classes for the outer wrapper.
autoplay	boolean	false	Scratches the card, reveals it and starts over until someone touches it.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/scratch-reveal
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
scratch-reveal/
index.ts
scratch-reveal.tsx
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { ScratchReveal } from "@/components/scratch-reveal";

export default function Page() {
  return (
    <main>
      <ScratchReveal />
    </main>
  );
}

Scratch Reveal, animated React component

Play with it

Props

More cards