# Fogged Glass Reveal

> Look through a rain-covered window into a misty forest. Wipe away soft condensation while refractive beads gather at the edges and rivulets run down the glass.

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

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | Core GSAP only |
| Techniques | webgl-shader, mask-reveal, pointer-effects, touch-gestures |
| 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

A framed window looks out over a misty evergreen forest. Fine condensation softens the view, clear beads catch the landscape and narrow rivulets move down the pane from the moment it opens. A subtle room reflection and recessed frame give the glass a place in the scene.

Drag a finger or mouse across the pane to leave a broad, softly feathered clearing. Displaced beads gather along the stroke and trickle down. Cleared areas persist, with optional re-fog and native Clear glass, Reset and Pause rain controls. The frame and reflection are removable presentation layers.

## Features

- A window frame, inset pane, sill and faint room reflection around the forest view
- Uneven translucent condensation with a smoothly blurred photograph behind it
- Refractive water beads and moving rivulets from arrival, with narrow wet trails
- Broad persistent wipes with feathered edges and displaced droplets
- Direct mouse and touch input, including slow strokes and direction changes
- Keyboard-operable Clear glass, Reset, Re-fog and Pause rain controls
- No automatic hand wipe or reveal threshold
- Tunable brush size, fog strength and droplet motion through data attributes
- Independent instances with image replacement, clear, reset, wipe and teardown methods
- Full photograph fallback for reduced motion, no JavaScript and unavailable WebGL
- Precomputed blur, cached bead textures and bounded portrait moisture surfaces
- Rendering stops offscreen or in a hidden tab and sleeps when rain is paused

## Use Cases

- Landscape photography and travel campaign covers with a tactile reveal
- Seasonal editorial features that evoke a view through a rainy window
- Portfolio photography that visitors uncover at their own pace

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

A WebGL material samples the photograph through a precomputed blur texture and a local condensation mask. Encoded water lenses refract the view; moving drops leave narrow wet paths and collect beads along their descent. Pointer strokes clear moisture and displace water. GSAP manages the motion-preference lifecycle and the explicit Clear glass transition; the renderer manages condensation and droplet movement.

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

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

| Attribute    | Values   | Default | Description                                |
| ------------ | -------- | ------- | ------------------------------------------ |
| `data-brush` | 20–120   | `54`    | Wipe radius in CSS pixels                  |
| `data-fog`   | 0–1      | `0.96`  | Strength of the condensed layer            |
| `data-refog` | `0`, `1` | `0`     | Whether cleared moisture gradually returns |

`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](https://images.pexels.com/photos/10762369/pexels-photo-10762369.jpeg) and [Diablo Lake by Alannah Cavanaugh, Pexels photo 32837501](https://images.pexels.com/photos/32837501/pexels-photo-32837501.jpeg). See the [Pexels licence](https://www.pexels.com/license/). 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

| Dependency                        | Role                                                                                 |
| --------------------------------- | ------------------------------------------------------------------------------------ |
| GSAP 3.12+; demo pinned to 3.15.0 | Motion-preference lifecycle, scoped teardown and the explicit Clear glass transition |
| three.js 0.180.0                  | WebGL material, textures and rendering                                               |

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

## 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 Fogged Glass Reveal](https://gsapvault.com/effects/fogged-glass-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