Il pulsante d'acqua
Pulsanti, SVG, Fisica, Hover
NuovaGratis
Tutti i componenti
Il suggerimento che sale dalla parola
Una frase con tre parole spiegate, sottolineate d’inchiostro: fermandosi su una, la sottolineatura si gonfia intorno alla parola, che diventa bianca, e da lì sale una colonna d’inchiostro che si apre nel suggerimento, attaccato alla parola da un collo morbido. Passando a un’altra parola non si aspetta: l’inchiostro scende nella prima mentre sale dalla seconda.
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 tooltip that rises from the word</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/source-serif-4@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tooltip that rises from the word: a sentence with three words explained. The ink of a word's underline
swells round the word, and the tooltip rises out of it on a liquid neck; going to another word, the ink sinks
back into the first one while it rises from the next. The ink is painted on the svg, the words on top -->
<div class="gloss" data-gloss data-autoclic>
<svg class="gloss__ink gloss__ink--lines" aria-hidden="true" data-lines></svg>
<svg class="gloss__ink" aria-hidden="true" data-ink></svg>
<p class="gloss__text" data-text>
Fix the <button class="term" type="button" aria-describedby="tip-kerning" data-term><span class="term__word">kerning</span><i class="term__base"></i></button>
in titles, open the <button class="term" type="button" aria-describedby="tip-tracking" data-term><span class="term__word">tracking</span><i class="term__base"></i></button>
and catch every <button class="term" type="button" aria-describedby="tip-widow" data-term><span class="term__word">widow</span><i class="term__base"></i></button>
you set.
</p>
<span class="tip" role="tooltip" id="tip-kerning" data-tip>The space between one particular pair of letters.</span>
<span class="tip" role="tooltip" id="tip-tracking" data-tip>Even space added across a whole run of letters.</span>
<span class="tip" role="tooltip" id="tip-widow" data-tip>A paragraph’s last line, alone at the top of a page.</span>
</div>
</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.
22 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 suggerimento che sale dalla parola» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una frase nera in un carattere da libro, su due righe: Fix the kerning in titles, open the tracking and catch every widow you set. Kerning, tracking e widow sono blu oltremare, sottolineate da una riga dello stesso blu che all’apertura della pagina si disegna da sinistra, una parola dopo l’altra. Fermando il puntatore su una parola la sua riga si ispessisce appena; dopo mezzo secondo l’inchiostro sale dalla riga e avvolge la parola in una pillola blu, e le lettere diventano bianche man mano che l’inchiostro le copre. Dalla pillola esce un dito d’inchiostro con la punta tonda, che sale; poi la sua cima si allarga nel suggerimento con un piccolo rimbalzo, mentre sotto il collo si assottiglia. Alla fine il suggerimento resta attaccato alla parola da un collo stretto, con le curve morbide alle due estremità, come una goccia che non si è staccata; dentro, in bianco, la definizione su due righe (The space between one particular pair of letters.). Le parole della prima riga lo aprono sopra, quelle della seconda sotto. Spostandosi su un’altra parola non si aspetta: il suggerimento vecchio perde le parole, si stringe in una colonna e scende nella sua parola, che torna blu, mentre dalla nuova sale quello nuovo, e dove si incontrano sono lo stesso inchiostro. Uscendo, il suggerimento torna giù per il collo e l’inchiostro rientra nella sottolineatura. Il puntatore può salire sul suggerimento senza chiuderlo. Coi tasti, Tab va da una parola all’altra e il suggerimento compare subito; Esc lo rimette via. Al telefono un tocco su una parola lo apre, un altro tocco o un tocco altrove lo chiude.
Come funziona
Un percorso per parola
Ogni parola ha tre path in un svg sopra la frase: la sottolineatura (in un svg a parte, senza ombra), l’inchiostro intorno alla parola, e il collo col corpo del suggerimento. A ogni fotogramma lo script riscrive il loro attributo d da tre molle, ink (l’inchiostro intorno alla parola), rise (la salita) e wide (la larghezza), calcolate sul ticker di GSAP a passi di 4 millisecondi; quando le molle sono ferme non ridisegna niente.
Le molle in fila
Aprendo, rise parte quando ink ha passato metà strada e wide quando rise ha passato metà strada; chiudendo vanno al contrario, più rigide e senza rimbalzo, così il corpo si stringe, scende per il collo e poi l’inchiostro rientra nella riga. La salita e la larghezza vanno sulla molla SPRING: poco frenata, il corpo va un po’ oltre la sua misura e torna, e si schiaccia un poco mentre è più largo del dovuto.
Il collo
I due lati del collo sono curve cubiche che partono orizzontali dal bordo del corpo e arrivano orizzontali sul bordo dell’inchiostro della parola: si raccordano con due curve morbide e in mezzo si stringono fino a NECK pixel, per GAP pixel di lunghezza. All’inizio il raccordo in alto e gli angoli vicini sono a zero, e collo e corpo sono una sola colonna larga 22 pixel con la punta tonda; mentre wide cresce il corpo si allarga, il collo si assottiglia e gli angoli si arrotondano.
La parola che diventa bianca
La parola è dipinta con un gradiente ritagliato sulle lettere (background-clip: text), bianco fino all’altezza dell’inchiostro e blu sopra: lo stop è una variabile CSS che lo script aggiorna a ogni fotogramma. La parola in uso sta sopra l’svg (z-index), le altre parole della frase sotto, così il suggerimento le copre.
Le parole del suggerimento
Sono testo vero (role tooltip, e aria-describedby sulla parola), messo dove arriverà il corpo e largo quanto la sua riga più lunga, misurata con un Range. Mentre il corpo cresce, un clip-path inset le taglia sui suoi bordi a ogni fotogramma, così non stanno mai fuori dall’inchiostro; chiudendo se ne vanno per prime. Il suggerimento sta sopra la frase e non ne esce di lato più di 10 pixel: se la parola è vicina al bordo, il collo resta sulla parola e il corpo si sposta.
Quando compare
La prima volta dopo DELAY secondi di puntatore fermo; finché un suggerimento è fuori, e per GRACE secondi dopo, il prossimo sale subito. Lasciata la parola aspetta LINGER secondi, così il puntatore può salirci sopra. Col focus da tastiera compare subito, ed Esc lo chiude finché il puntatore o il focus non lasciano la parola; al tocco si apre e si chiude. Un clic da script (l’anteprima della libreria) è un puntatore finto che passa sulle tre parole e poi se ne va.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DELAY | script.js | 0.5 | I secondi in cui il puntatore resta su una parola prima del primo suggerimento. |
GRACE | script.js | 0.6 | I secondi dopo che un suggerimento è rientrato in cui il prossimo sale senza aspettare. |
SPRING | script.js | [380, 0.52] | La molla su cui il suggerimento sale e si allarga: quanto è rigida e quanto è frenata. |
GAP | script.js | 12 | Quanto è lungo il collo fra la parola e il suggerimento, in pixel. |
NECK | script.js | 8 | Quanto è largo il collo nel punto più stretto, in pixel. |
LINGER | script.js | 0.12 | I secondi che il suggerimento aspetta dopo che il puntatore ha lasciato la parola, perché lo si possa raggiungere. |
Quando usarla
Per i glossari dentro un articolo, i termini tecnici di una documentazione, le voci di un contratto o di un’offerta (franchigia, TAEG, SLA), le parole difficili di una lezione: ovunque una parola ha bisogno di una riga di spiegazione senza far lasciare il testo a chi legge.
Sul telefono
La frase scende a 20 pixel e sta su due righe, così le parole della prima riga aprono il suggerimento sopra e quelle della seconda sotto, senza coprire le altre parole spiegate. Un tocco apre il suggerimento, un altro tocco o un tocco altrove lo chiude; il suggerimento non ferma il dito, che arriva alla parola sotto. Resta sempre dentro lo schermo.
Con il movimento ridotto
Niente salita, niente molle: l’inchiostro intorno alla parola e il suggerimento compaiono già al loro posto con una dissolvenza, e nello stesso tempo la parola passa dal blu al bianco. Le sottolineature ci sono già, senza disegnarsi.
Trappole
- Le sottolineature disegnate nello stesso svg dell’inchiostro prendevano anche loro l’ombra, un alone grigio sotto ogni parola: stanno in un svg a parte, senza filtro.
- Con l’inchiostro su, la sottolineatura sporgeva sotto gli angoli tondi della pillola: finché l’inchiostro c’è, la sottolineatura non si disegna.
- Il primo germoglio era un rettangolo su un gambo e sembrava un cartello: ora il corpo nasce come una colonna con la punta tonda, senza raccordo in alto e senza angoli vicini, e solo allargandosi diventa suggerimento e collo.
- Un testo a capo in un riquadro con max-width è largo quanto il massimo, non quanto la sua riga più lunga, e il suggerimento restava con un vuoto a destra: lo script misura le righe con un Range e gli dà la larghezza giusta.
- Mentre il corpo cresceva le parole del suggerimento uscivano dall’inchiostro, bianche sul bianco, e chiudendo restava un’ombra di testo sul corpo che scendeva: un clip-path le taglia sul corpo a ogni fotogramma, e chiudendo spariscono per prime.
- Al telefono un suggerimento aperto verso il basso copriva un’altra parola e ne rubava il tocco: pointer-events solo dentro @media (hover: hover), così il dito ci passa attraverso.
- Su tre righe le parole della riga di mezzo aprivano il suggerimento sopra altro testo: la frase è corta e bilanciata (text-wrap: balance) e sta su due righe anche a 390 pixel.
- Una dissolvenza d’entrata della frase faceva un lampo: il testo si vedeva prima che GSAP arrivasse a nasconderlo. L’entrata la fanno solo le sottolineature, che prima dello script non ci sono.
Librerie
GSAP 3.15.0, Source Serif 4 (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,7 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 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.
