Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
La parola di fumo
Animazione nello stile minimal: una parola grande fatta di fili di fumo d’incenso, color osso su un nero caldo. Il fumo sale dal basso e si raccoglie nella parola, i fili respirano e ogni tanto uno si stacca e sale arricciandosi; il puntatore è una corrente d’aria che porta via il fumo, e la parola si ricompone piano.
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>Linger</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>
<!-- a word made of incense smoke on a warm black: thin wisps hold the letters, some peel off and rise, the pointer
is a draught that blows the smoke into curls, and the word slowly gathers itself back -->
<main class="pagina" data-pagina>
<canvas class="tela" aria-hidden="true" data-tela></canvas>
<header class="testa">
<p class="marchio" data-entra>Linger</p>
<p class="testa__nota" data-entra>Incense & slow fragrance</p>
</header>
<h1 class="parola" data-parola>Linger</h1>
<footer class="piede">
<p class="nota" data-entra data-nota>Move to stir the smoke, click to blow</p>
<p class="aria" data-entra><span class="aria__nome">Air</span> <span class="aria__valore" data-aria>still</span><span class="aria__riga" data-riga></span></p>
</footer>
</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.
20 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 parola di fumo» da Animorio e adattala al mio sitoCosa fa
Una pagina nero caldo con poche scritte piccole in Fraunces: in alto a sinistra il nome di una casa di incensi inventata, Linger, a destra «Incense & slow fragrance», in basso a sinistra l’invito a muovere il fumo e a destra la misura dell’aria. All’apertura il fumo sale dal fondo della pagina in fili sottili color osso, arricciandosi, e si raccoglie nella parola «Linger» da sinistra a destra: prima leggera, nel peso più sottile del carattere, poi si addensa fino al peso pieno. A parola composta il fumo non sta mai fermo: ogni filo respira appena intorno al suo posto in un campo lento di vortici, e ogni tanto uno si stacca dalla lettera, sale piegandosi e si spegne, per tornare poi al suo posto e riaccendersi piano. Il puntatore è una corrente d’aria: dove passa porta il fumo nella sua direzione e lo arriccia ai lati, più forte e più largo quanto più corre; i fili portati via si fermano, girano su sé stessi e tornano alla lettera, prima molli e poi decisi. Se il puntatore resta fermo sopra una lettera, il calore della mano fa salire più fumo da lì. Un clic o un tocco è un soffio: tutta la parola si disperde in volute e si ricompone da sola. In basso a destra l’aria dice «still» quando è ferma e i metri al secondo, in vermiglio, quando si muove, con una riga sottile che si allunga.
Come funziona
La parola due volte, nel canvas nascosto
La parola si scrive in un canvas grande quanto la pagina, mai mostrato, due volte: col peso pieno (WEIGHT) e con quello sottile (THIN), alla stessa misura, che la fa stare nel 74% della larghezza (86% sul telefono) e nel 36% dell’altezza. getImageData dà i pixel pieni, e una griglia col passo giusto, spostata un poco a caso, dà circa COUNT punti per parola. I punti si mettono in ordine da sinistra a destra, così il filo i-esimo della parola sottile e quello della piena stanno vicini e addensandosi il fumo si sposta di poco.
Il rumore a ricciolo
Un rumore di valori su una griglia, liscio e con una permutazione fissa, e il suo ricciolo: le derivate del rumore scambiate di posto e con un segno cambiato. È un campo di velocità senza sorgenti, che fa girare il fumo in vortici invece di spingerlo tutto da una parte; scorre piano verso l’alto col tempo, così sembra fumo che sale.
Tre modi per ogni filo
Sulla lettera, una molla tira il filo verso la sua casa, spostata di un paio di pixel dal ricciolo: la parola respira. Staccato, sale per il calore (una spinta costante verso l’alto), si arriccia nel campo e si spegne in un tempo fra 1,8 e 3,4 secondi, poi riappare spento al suo posto e si riaccende. Portato via dall’aria, è libero e frenato; quando il suo tempo finisce la molla lo riprende con una presa che cresce da zero, prima molle e poi decisa. Ogni secondo si stacca circa il 2% dei fili (RISE), molti di più vicino alla mano ferma.
La corrente e il soffio
La velocità del puntatore, smorzata, dà la forza e il raggio della corrente (REACH, più largo se corre): dentro il raggio ogni filo riceve la velocità del puntatore e una spinta di lato, che lo arriccia attorno al passaggio; se il colpo è forte il filo si stacca dalla lettera. Il clic dà a ogni filo una spinta via dal punto, un poco girata, e un tempo di ritorno diverso. Quando nessuno muove il puntatore per 2,4 secondi, una corrente finta passa sulla parola in un otto che dura nove secondi.
Il disegno con le scie
Ogni fotogramma un velo di nero copre il canvas, tanto più leggero quanto più alto è TRAIL, e ogni filo si disegna come un tratto sottile dalla posizione di prima a quella di adesso, sommando la luce (lighter): dove i fili sono tanti il fumo è più denso. I fili si dividono in cinque gruppi per luminosità, così bastano cinque disegni per fotogramma. GSAP fa la regia (l’arrivo, l’addensarsi) e il suo orologio muove anche la fisica.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Linger' | La parola fatta di fumo: corta, sta in una riga. |
COUNT | script.js | 2800 | Quanti fili di fumo (sul telefono poco più della metà). |
WEIGHT | script.js | 560 | Il peso della parola quando il fumo si è addensato (Fraunces va da 100 a 900). |
THIN | script.js | 240 | Il peso della parola quando il fumo arriva. |
DRAUGHT | script.js | 1 | Quanto soffia la corrente del puntatore (0 non soffia). |
REACH | script.js | 120 | Fin dove arriva la corrente, in px: più larga se il puntatore corre. |
RISE | script.js | 1 | Quanti fili si staccano e salgono (0 nessuno). |
SWIRL | script.js | 1 | Quanto si arricciano i fili staccati. |
TRAIL | script.js | 0.8 | Quanto restano le scie: più alto, scie più lunghe. |
ARRIVAL | script.js | 3 | In quanti secondi il fumo si raccoglie nella parola. |
Quando usarla
Come apertura di una profumeria, di una casa di incensi e candele, di un bar di cocktail o di un tè, di un teatro o di un film; ovunque una parola sola deve sembrare sospesa nell’aria e reagire alla mano.
Sul telefono
Uguale col dito: trascinando si muove l’aria, toccando si soffia. La parola sta nell’86% della larghezza, i fili sono poco più della metà, un poco più sottili, e la corrente è un po’ più stretta. Sopra la demo il dito muove il fumo e non scorre la pagina.
Con il movimento ridotto
La parola di fumo è già composta e ferma, col peso pieno, e compare in dissolvenza; il puntatore e il clic non spostano niente e l’aria resta «still».
Trappole
- La parola sottile e quella piena vanno misurate con lo stesso peso, se no hanno misure diverse e addensandosi il fumo scivola di lato.
- Senza mettere i punti in ordine da sinistra a destra, ogni filo andrebbe da una lettera all’altra quando la parola si addensa: un incrocio di fili invece di fumo che si fa più spesso.
- Un filo staccato che torna va rimesso spento al suo posto e riacceso piano: rimesso acceso, la parola lampeggia a puntini.
- Le scie si fanno col velo di nero e non con la trasparenza dei tratti: il velo va calcolato sul tempo del fotogramma, se no a 120 Hz le scie sono lunghe la metà.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 23 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.
