Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
La vocale tenuta
Animazione di testo nello stile minimal: una parola piccola in mezzo a una pagina larga, slow. Tenendo premuto la parola si dice piano: la o si allarga fino in fondo all’asse della larghezza, poi da lei spuntano altre o, una dopo l’altra, ognuna nata come una lamina che si gonfia su una molla, ognuna un poco più leggera, come una voce che tiene la nota. Una riga vermiglia misura quanto dura. Lasciando, le o rientrano nella prima.
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 held vowel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage tabindex="0" aria-label="Press and hold to stretch the word">
<header class="top">
<span class="top__brand">Casa Orla</span>
<span class="top__note">Slow weekends by the lake</span>
</header>
<!-- the word: the script splits it and, while you hold, the vowel widens and new copies of it bud from it -->
<div class="row" data-row>
<h1 class="word" data-word>slow</h1>
</div>
<!-- how long the vowel has been held: a vermilion line under it, with a mark at every new letter -->
<div class="held" data-held aria-hidden="true">
<i class="held__line" data-line></i>
<span class="held__time" data-time>0.0 s</span>
</div>
<p class="hint" data-hint aria-hidden="true">Press and hold</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
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.
17 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 «La vocale tenuta» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo, in alto il nome di una casa sul lago inventata, Casa Orla, e la sua frase, Slow weekends by the lake; in mezzo, piccola rispetto alla pagina, la parola slow, che arriva salendo lettera per lettera. Dopo un momento la parola si tiene da sola: la o si allarga, morbida, fino a diventare un ovale largo, e sotto di lei compare una riga vermiglia sottile. Poi dalla o ne spunta un’altra, nata sottile come una lamina e senza spazio, che si gonfia su una molla fino alla sua misura spingendo la w a destra; poi un’altra e un’altra, ogni tre decimi di secondo, ognuna un poco più leggera della precedente, finché la parola diventa sloooooooow e attraversa quasi tutta la pagina. La riga vermiglia si allunga sotto tutte le o, con una tacca dove comincia ognuna, e alla sua fine i secondi contano. Poi la voce si ferma: le o rientrano nella prima, dall’ultima, stringendosi una dopo l’altra, la o torna stretta passando la sua misura di un niente, e la riga si spegne. Dopo una pausa la parola si tiene di nuovo, più corta. Tenendo premuto sulla pagina, con il mouse, con il dito o con la barra spaziatrice, la o si allunga finché si tiene.
Come funziona
Un carattere molto largo
Anybody ha l’asse della larghezza da 50 a 150 e il peso da 100 a 900, nel file «wdth» di Fontsource. A riposo la parola sta a larghezza 100 e peso WEIGHT; tenendo, la vocale va a 150 su una molla smorzata scritta come funzione di easing (BOUNCE decide quanto passa la misura), e la molla finisce esattamente sulla misura giusta.
Le o che spuntano
Mentre si tiene premuto un contatore conta i secondi: dopo 0,35 secondi di sola larghezza nasce una copia ogni EVERY secondi, fino a MAX. Ogni copia è uno span inserito subito dopo l’ultima, con un valore g da 0 a 1: la larghezza va da 50 a 150, il peso dal più leggero al suo (WEIGHT meno FADE per ogni copia prima di lei), e un margine sinistro negativo, largo quanto la lettera alla sua misura più stretta, la fa nascere senza spazio. g va a 1 con la stessa molla.
La riga del tempo
A ogni fotogramma si leggono con getBoundingClientRect la prima e l’ultima o: la riga vermiglia va dall’una all’altra, con una tacca di un pixel dove comincia ogni copia, e i secondi tenuti sono scritti alla sua fine con le cifre tabellari. Il corpo del carattere si sceglie perché la parola più lunga possibile (MAX copie alla larghezza piena) stia nella pagina.
Lasciare la nota
Lasciando, le copie tornano a g 0 con power3.in, dall’ultima alla prima, sfalsate di 0,06 secondi, e alla fine si tolgono; poi la prima o torna a larghezza 100 con la molla, passandola di un niente, e la riga svanisce. Una nuova pressione toglie subito le copie rimaste a metà.
Da sola o a mano
Quando nessuno la tocca una timeline GSAP preme e lascia da sola: una nota lunga fino a tutte le copie e una corta di tre. Il primo pointerdown la ferma e la pagina segue la mano; dopo tre secondi e mezzo senza mani la timeline riparte. Con la barra spaziatrice o Invio si tiene la nota dalla tastiera.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'slow' | La parola. |
VOWEL | script.js | 'o' | La lettera che si tiene: la prima della parola che corrisponde. |
MAX | script.js | 7 | Quante copie della vocale al massimo. |
EVERY | script.js | 0.3 | Quanti secondi tenendo premuto per ogni copia nuova. |
WEIGHT | script.js | 640 | Il peso della parola, da 100 a 900. |
FADE | script.js | 55 | Quanto ogni copia nuova è più leggera della precedente. |
BOUNCE | script.js | 0.35 | Quanto una copia passa la sua misura prima di fermarsi: 0 si ferma secca, 1 ondeggia molto. |
AUTO | script.js | true | Se, quando nessuno la tocca, la parola tiene la nota da sola. |
Quando usarla
Per l’apertura di una casa vacanze, di un agriturismo, di una spa, di un ritiro o di qualunque cosa che vende lentezza; anche per un gioco, un saluto (heeey), un grido da stadio (goooal) o un pulsante da tenere premuto. Funziona con parole corte con una vocale da allungare.
Sul telefono
La stessa animazione: la parola si misura perché la versione più lunga stia nello schermo, e si tiene premuto con il dito (il menu del tocco lungo è spento).
Con il movimento ridotto
Niente si allarga e niente spunta: tenendo, la parola corta svanisce e ricompare già lunga, con la riga sotto; lasciando, svanisce e torna corta. La pressione da sola fa lo stesso.
Trappole
- Una copia nuova a larghezza 50 occupa comunque quasi mezzo corpo, e la w saltava a destra appena nasceva: un margine sinistro negativo, largo quanto la copia alla sua misura più stretta, la fa nascere senza spazio, e lo spazio si apre mentre si gonfia.
- Se il corpo si sceglie sulla parola a riposo, la parola lunga esce dallo schermo: si misura la versione con tutte le copie alla larghezza piena e il corpo si sceglie perché quella stia nella pagina. A riposo la parola è piccola e c’è tanto vuoto, ed è giusto così.
- Al telefono il tocco lungo apre il menu del testo o della foto: contextmenu bloccato, -webkit-touch-callout: none e niente selezione.
- Con il movimento ridotto le copie che spuntano una alla volta spostavano la w a scatti: lì la parola lunga arriva intera, in dissolvenza.
Librerie
GSAP 3.15.0, Anybody (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,7 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.
