A grid of moving water
The screen is covered by a grid of a few tens of thousands of cells, each holding a speed and a direction. Every frame, the water carries itself forward, and carries the ink with it.
Real-time fluid headline · WebGL2
Make a mark that moves.
Your headline, written in living ink. Stir it and the letters bleed, curl and marble. Let go and they find their way home.
Grid–
Pressure sweeps–
Frame rate–
Headline intact100%
This browser cannot run WebGL2, so the ink stays still. Open the page in a current browser to stir it.
How it works
Water on a grid, ink that remembers
Pressure keeps it honest
Real water cannot be squeezed. Twenty-odd quick pressure sweeps a frame remove any squeeze from the flow, which is why ink curls around itself instead of bunching up.
Curls, put back
A coarse grid smooths away small eddies. Vorticity confinement finds where the water is spinning and gives a little of that spin back, so the marbling stays fine and alive.
Letters that remember
The ink knows the shape of your headline. Once you let go, stray ink drifts toward the nearest letter and each letter fills back in, crisp to the pixel.
Make it yours
One headline. Five inks. Your words.
- Type your headline in the page like any other heading. The ink traces whatever the browser lays out, at any size and on any line break.
- Pick or mix a palette in one small config file: ink on paper, light on black, or an oil film that shifts colour as it moves.
- Tune the feel: how thick the water is, how curly it stays, how quickly the words come back.
- No libraries: one small script, no build step needed to use it, and it pauses itself when nobody is looking.
Questions
Is the fluid a video?
No. It is simulated live on your graphics card, sixty times a second: the water is a grid of moving cells, and the ink is carried by that water. Nothing is pre-recorded, so no two stirs look the same.
How do the letters find their way back?
The page keeps a picture of the headline. When you stop stirring, stray ink drifts up a blurred copy of that picture toward the nearest letter, and each letter gently fills back in until it is crisp again.
Does it work on a phone?
Yes. It uses WebGL2, which current phones and desktop browsers support. On a phone it runs a smaller grid, lowers its own resolution if frames run slow, and stops drawing when you scroll away.
Is the headline still readable by search engines and screen readers?
Yes. The headline is ordinary HTML text. The ink is drawn on top of it as decoration, so the page reads the same with or without the effect, and before any script runs.
Can I use this on my own website?
Yes. Ink is a website template from Apex Flow Digital: this page, the engine source and one config file for your headline and colours.