Sand Reveal

£5

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

advanced

5 more details

canvaspointer-trackingparticle-systemphysicsmatchMedia

Sand Reveal - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab

About this effect

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.

What's included

7 items

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

Perfect for

3 use cases

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

How it works

1 section

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.

Difficulty Advanced

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Sand Reveal opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

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.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.