Projects in a row with a ring
Scroll, Images, Text
NewFree
Back to the library
The ink-in-water logo
A logo intro in a glass tank full of water: drops of ink fall in with a crater and rings, sink in curls and filaments, then swirl together until they draw the logo, sharp in the middle and still fluid at the edges; a last drop in another colour tints part of it. In the Playground you type your own name or upload your own logo.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The ink-in-water logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script paints the glass tank, the water, the drops and the ink on this canvas -->
<canvas class="palco" data-stage role="img" aria-label="Nerida"></canvas>
<p class="nota">Click or tap to see it again</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
23 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The ink-in-water logo” from Animorio and fit it into my siteWhat it does
A glass tank full of clear water, seen from the side and just a little from above, rises into place on the table, settles with a small springy squash, and the water rocks from side to side before it stops. From above, three drops of blue ink fall one after another, stretched by their speed: each one digs a small crater in the surface, throws up a crown of droplets and a little jet that lets go of a droplet which falls back, and sends rings spreading over the water. Below, the ink goes down as a ring that rolls over on itself, with a thin wake still tied to the surface; then the ring breaks into lobes and soft filaments hang from it, sinking and spreading in a slow current. At a certain point the clouds of each drop start to turn like a vortex round their middle while they shrink, until the ink draws the logo of a made-up brand, Nerida: the logo pulls in for a moment and springs to its size, sharp in the middle, while a soft haze of ink keeps drifting at its edges. Then a last orange drop falls: it sinks onto the logo, which swells a touch where it lands, and the colour spreads through the letters with a spring, leaving the first ones orange, fading into the blue. The logo stays on show; after a few seconds the ink dissolves, every piece drifting its own way, the water clears and new drops fall, in a slightly different order every time. A click restarts it. A picture can take the place of the word: its dark and coloured parts become ink.
How it works
One clock
Everything is painted on a canvas, every frame, from a single number: the time of the water. A GSAP timeline moves it on with ease none, together with a few springy tweens (the tank arriving, the slosh of the water, the bounce of the logo, the spreading colour). Each drop of ink is a function of time, not a step-by-step simulation: so the timeline can be paused, rewound and sent to a label (start, drop, ink, gather, logo, accent, rest, leave) and the frame is always the same.
The rolling ring
Each particle has a place on a doughnut-shaped ring: an angle round the drop's axis and a point on the cross-section, laid along a spiral. The middle of the ring sinks and slows down exponentially, the radius grows, and the cross-section turns backwards (up outside, down inside) like a real smoke ring. After half a second the radius is bent by a sine, the ring breaks into lobes and some of the particles slide along filaments that hang, sink and spread; others make the wake up to the surface.
The current
On top of the shape there is a slow current: the curl of a sum of waves (sin and cos of position and time), worked out with exact derivatives. Being a field without divergence, neighbouring particles move together and the ink looks like a fluid rather than dust. The particles are soft blots painted once on a small canvas with a radial gradient and stamped with drawImage at a low opacity: where they pile up the ink is dark, where they thin out it is a veil.
The logo condenses
The letters are measured on a canvas in the page's face and painted sharp on a separate canvas; the target points are picked from its pixels, marking the ones on an edge. Each cloud turns round its middle while it shrinks onto the points (a growing rotation and a shrinking radius together), then the sharp logo comes out of a light blur made of copies shifted in a circle. The inner particles fade, the edge ones stay and drift: that is the fluid haze round the letters.
The last drop and your logo
The orange drop has its own particles, which end up on the letters near the point it touches. The colour spreads on a second canvas: the logo, then the colour with source-in, then a radial gradient with destination-in whose radius grows with elastic.out. If IMAGE holds an address, the logo becomes that picture: the opacity of every pixel is multiplied by how dark or coloured it is, so a white background stays water. In the Playground, next to the field, there is a button to upload a file.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
NAME | script.js | 'Nerida' | The logo as a word: the ink gathers to draw it. |
IMAGE | script.js | '' | The logo as a picture: the address of a file, or upload it from your computer. If there is one, it takes the place of the word. |
DROPS | script.js | 3 | How many drops of ink fall into the water before the logo forms (1 to 5). |
SWIRL | script.js | 1 | How much the ink curls and turns in the current before it arrives (0 = it goes almost straight to the logo). |
INK | script.js | 1 | How much ink: more particles and denser clouds. |
ACCENT | script.js | true | The last drop in a second colour, which falls on the logo and tints part of it. |
SPEED | script.js | 1 | The speed of the whole animation: 2 is twice as fast, 0.5 half as fast. |
REST | script.js | 4 | How many seconds the logo stays on show before the ink dissolves. |
LOOP | script.js | true | Whether the ink dissolves and the logo is drawn again. With false the logo stays, its edges drifting gently. |
When to use it
To present a logo with a slow, liquid gesture: the opening of a site for a cosmetics brand, a paper mill, a design studio, a gallery, a water or a tea, a preview for a client, a loading screen, a social post. It works with a written wordmark and with a picture.
On phones
The same animation with the sizes adapted: on a tall screen the tank stands upright, the logo is almost as wide as the tank and there are fewer particles because the logo is smaller. A tap restarts it.
With reduced motion
Nothing moves: the tank fades in, then the logo already formed, with its tint and the still haze at its edges. If the animation starts again, the logo fades out and back in.
Pitfalls
- With each particle rolling round its own target the ink turned into shapeless dust, because each one turned round a different centre: now the whole cloud of a drop turns round the same middle while it shrinks, and stays one vortex.
- Dissolving the logo with the current alone, neighbouring particles moved together and drew the letters a second time, lower down: on the way out each one also has its own random direction, and the sharp logo is gone within the first half.
- The blur of the logo, made of shifted copies, reads as double lettering if it is too wide: the shift stays under a twentieth of the letter height.
- With a short logo or an almost square picture the colour wash covered the whole logo and the second tint was lost: its centre and radius depend on the logo's proportions.
- Small, opaque particles looked like dots: the blots are big, with a long falloff and a low opacity, and only get small at the end of the journey (the size follows the square of the progress).
- With the tank's back ease, which rises a little past its place, the shadow stayed full under a tank in mid-air: it shrinks with the distance from the table in both directions.
Libraries
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 12 KB; the libraries: GSAP 28 KB.
Testing
Tested on 11 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
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.
