Scratch Card Reveal

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

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, used under the Pexels licence. 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.