Fogged Glass Reveal

Quick Start

1. In the HTML head, include the stylesheet and the synchronous availability probe. The probe gives supported browsers a soft photographic loading state; every unavailable-dependency path restores the clear photograph.

Code snippet omitted: it ships with the download.

2. Put this markup in the body. The root must have a nonzero width and height.

Code snippet omitted: it ships with the download.

3. Before closing the body, load GSAP, then import three.js and append the effect script. Keep the failure handlers: an inaccessible CDN must leave the image usable. The included demo also preloads the three.js module, its core module and the effect script in the head so their requests overlap; the first pane adopts the head probe’s canvas and context at mount. Failure handlers release the pending context.

Code snippet omitted: it ships with the download.

Already using three.js? Reuse your existing module and assign it to window.THREE before loading this classic script; do not load a second copy or use the discontinued UMD build. The script automatically mounts every [data-fogged-glass] root when the DOM is ready.

Using It With Your Own Design

Markup contract: each [data-fogged-glass] needs a [data-glass-source] containing one image. Controls are optional and are selected by their documented data attributes, within that root. Put essential text and links above the canvas; access to important content must never depend on wiping.

Demo styling: the forest photograph, Mona Sans type, cue and full-viewport size are replaceable. .glass__frame contains the decorative mullion and sill; .glass__reflection adds a faint room reflection. Remove those elements for a full-bleed, unframed pane and position your own controls. The renderer does not select or depend on them. No particular text or decorative class is required by the script.

Required CSS: the root needs position: relative, a defined height and overflow: hidden; the canvas and source fill it. Preserve the is-live and is-fallback rules. The source remains available for no JS, failed dependencies, reduced motion and unavailable WebGL. Keep controls above the canvas and retain a visible focus indicator. touch-action: none lets a finger wipe in every direction; reserve this setting for a deliberate interactive stage inside a scrollable page.

Options

data-drop-motion="0" freezes rain and droplet movement for still captures; the default is 1. Use setDropMotion(false) or the Pause rain control to pause it after mount. Pause retains the current wet trails and lets the visitor keep wiping. data-preserve-buffer="1" retains WebGL pixels for a custom canvas export; it is off by default and automatically enabled for [data-thumbnail-target].

Options are read at mount. Use setRefog() to change re-fog while mounted. Explicit zero values are supported. Rivulets move from arrival, but there is no automatic hand wipe or coverage threshold. Clear glass removes all moisture and keeps the scene clear until Reset, including when Re-fog is selected.

Accessibility

Native buttons support Enter and Space; the checkbox supports Space. Pause rain stops autonomous droplet motion and updates its pressed state and label. The canvas is decorative and hidden from assistive technology. The source image keeps its alternative text, and meaningful DOM copy is never erased. The controls have visible focus styles and do not capture pointer drags.

Touch is the primary mobile interaction, with a brush measured in CSS pixels. On reduced-motion systems, the clear source photograph is shown without a canvas or inactive controls. The same usable photograph appears without JavaScript, with blocked dependencies or without WebGL. Changing the motion preference tears down or remounts the scene.

Choosing Your Images

Pick a landscape with fine, visible detail near the centre: trees, distant buildings or a mountain edge make a wiped trail easy to read. Large areas of empty sky have little detail to uncover. The source is cover-fitted without distortion; check both landscape and portrait crops, especially if your subject sits near an edge. A 1920–2048px image is enough for a full-bleed stage in most layouts.

The shipped forest and lake are Pexels photographs, baked locally through the image manifest. Source files: misty forest, Pexels photo 10762369 and Diablo Lake by Alannah Cavanaugh, Pexels photo 32837501. See the Pexels licence. The manifest records the original URLs alongside the committed local masters. Their stock-library IDs are land-forest and land-diablo-lake. The alternate lake is included to demonstrate that the effect works with a different subject and contrast range.

Browser Support

Requires a modern browser with WebGL, ES modules/import maps, Pointer Events and ResizeObserver. Current Chrome, Edge, Firefox and Safari support this setup. Browsers without those graphics capabilities receive the source image. A production page must permit its selected CDN in its Content Security Policy, or self-host the same dependencies.

Performance

Rendering stops while offscreen or when the tab is hidden, and sleeps when rain is paused and re-fog is off. Pixel ratio is capped at 1.5 on fine pointers and 1.25 on coarse pointers. The moisture surfaces cap their longest edge at 768px, including portrait layouts. The background blur is baked once per image instead of sampled repeatedly every frame; stationary beads reuse a cached layer. The first pane adopts the head probe’s WebGL context instead of discarding it and allocating another, and normal rendering does not preserve its drawing buffer. To reduce cost further, lower the pixel ratio cap first. The moisture surfaces retain normalized wipes across resizes. Removal of the root and revert() both release the WebGL context.

Dependencies

No GSAP plugins or Lenis are required. Droplet movement and condensation shading are handled by the effect's own renderer, not GSAP.