Il pulsante dell’intelligenza
Pulsanti, WebGL, SVG, Hover, Testo
NuovaGratis
Tutti i componenti
Il suggerimento con la quota
Nello stile minimal: una frase con tre parole spiegate, tratteggiate sotto come gli spigoli nascosti di un disegno tecnico. Fermandosi su una, la parola prende un filo di peso senza spostare la frase, due linee di riferimento salgono dai suoi bordi e una quota vermiglia corre via con le tacche alle estremità, va un pixel oltre e torna, mentre la definizione si scrive accanto una lettera alla volta, appena la linea ci passa sopra.
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 with the dimension line</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tooltip with the dimension line: a sentence with three words explained, each one dashed underneath like a
hidden edge in a drawing. Resting on one, the word takes a little weight without moving the sentence, two
extension lines rise from its edges and a dimension line runs out from them, ticked at both ends, while the
definition is lettered above it as the line goes by. The lines are one svg, drawn by the script -->
<div class="gloss" data-gloss data-autoclic>
<svg class="gloss__lines" aria-hidden="true" data-lines></svg>
<p class="gloss__text" data-text>
A <button class="term" type="button" aria-describedby="tip-chamfer" data-term><span class="term__word">chamfer</span><i class="term__base"></i></button>
on every edge, a <button class="term" type="button" aria-describedby="tip-tenon" data-term><span class="term__word">tenon</span><i class="term__base"></i></button>
in every joint, a <button class="term" type="button" aria-describedby="tip-veneer" data-term><span class="term__word">veneer</span><i class="term__base"></i></button>
of oak on top.
</p>
<span class="tip" role="tooltip" id="tip-chamfer" data-tip>A flat cut taken off a sharp corner, most often at 45 degrees.</span>
<span class="tip" role="tooltip" id="tip-tenon" data-tip>The tongue cut on the end of a rail, made to fit a mortise.</span>
<span class="tip" role="tooltip" id="tip-veneer" data-tip>A slice of fine wood, thinner than a millimetre, glued over a plain core.</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 con la quota» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una frase nera in un grottesco sottile, su due righe: A chamfer on every edge, a tenon in every joint, a veneer of oak on top. Chamfer, tenon e veneer hanno sotto un tratteggio vermiglio, come gli spigoli nascosti di un disegno tecnico, che all’apertura della pagina si disegna da sinistra, una parola dopo l’altra. Fermando il puntatore su una parola, il tratteggio si chiude in una linea piena e la parola diventa un po’ più nera, ma resta larga uguale: la frase non si sposta di un pixel. Dai due bordi della parola salgono due linee sottili, una appena dopo l’altra, e dalla prima parte la quota: una linea orizzontale con una tacca obliqua all’inizio e una sulla punta, che corre via, va un pixel oltre la sua misura e torna; passando sopra l’altro bordo della parola vi lascia una terza tacca, che scatta fuori con un piccolo rimbalzo. Sopra la linea la definizione, in maiuscole strette, si scrive una lettera alla volta proprio mentre la punta della linea ci passa sopra: ogni lettera sale di qualche pixel, si posa, e nasce vermiglia come la linea prima di asciugarsi nera. Le parole della prima riga mettono la quota sopra, quelle della seconda sotto; se a destra non c’è spazio la quota corre a sinistra e la definizione si allinea a destra, come per tenon. Passando a un’altra parola non si aspetta: la definizione vecchia sparisce, la sua linea rientra, e intanto la nuova parte. Il puntatore può salire sulla definizione senza chiuderla. Coi tasti, Tab va da una parola all’altra e la quota compare subito; Esc la rimette via. Al telefono un tocco su una parola la apre, un altro tocco o un tocco altrove la chiude.
Come funziona
Il peso alla stessa larghezza
Il carattere, Archivo, ha due assi: il peso (wght) e la larghezza (wdth). Per ogni parola, all’apertura e quando cambia la misura del testo, lo script prende una copia nascosta della parola e, per nove pesi fra quello di riposo e quello acceso, cerca con una ricerca binaria (sedici passi fra 62 e 125) la larghezza dell’asse che la tiene larga come a riposo. Durante l’animazione il peso cresce e la larghezza si legge da quella tabellina: la parola si fa più nera e un poco più stretta, e la frase non si muove.
Una molla tarata sul pixel
La quota corre su una molla smorzata scritta in forma chiusa, x(t) = 1 − e^(−ζωt)(cos ω_d t + ζ/√(1−ζ²) sin ω_d t). Il rimbalzo di una molla così è una frazione fissa della sua corsa, quindi su una linea lunga sarebbe grande e su una corta invisibile: lo smorzamento ζ si calcola ogni volta dalla lunghezza, ζ = −ln r / √(π² + ln² r) con r = OVERSHOOT / lunghezza, così la linea va sempre OVERSHOOT pixel oltre, che sia lunga 80 pixel o 400. GSAP fa scorrere solo il tempo della molla, in una timeline.
Il disegno, rifatto a ogni fotogramma
Le linee sono tre path in un svg sopra la frase: il tratteggio, le linee di riferimento con la quota, e le tacche (oblique a 45 gradi, più spesse). Le timeline di GSAP muovono solo dei numeri (quanto sono salite le linee di riferimento, il tempo della molla, quanto della quota è fuori, la grandezza delle tacche) e una funzione sul ticker riscrive gli attributi d. Le linee sottili stanno sul mezzo pixel, così restano nette; il tratteggio si chiude portando a zero il vuoto di stroke-dasharray, tagliato perché cominci e finisca con un trattino intero.
Le lettere scritte dalla linea
La definizione è testo vero (role tooltip e aria-describedby sulla parola, con una copia intera per chi usa un lettore di schermo); per l’occhio è divisa in una span per lettera, con le parole che non si spezzano. Lo script misura quanto è lontana ogni lettera dal bordo da cui parte la quota e, a ogni fotogramma, accende quelle che la punta della linea ha appena passato: salgono di 5 pixel su una molla leggera e passano dal colore della linea al nero. Chiudendo se ne vanno per prime, dall’ultima, poi la linea rientra e le linee di riferimento scendono.
Il lato giusto
Sopra o sotto: verso il lato della frase a cui la parola è più vicina, così la definizione non copre mai l’altra riga. Destra o sinistra: la definizione si prova larga al massimo TIP_WIDTH pixel, si misura la sua riga più lunga (con le lettere, riga per riga) e la quota corre a destra se ci sta, se no a sinistra con il testo allineato a destra; se non ci sta da nessuna parte, come sul telefono, si stringe sul lato con più spazio e va a capo. Tutto si rimisura al resize e quando arrivano i caratteri, anche a metà animazione, perché il disegno nasce dai numeri e non da posizioni salvate.
Quando compare
La prima volta dopo DELAY secondi di puntatore fermo; finché una definizione è fuori, e per poco dopo, la prossima parte subito. Lasciata la parola aspetta LINGER secondi, e un ponte invisibile nel riquadro della definizione lascia salire il puntatore fino alle lettere. Col focus da tastiera compare subito, Esc la chiude finché il focus o il puntatore non lasciano la parola; al tocco si apre e si chiude. Un clic da script (l’anteprima della libreria) è un puntatore finto, in una timeline, che passa sulle tre parole e poi se ne va.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WEIGHT | script.js | [380, 540] | Il peso della parola a riposo e con la definizione fuori (da 100 a 900): la larghezza resta la stessa. |
OVERSHOOT | script.js | 1 | Di quanti pixel la quota va oltre la sua misura prima di tornare, qualunque sia la sua lunghezza. |
STIFFNESS | script.js | 13 | Quanto è rapida la molla della quota: più alto, la linea corre più svelta. |
DELAY | script.js | 0.25 | I secondi in cui il puntatore resta su una parola prima della prima definizione. |
LINGER | script.js | 0.3 | I secondi che la definizione aspetta dopo che il puntatore ha lasciato la parola, perché lo si possa portare sulle lettere. |
SETTLE | script.js | 0.5 | I secondi che ogni lettera della definizione mette a posarsi; per asciugarsi dal vermiglio al nero ci mette quasi il doppio. |
TIP_WIDTH | script.js | 236 | La larghezza massima della definizione, in pixel: sul telefono si stringe da sola quando non c’è spazio. |
Quando usarla
Per i termini tecnici nella scheda di un prodotto (un mobile, un orologio, una bici), le parole difficili di un articolo o di una lezione, le voci di una documentazione o di un capitolato: ovunque una parola ha bisogno di una riga di spiegazione e il sito parla la lingua del progetto, dell’architettura o del design.
Sul telefono
La frase scende a 21 pixel e resta su due righe, così le parole della prima riga mettono la quota sopra e quelle della seconda sotto. Le stesse linee, la stessa molla e le stesse lettere; la definizione sceglie il lato con più spazio e, se serve, si stringe e va a capo, sempre dentro lo schermo. Un tocco la apre, un altro tocco o un tocco altrove la chiude; la definizione non ferma il dito.
Con il movimento ridotto
Niente linee che corrono e niente lettere che salgono: la quota intera, le tacche e la definizione compaiono già al loro posto con una dissolvenza, mentre il tratteggio si chiude e la parola prende peso. I tratteggi ci sono già, senza disegnarsi.
Trappole
- Cambiando solo il peso la parola si allarga e manda a capo il resto della frase: la larghezza dell’asse wdth si cerca per ogni peso, e il pulsante tiene la larghezza misurata a riposo, così quello che avanza dalla ricerca (meno di un pixel) non sposta niente.
- Una molla con lo smorzamento fisso rimbalza di qualche pixel sulla definizione lunga e di niente su quella corta: lo smorzamento si ricava dalla lunghezza, perché il rimbalzo sia sempre di OVERSHOOT pixel.
- Con will-change sulle lettere ognuna finiva su un suo livello, agganciato al pixel intero, e la spaziatura delle maiuscole diventava storta (DE GREES): senza, le lettere restano nel testo.
- Il tratteggio finiva con un pezzetto di trattino diverso per ogni parola: la misura del trattino si ricava dalla lunghezza della parola, perché cominci e finisca con uno intero.
- Con la molla rapida le lettere si accendevano quasi tutte insieme e la scrittura non si vedeva: la molla è più morbida e le lettere aspettano la punta della linea, non un ritardo fisso.
- Fra la parola e la definizione c’è il vuoto delle linee, e il puntatore che sale lo attraversa fuori da tutto: il riquadro della definizione ha un ponte invisibile fino alla parola, solo per il mouse (pointer-events dentro @media (hover: hover)).
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wght e wdth) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
