# Sand Reveal

> Brush uneven mounds of pale sand across a graphite board, leaving fine grain trails and gathering material into shaded piles.

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

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | Core GSAP only |
| Techniques | canvas, pointer-tracking, particle-system, physics, matchMedia |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 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

Loose sand poured over your own text or imagery. Irregular mounds, thin patches and exposed areas give the surface depth before the first stroke. Drag to brush material into uneven heaps, leaving scattered grains and fine bristle traces behind. Fast gestures flick loose grains forward; reverse direction to move accumulated material again.

## Features

- Uneven poured mounds, thin patches and exposed areas on load and reset
- Coherent mound shading, granular edges and fine bristle residue
- Broad directional heaps with brief settling and fast-stroke loose grains
- Persistent brushed paths with Reset sand and Clear board controls
- Adjustable brush radius and normalized-point programmatic sweeps
- Touch input, keyboard-operable controls and reduced-motion support
- Independent instances with resize preservation, teardown and visible content fallbacks

## Use Cases

- Material-led interactive brand experiences
- Playful typography and message reveals
- Interactive art and photographic portfolios

## 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

Drag across the board to brush sand into piles, leaving fine grains in the cleared path. Quicker gestures scatter loose grains ahead of the brush. Sweep back through accumulated sand to move it again. Reset sand restores the uneven poured mounds; Clear board exposes all the content immediately.

## 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

Add the stylesheet and head boot:

_Code snippet omitted: it ships with the download._

Add one surface and native controls, then GSAP and the effect script:

_Code snippet omitted: it ships with the download._

### Using It With Your Own Design

**Markup contract:** `[data-sand-reveal]` owns an independent instance. An optional descendant `[data-sand-board]` defines the sand-covered area; otherwise the root itself is used. Place text, images or other content inside that area. Optional `[data-sand-reset]`, `[data-sand-clear]`, and `[data-sand-brush]` controls must be descendants of the same root. A brush control can be a native range input. The script creates and removes its own `.sand-surface` canvas and applies `.is-live` to the root.

**Demo-only styling:** the graphite board, rim, arrow, typography, full-viewport layout and toolbar can all be replaced. The demo uses Mona Sans from Google Fonts, but the effect has no font dependency. The drawing is generated locally; no image assets or texture downloads are required.

**Required CSS:** the drawing area needs a nonzero width and height, `position: relative`, and `overflow: hidden`. Keep `.sand-surface` absolutely positioned with `inset: 0`, `width: 100%`, `height: 100%`, `z-index: 1` and `touch-action: none`. Controls must remain outside or above the canvas. Scope any control visibility to the instance's `.is-live` class. Content remains in the DOM and must remain visible without JavaScript. Use a sufficiently contrasting background for your own content.

### Options

| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-sand-reveal` | Present | Required | Mount an independent surface. |
| `data-sand-board` | Present on a descendant | Root | Separate the canvas area from the controls. |
| `data-brush` | Number, 24–140 | `65` | Brush radius in CSS pixels. |
| `data-starter` | `true`, `false` | `false` | Show a static, partially swept starting state. |

The height field stores moved material until reset. Its irregular edge and fine residual grains are intentional. Material brushed beyond the canvas falls off the board. Resize preserves the relative shape of swept areas; it is not a physically exact sand simulation.

### Accessibility

- Mouse, pen and touch use direct dragging with pointer capture. The surface does not require hover.
- Native **Clear board** and **Reset sand** buttons provide a keyboard alternative to dragging. Preserve their visible focus styles.
- With reduced motion enabled, the board starts clear. Airborne grains and animated settling stop. Reset allows manually brushing the sand with an immediate response. Switching the preference while mounted clears the board and stops motion.
- Without JavaScript, Canvas 2D support or GSAP, underlying content remains visible and demo controls stay hidden.
- The canvas is decorative to assistive technology. Keep semantic content and image alternatives in the DOM; do not hide essential content from screen readers until it is brushed away.

### Lifecycle and performance

`revert()` releases pointer capture, removes listeners and observers, stops the owned GSAP ticker, reverts media contexts, removes the canvas and unregisters the instance. A detached root also cleans itself up. Multiple instances are independent. Rendering is demand-driven and stops once grains have settled; no idle render loop runs. The canvas caps its resolution for larger displays. No global GSAP animations or scrolling settings are changed.

### Dependencies

- GSAP 3.12+ (demo pinned to 3.15.0), core only.
- Canvas 2D, Pointer Events, ResizeObserver and MutationObserver in a modern browser.
- No GSAP plugins, WebGL, Lenis, external imagery or build step required for the downloaded effect.

## 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 Sand Reveal](https://gsapvault.com/effects/sand-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