The ripple logo

Intro, PhysicsGSAPMediumCompressed weight: Demo 5.1 KBGSAP 28 KBFreeDownload the zip

A minimal-style logo intro: a vermilion drop falls where the dot of the i belongs and stays there; thin rings run out from it, and each letter surfaces when the first ring reaches it, then rocks with every ring that passes. The name appears from the dot outwards and goes still when the water is calm again. In the Playground you type your own name.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The ripple logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <!-- the stage: a drop falls on the dot of the i, the rings run out and every ring that passes a letter brings it up -->
    <svg class="palco" data-stage role="img" aria-label="lido" xmlns="http://www.w3.org/2000/svg">
      <g data-rings></g>
      <g data-word></g>
      <ellipse class="goccia" data-drop rx="1" ry="1" />
    </svg>
    <button class="ancora" type="button" data-replay>Replay</button>
  </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.

12 values to change

Open the Playground

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 ripple logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The warm white page is still water and the name is under the surface, unseen. A vermilion drop falls from above, stretched by its speed, and hits the water right where the dot of the i of “lido” would be, the made-up brand of a lakeside beach: it splashes wide and flat, springs back round and stays there, as the dot. From the point of impact four thin rings run out, one after the other, wider and fainter until the edges of the page. The i surfaces first, pushed down by the drop; then each letter comes up the moment the first ring reaches it, the l and the d and last the o. Every ring that passes pushes the letters away from the centre and draws them back, like buoys, and for an instant makes them heavier and softer; the waves die away. When the last ring has left the page the letters are still, the red dot is in its place and a small Replay appears at the bottom. If the name has no i, the drop becomes its full stop.

How it works

The water’s clock

Rings and letters depend on a single number, the water’s time: a linear tween in the timeline takes it from zero to the end, and at every step one function redraws everything. So the direction is still a GSAP timeline, which stops by itself, and the motion is a formula: each ring’s radius is speed times the time since it started, and it fades away towards the edges.

Letters like buoys

Each letter knows how far it is from the drop and in which direction. For every ring that has already passed, a damped wave is added, sin(2πτ/P) times exp(-τ/0.38), where τ is the time since that ring reached it: the sum is the shift along the direction from the drop, stronger near the centre. The crests raise Fraunces’s variable axes, wght and SOFT, and the letter swells slightly.

The drop that makes the dot

The i is drawn without its dot (the dotless ı, written with String.fromCharCode(0x131)) and the drop is an SVG ellipse: long and narrow while it falls with power2.in, wide and low at the impact, then round with elastic.out. Its place is measured on the canvas: the height of the dotted i gives where the dot sits, the ı gives where the stem is.

The name surfacing

Each letter has zero opacity until the first ring arrives, then comes up in three tenths of a second growing from 93 to 100 per cent: the name appears from the dot outwards, in order of distance. The timeline ends when the last ring has left the page and the farthest letter has stopped moving.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'lido'`	The logo: the drop lands on the dot of its first i, or after the name as a full stop.
`RINGS`	script.js	`4`	How many rings the drop sends out.
`SPREAD`	script.js	`2.4`	The seconds a ring takes to reach the edge of the page.
`SWELL`	script.js	`1`	How far the rings rock the letters (0 = they only surface).
`DROP`	script.js	`0.55`	The seconds the drop takes to fall.
`SPEED`	script.js	`1`	The speed of the whole intro: 2 is twice as fast, 0.5 half as fast.
`REPLAY`	script.js	`true`	The small Replay button that appears at the end (a click anywhere on the page restarts the intro anyway).

Try them in the Playground

When to use it

For the opening of the site of a lakeside or seaside beach club, a spa, a hotel with a pool, a water, cosmetics or tea brand; in general for a name with an i on a calm site. It suits a serif typeface and short names.

On phones

The same drop and the same rings; the name takes almost the whole width of the screen and the rings reach the edges in the same time. A tap drops another drop.

With reduced motion

No rings and no waves: the drop fades in in its place, then the name around it.

Pitfalls

A ring radius growing in a ticker with no tween scheduled stops the preview video too early: the water’s time is a tween in the timeline, and the timeline only ends when the farthest letter is still.
A letter at zero distance from the drop has no direction: the i, which sits under the dot, is pushed down, as if the drop had dipped it.
A dot drawn at the middle of the i’s box was off: in a serif face the stem is not in the middle of the width, so the centre is measured on the ink of the ı (actualBoundingBoxLeft and Right).

Libraries

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 5.1 KB; the libraries: GSAP 28 KB.

Testing

Tested on 19 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.