# Scratch Card Reveal

> Scratch silver foil to reveal a photograph or discount code. Permanent tracks, directional flakes and an optional automatic finish, switched off by default.

Canonical: https://gsapvault.com/effects/scratch-card-reveal
Live demo: https://gsapvault.com/demos/scratch-card-reveal/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | canvas, touch-gestures, pointer-tracking, mask-reveal, particle-system |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo (2 pages, lowest score shown), 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

An interactive scratch-off surface with the feel of printed silver foil. Each stroke leaves a finely striated opening through the coating, exposing your own image and HTML underneath. Small silver flakes follow the direction of your hand.

Two versions are included: a photograph reveal and a discount-code card with a copy button. Scratches remain exactly where you leave them. Automatic completion is off by default; visitors can enable it and choose a percentage, or use Reveal all whenever they want. Reset restores the coating.

## Features

- Two linked demos: a destination photograph and a sample discount code with clipboard copy
- Permanent scratch marks with irregular teeth and fine silver filaments
- Satin silver coating with customizable printed text
- Directional foil flakes that settle and disappear after a stroke
- Optional automatic completion with an on/off switch and editable percentage; off by default
- Native Reveal all and Reset controls for keyboard and touch
- Normalized scratch paths persist through responsive size changes
- Reduced motion retains scratching with instant completion and no flakes
- Real accessible HTML remains available with JavaScript or GSAP unavailable
- Independent instances, public controls and complete revert cleanup

## Use Cases

- Travel campaigns revealing a destination photograph
- Product launches uncovering the next collection
- Editorial stories inviting readers to discover a hidden image
- Promotional cards with an accessible one-click reveal

## Vibe-Code Ready Setup

This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

A canvas coating sits over ordinary HTML. Pointer strokes remove narrow, uneven bands from the silver surface and emit lightweight foil particles. The effect samples cleared coverage. If automatic completion is enabled, reaching the selected threshold starts a sweep; otherwise the coating only changes where the visitor scratches.

GSAP controls the completion sweep and particle clock. Scratch paths are stored relative to the card, allowing the coating to redraw after a resize without losing the visitor's marks. Each instance owns its media context, input handlers and observers, with a public revert method for removal.

## Documentation

How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

**In your HTML head:**

_Code snippet omitted: it ships with the download._

**In your page body:**

_Code snippet omitted: it ships with the download._

**Before the closing body tag:**

_Code snippet omitted: it ships with the download._

### Using It With Your Own Design

The two demo pages share the same script and stylesheet. Their version links are ordinary anchors, so both remain reachable without JavaScript. Keep either page, or remove the version navigation for an embedded card.

The required hooks are `[data-scratch-card]` and a descendant `[data-scratch-stage]`. Keep all content underneath as ordinary semantic HTML. The script creates and owns two decorative canvases. `[data-scratch-reveal]`, `[data-scratch-reset]` and `[data-scratch-status]` are optional hooks, but retain the Reveal all button as a keyboard alternative. Place the controls outside the stage, inside their instance root. Native links inside the underlying content remain keyboard accessible.

The discount demo contains the example code `HELLO20`; replace the percentage, code and offer copy together. It does not create a coupon in a checkout system. Keep `[data-scratch-code]` on the code text and `[data-scratch-copy]` on a button **outside the scratch stage**, so copying remains available without clearing every part of the coating. Clipboard failures select the code for manual copying.

The neutral page background, `.scratch-demo` viewport layout, destination typography, photograph and Mona Sans font are demo styling. Remove or replace them freely. The minimal example intentionally omits the full-screen demo wrapper: set your card dimensions within your existing layout.

Keep the stage positioned, with a definite nonzero height, clipping and isolation. The generated canvases need absolute positioning, full stage dimensions and `pointer-events: none`; the coating canvas overrides that with `pointer-events: auto` and `touch-action: none`. These rules are in `style.css`. Touch gestures beginning on the coating scratch the card; the rest of a host page still scrolls normally. Content does not depend on a pre-hide: without successful initialization it stays visible. `.is-live` controls the optional demo toolbar.

