098
AI ready

Sand Reveal

£7
or the whole Vault, £99
Open in new tab

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

Released

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.

Sand Reveal - GSAP animation effect preview

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, from the latest scan. 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.

The Vault opens this source and the whole library.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£99 Get the Vault See what you get

One payment, over 300 products, and future additions to the library.

Documentation

Quick Start

Add the stylesheet and head boot:

In your downloadThe working code for this step, in index.html.

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

In your downloadThe working code for this step, in index.html.

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.

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

£7