# Ink Fluid Reveal > Stir a photograph like ink in water. A real fluid simulation curls into eddies under your pointer and dissolves an ink-wash print to reveal the full-colour image, or a second photo, before it slowly heals. Canonical: https://gsapvault.com/effects/ink-fluid-reveal Live demo: https://gsapvault.com/demos/ink-fluid-reveal/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | Core GSAP only | | Techniques | webgl-shader, fluid-simulation, mask-reveal, pointer-effects, velocity-reactive, 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 photograph printed as a monochrome ink wash sits over its own full-colour original. Move across it and you are stirring a real fluid: every stroke pushes current and ink into the simulation, the flow curls into eddies that keep rolling after your hand stops, and wherever the ink gathers the print dissolves to colour along a ragged, wet edge. The same current bends the photograph as it moves, and splits its colour along the flow, so the image looks like it is under water rather than behind a mask. Hold still to pour a turning pool of ink; tap to throw a splash. After a few seconds the ink thins and the print heals over. A second mode swaps the colour original for a different photograph, so the ink tears one image open onto another. ## Features - A genuine incompressible fluid simulation (advection, vorticity and pressure projection) on the GPU, not a hover distortion - Eddies that curl and keep rolling after the pointer stops, with walls at the frame edges - Ink-wash print over the full-colour original, revealed through a fibrous, feathered mask with a dark drying edge - Refraction and a colour split along the current, so both layers move with the water - Three gestures: stroke to stir, hold to pour a turning pool, tap to splash - Second-photo mode: tear one photograph open onto another, switched with a splash - Tunable brush, force, turbulence, how long the ink lingers and how far it refracts, from data attributes - Idle drift and an opening stroke, each switchable off - Keyboard operable: arrow keys stir, Enter or Space splashes - Touch: horizontal strokes and taps stir while vertical swipes still scroll the page - A small API to splash, stroke, switch mode, clear, pause and resume from code - Full-colour photograph as the fallback for reduced motion, no JavaScript and no WebGL ## Use Cases - Hero sections for architecture, fashion and product photography that should reward a first move - Before and after, day and night or colourway reveals, stirred rather than slid - Editorial features and campaign microsites with an image the visitor plays with - Portfolio covers where the work appears from under an ink print ## 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 Three.js runs a stable-fluids simulation in half-float render targets. Each frame the flow is advected along itself, vorticity confinement feeds energy back into small eddies, and a pressure solve makes the fluid incompressible, so a push turns into a swirl rather than a smear. Pointer strokes add velocity and ink along their path; a held press adds a small vortex and a tap adds a ring of pushes. The picture is drawn by one shader. It prints the photograph as a two-tone ink wash, thresholds the ink density through a fibrous noise into a mask, and shows the colour original (or a second photograph) through it, both displaced by the current and split in colour along it. GSAP handles the reduced-motion branch, the teardown, the load reveal and the crossfade between modes; the simulation runs in its own frame loop, only while the effect is on screen. ## 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. Add to your HTML ``:** _Code snippet omitted: it ships with the download._ The inline script is not optional. The photograph inside the effect is the fallback for no JavaScript, no WebGL and reduced motion, and without this it paints for the half second it takes three.js to arrive, then gets swapped for the canvas. The probe runs before first paint, stamps `html.gl` when a canvas is coming, and the stylesheet hides the photograph under that class. No JavaScript, no class, the photograph shows; the effect removes the class again if it cannot build a renderer after all. **2. Add the effect HTML anywhere in your ``:** _Code snippet omitted: it ships with the download._ **3. Add before the closing `` tag:** _Code snippet omitted: it ships with the download._ The script reads the photograph, drops a canvas in front of it, and hides the photograph once the canvas is actually there. **Why the import map rather than a plain `