The silver artwork uses `data-coating-title`, `data-coating-subtitle`, `data-coating-label` and `data-coating-footer`. Keep these short enough to fit your card; use the provided mobile proportions as a starting point. The canvas text is decorative and hidden from assistive technology. Essential information belongs in the HTML underneath.

### Options

| Attribute on the root   | Default                    | Meaning                                                                                                  |
| ----------------------- | -------------------------- | -------------------------------------------------------------------------------------------------------- |
| `data-enabled`          | `true`                     | Set `false` to leave the content uncovered and skip initialization.                                      |
| `data-auto-reveal`      | `false`                    | Enable automatic completion at the threshold; scratching never automatically clears the card by default. |
| `data-threshold`        | `0.55`                     | Cleared fraction that starts completion when auto-reveal is enabled; clamped to 0.1–0.95.                |
| `data-brush`            | `64`                       | Scratch width in desktop CSS pixels; clamped to 20–140, scaled on narrow cards.                          |
| `data-coating-title`    | `Scratch here.`            | Main printed foil line.                                                                                  |
| `data-coating-subtitle` | `See what is underneath.`  | Second printed foil line.                                                                                |
| `data-coating-label`    | `WAITING TO BE DISCOVERED` | Small printed label.                                                                                     |
| `data-coating-footer`   | `Drag to uncover.`         | Small printed footer line.                                                                               |

Options are read during mounting. The optional checkbox `[data-scratch-auto]` and number input `[data-scratch-threshold]` change completion settings live; the number input uses percentages (10–95). Reset preserves the chosen settings. Use the API setters below to change them from code, and revert/mount again after changing the brush attribute.

### Accessibility

- Reveal all and Reset are native keyboard-operable buttons with visible focus indicators.
- Real pointer and touch dragging share the scratch interaction. Dragging is optional.
- The status is a polite live region, reporting coverage at bounded intervals during input.
- Photographs and text remain ordinary accessible HTML; decorative canvases are `aria-hidden`.
- Reduced motion retains direct scratching, removes flakes, and completes immediately without a sweep. Changes to the preference are handled while mounted.
- Without JavaScript or when GSAP cannot load, the actual content remains visible and inactive demo controls stay hidden.
- The overlay is a visual reveal, not a way to protect secrets or gate access to information.

### Dependencies

GSAP **3.12+** is required; the demo is pinned to **3.15.0**. No plugins or Lenis are needed. The effect uses standard 2D Canvas, Pointer Events, ResizeObserver and MutationObserver. Mona Sans from Google Fonts is optional demo typography.

### Images

The bundled `assets/img/discovery.webp` is an optimized derivative of [Alannah Cavanaugh’s Diablo Lake photograph](https://www.pexels.com/photo/scenic-view-of-turquoise-lake-and-snowy-mountains-32837501/), used under the [Pexels licence](https://www.pexels.com/license/). The source, photographer and licence are recorded in `assets/img-manifest.json` and as `land-diablo-lake` in the repository stock library. The demo runs using its local derivative, without remote image requests.

To change the photograph, replace the local image and its alt text and intrinsic dimensions in your HTML. Within the GSAP Vault source repository, edit `assets/img-manifest.json` and run `bun scripts/build-template-assets.ts scratch-card-reveal` to bake a new derivative. The baker is an authoring tool, not a runtime dependency.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Scratch Card Reveal](https://gsapvault.com/effects/scratch-card-reveal)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Hover Underline](https://gsapvault.com/effects/hover-underline.md): Four material link underlines (an exit-through line, marker sweep, hand-drawn wave, and an endlessly travelling wave) with coordinated type and active-index responses.
- [3D Card Flip Gallery](https://gsapvault.com/effects/3d-card-flip.md): Tactile GSAP 3D cards with deep perspective, reactive edge lighting and shifting shadows. Flip on hover, keyboard focus or tap, with grouped auto-close.
- [Tailwind Component Remixer](https://gsapvault.com/effects/tailwind-class-playground.md): Generate fresh Tailwind component recipes with procedural SVG artwork, coordinated colour palettes and animated GSAP layout transitions.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt