Ink that reveals

The pointer moves over the paper like a wet brush: where it passes the paper turns into ink, a real WebGL fluid, and underneath the same word appears, inflated like a silver balloon. Then the paper closes again.

WebGL, HoverWebGL, Canvas, GSAPAdvancedLifetime

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.

/* L'inchiostro che scopre
   Una parola nera stampata su carta bianca. Il puntatore ci passa sopra come un pennello bagnato:
   dove passa, la carta diventa inchiostro nero e sotto compare la stessa parola gonfia, come un
   palloncino d'argento. Dopo qualche secondo l'inchiostro si ritira e la carta si richiude.
   L'inchiostro è un fluido vero, risolto in WebGL2 su una griglia: il puntatore spinge la velocità
   e versa colore, la velocità trasporta il colore, la pressione tiene il fluido senza compressioni,
   e a ogni fotogramma velocità e colore sbiadiscono un poco. Il bordo netto viene da una soglia.
   La parola gonfia nasce da una mappa d'altezza (la parola sfocata): le sue pendenze danno le
   normali, e le normali riflettono un orizzonte come fa il metallo. */

/* ---- valori da cambiare ---- */
const TOCCO = matchMedia('(hover: none), (pointer: coarse)').matches;
const GRIGLIA = TOCCO ? 128 : 256;        /* celle del fluido sul lato corto */
const RIS_INCHIOSTRO = TOCCO ? 384 : 512; /* risoluzione dell'inchiostro sul lato corto */
const ITERAZIONI = TOCCO ? 12 : 20;       /* passi per la pressione: più passi, fluido più preciso */
const SPINTA = 6;                         /* quanto il pennello spinge il fluido (per ogni cella di movimento) */
const PENNELLO = 0.075;                   /* raggio del pennello, in frazioni del corpo della parola */
const RESTA_VELOCITA = 0.962;             /* quanto resta della velocità a ogni sessantesimo di secondo */
const RESTA_INCHIOSTRO = 0.988;           /* quanto resta dell'inchiostro: più vicino a 1, più dura la traccia */
const RICCIOLI = 12;                      /* quanto il fluido si arriccia (0 = niente vortici) */
const SOGLIA = 0.5;                       /* dove l'inchiostro diventa netto */
const DENSITA = 3.9;                      /* moltiplica l'inchiostro prima della soglia */
const GONFIO = 5;                         /* quanto è bombata la parola d'argento */
const ATTESA_FANTASMA = 2500;             /* millisecondi senza gesti prima che il pennello dipinga da solo */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;

The code for this animation is part of lifetime access.

The preview stays open: watch it, slow it down, try it on your phone.

Lifetime access

What it does

A huge black word printed on white paper. Moving the pointer (or a finger) tears the paper into a trail of black ink that curls and slides like water; inside the trail you see the same word, but inflated and silver, with the reflections of a metal balloon. Within a few seconds the ink withdraws and the paper closes by itself. If nobody touches it, an invisible brush draws a slow figure of eight.

How it works

A fluid on a grid

Velocity, pressure and ink are half-precision textures (RGBA16F) drawn by one full-screen triangle. Every frame: vorticity, divergence, twenty Jacobi steps for the pressure, gradient subtraction, then the velocity carries itself and the ink. It is Jos Stam’s stable fluids method.

The brush

Every pointer movement pours two Gaussian splats at the same point: into the velocity, equal to the movement counted in grid cells times the push, and into the ink. The brush is 7.5% of the word’s font size. On fast strokes the splats repeat along the segment, so the trail has no holes.

The sharp edge

The ink is soft, but the screen cuts it at 0.5 after multiplying it by 3.9, with a smoothstep just one screen pixel wide (fwidth): a torn-paper edge, without steps. The ink loses 1.2% every sixtieth of a second and falls below the threshold after about three seconds: the paper closes.

The inflated word

The same word is drawn white on black on a 2D canvas, at the exact position of the letters on the page, then blurred three times and put through a square root: a height map with steep sides and a round top. Its slopes give the normals, and the normals reflect a horizon, light sky above and dark ground below: metal.

Values to change

Name	File	Default	What it changes
`SPINTA`	script.js	`6`	How hard the brush pushes the fluid: the velocity poured is the pointer’s movement, counted in grid cells, times this number.
`PENNELLO`	script.js	`0.075`	Brush radius, as a fraction of the word’s font size: that way the trail stays in proportion on phones too.
`RESTA_INCHIOSTRO`	script.js	`0.988`	How much ink is left every sixtieth of a second: the closer to 1, the longer the trail lasts.
`RICCIOLI`	script.js	`12`	How much the fluid curls. With 0 no vortices.
`GONFIO`	script.js	`5`	How rounded the silver word is.

When to use it

For the first screen of a brand with a strong word: the simplest gesture, moving the mouse, becomes a game with the logo. Avoid it over text meant to be read.

On phones

The finger paints. The fluid uses a smaller grid and fewer steps, and the canvas works at a density of 1.5 at most. Inside an iframe a vertical finger stays with the page: it only paints sideways.

With reduced motion

No fluid and no ghost brush: the silver word shows in a still circle under the pointer.

Pitfalls

RGBA16F targets are not renderable everywhere: request EXT_color_buffer_float, test a framebuffer and, if it is not complete, fall back to a CSS mask.
The inflated word must be drawn where the page puts each letter (each letter’s offsetLeft and an invisible mark on the baseline), otherwise the two twins do not match.
The canvas has premultiplied alpha: colour times alpha, and the colour must not exceed 1 or the highlights turn into halos.
The fluid must not run when nobody sees it: stop it off screen (IntersectionObserver) and when the tab is hidden.

Libraries

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Weight: 28 KB of our own files.

Testing

Tested on 27 September 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: Done

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.

From the same family

The dash relief

WebGL, 3D, Hover

NewLifetime

Raking light

WebGL, Hover