Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo dalla goccia nello stagno
Un’intro di logo nello stile minimal: una goccia vermiglia cade dove va il puntino della i e ci resta; da lì partono anelli sottili, e ogni lettera affiora quando il primo anello la raggiunge, poi ondeggia a ogni anello che passa. Il nome compare dal puntino verso i bordi e si ferma quando l’acqua è di nuovo calma. Nel Playground ci metti il tuo nome.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!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
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
12 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «Il logo dalla goccia nello stagno» da Animorio e adattala al mio sitoCosa fa
La pagina bianco caldo è acqua ferma e il nome è sotto la superficie, invisibile. Dall’alto cade una goccia vermiglia, allungata dalla velocità, e tocca l’acqua proprio dove andrebbe il puntino della i di «lido», il marchio inventato di uno stabilimento sul lago: si schiaccia larga e piatta, torna tonda con una molla e resta lì, come puntino. Dal punto dell’urto partono quattro anelli sottili, uno dopo l’altro, sempre più larghi e più chiari fino ai bordi della pagina. La i affiora per prima, spinta giù dalla goccia; poi ogni lettera viene a galla nel momento in cui il primo anello la raggiunge, la l e la d e per ultima la o. Ogni anello che passa spinge le lettere lontano dal centro e le richiama, come boe, e per un attimo le fa più pesanti e più morbide; le onde si smorzano. Quando l’ultimo anello è uscito dalla pagina le lettere sono ferme, il puntino rosso è al suo posto e in basso compare un piccolo «Replay». Se il nome non ha una i, la goccia diventa il punto finale.
Come funziona
L’orologio dell’acqua
Anelli e lettere dipendono da un solo numero, il tempo dell’acqua: un tween lineare della timeline lo porta da zero alla fine, e a ogni passo una funzione ridisegna tutto. Così la regia resta una timeline GSAP, che si ferma da sola, e il moto è una formula: il raggio di ogni anello è velocità per tempo dalla sua partenza, e sparisce sfumando verso i bordi.
Le lettere come boe
Ogni lettera sa quanto dista dalla goccia e in che direzione. Per ogni anello già passato si somma un’onda smorzata, sin(2πτ/P) per exp(-τ/0.38), dove τ è il tempo da quando l’anello l’ha raggiunta: la somma è lo spostamento lungo la direzione dalla goccia, più forte vicino al centro. Le creste fanno salire gli assi variabili di Fraunces, wght e SOFT, e la lettera si gonfia appena.
La goccia che fa il puntino
La i si disegna senza puntino (la ı senza punto, scritta con String.fromCharCode(0x131)) e la goccia è un’ellisse SVG: lunga e stretta mentre cade con power2.in, larga e bassa all’urto, poi tonda con elastic.out. Il suo posto si misura sulla canvas: l’altezza della i col puntino dà dove sta il punto, la ı dà dove sta l’asta.
Il nome che affiora
Ogni lettera ha opacità zero finché il primo anello non arriva, poi viene su in tre decimi di secondo crescendo dal 93 al 100 per cento: il nome compare dal puntino verso i bordi, nell’ordine delle distanze. La timeline finisce quando l’ultimo anello ha lasciato la pagina e la lettera più lontana ha smesso di muoversi.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'lido' | Il logo: la goccia cade sul puntino della sua prima i, oppure dopo il nome come punto finale. |
RINGS | script.js | 4 | Quanti anelli manda la goccia. |
SPREAD | script.js | 2.4 | I secondi che un anello impiega ad arrivare al bordo della pagina. |
SWELL | script.js | 1 | Quanto gli anelli fanno ondeggiare le lettere (0 = affiorano soltanto). |
DROP | script.js | 0.55 | I secondi che la goccia impiega a cadere. |
SPEED | script.js | 1 | La velocità di tutta l’intro: 2 è il doppio, 0.5 la metà. |
REPLAY | script.js | true | Il piccolo tasto Replay che compare alla fine (un clic ovunque sulla pagina fa ripartire comunque l’intro). |
Quando usarla
Per l’apertura del sito di uno stabilimento al lago o al mare, di una spa, di un hotel con piscina, di un marchio d’acqua, di cosmetici o di tè; in generale per un nome con la i in un sito calmo. Sta bene con un carattere con le grazie e con nomi corti.
Sul telefono
La stessa goccia e gli stessi anelli; il nome prende quasi tutta la larghezza dello schermo e gli anelli arrivano ai bordi nello stesso tempo. Un tocco fa cadere un’altra goccia.
Con il movimento ridotto
Niente anelli e niente onde: la goccia compare in dissolvenza al suo posto, poi il nome intorno a lei.
Trappole
- Il raggio degli anelli che cresce in un ticker senza tween in programma ferma il video dell’anteprima troppo presto: il tempo dell’acqua è un tween della timeline, e la timeline finisce solo quando la lettera più lontana è ferma.
- Una lettera alla stessa distanza zero della goccia non ha una direzione: la i, che sta sotto il puntino, si spinge in giù, come se la goccia l’avesse affondata.
- Il puntino disegnato al centro della casella della i era spostato: in un carattere con le grazie l’asta non sta a metà della larghezza, quindi il centro si misura sull’inchiostro della ı (actualBoundingBoxLeft e Right).
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
