Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
La parola che fa da equalizzatore
Animazione di testo nello stile minimal: il nome di una radio della notte, e ogni lettera è una banda di un equalizzatore, i bassi a sinistra e gli acuti a destra. Più la sua banda suona forte, più la lettera si alza sull’asse dell’altezza delle maiuscole, si allarga e prende peso. Sopra ognuna un segno sottile tiene il picco, poi cade; in cima diventa vermiglio. Passando il puntatore sulla parola le bande sotto si alzano.
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 equaliser word</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- every letter is a band of an equaliser: the louder its band, the taller (cap height axis), wider and heavier
it gets. Above each one a thin peak mark holds the loudest moment and then falls -->
<div class="meter" data-meter>
<div class="scale" data-scale aria-hidden="true"></div>
<h1 class="word" data-word>LOWTIDE</h1>
<i class="bed" data-bed aria-hidden="true"></i>
</div>
<p class="foot" data-foot>
<span class="foot__brand">Lowtide 98.4 FM</span>
<span class="foot__note">Late and quiet, every night</span>
</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.
15 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 che fa da equalizzatore» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo una riga nera si stende da sinistra e sopra compare LOWTIDE, il nome di una radio inventata, in maiuscolo; le lettere salgono una dopo l’altra fino in cima e ricadono. Poi parte una canzone che non si sente, otto battute che girano di continuo: ogni lettera è una banda, la L i bassi e la E gli acuti. A ogni colpo di cassa le prime lettere scattano: diventano più alte (il carattere ha un asse per l’altezza delle maiuscole), più larghe e più nere, e poi ricadono piano, strette e sottili; il rullante muove le lettere in mezzo e i piatti fanno tremare le ultime, mentre una piccola melodia passa da una lettera all’altra e alla fine della frase tutto si gonfia. Ogni lettera sta nella sua casella, quindi le vicine non si spostano mai. Sopra ogni lettera un segno sottile grigio sale con lei, resta un attimo al punto più alto e poi cade, sempre più veloce; quando una banda arriva in cima il suo segno diventa vermiglio. A sinistra una scala sottile, da −24 a 0 dB. Passando il mouse o il dito sulla parola le lettere sotto si alzano, di più se ci si passa veloci. In basso il nome della radio e la sua frase.
Come funziona
L’altezza delle maiuscole come livello
Roboto Flex, nel file «full» di Fontsource, ha l’asse YTUC: l’altezza delle maiuscole, da 528 a 760 millesimi del corpo. Il livello di ogni banda, da 0 a 1, muove insieme YTUC, la larghezza (da 38 a 124) e il peso (da 150 a 900), scritti nel font-variation-settings della lettera solo se cambiano. Ogni lettera sta al centro di una casella larga quanto lei al massimo, così allargandosi non spinge le vicine.
Una canzone che non si sente
La canzone è una funzione della battuta: una cassa che decade in fretta su ogni battuta e pesa sulle bande basse, un rullante sulla seconda e la quarta per quelle in mezzo, i piatti sugli ottavi per quelle alte, una melodia che passa da una banda all’altra con una campana gaussiana e un crescendo nelle ultime due battute. La battuta la muove una timeline GSAP lunga otto battute al tempo BPM, ripetuta all’infinito, quindi il banco la può rallentare.
Sale subito, scende piano
Ogni lettera insegue il livello della sua banda: quando il livello sale lo raggiunge quasi subito, quando scende lo segue con una velocità RELEASE, come un vero misuratore. Così i colpi sono secchi e le code lunghe.
Il segno del picco
Il segno sopra ogni lettera sale con lei, poi resta fermo HOLD secondi e cade con una gravità vera, sempre più veloce, finché non incontra di nuovo la lettera. Sopra il 93% diventa vermiglio, l’unico colore della pagina.
Le mani sulla radio
Il puntatore (o il dito) aggiunge a ogni banda una spinta che dipende da quanto è vicino al centro della sua lettera e da quanto va veloce; la spinta si spegne da sola in poco più di mezzo secondo. All’entrata la stessa spinta, data a una lettera alla volta, le fa salire in fila.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'LOWTIDE' | La parola: una banda per lettera, i bassi a sinistra. |
BPM | script.js | 104 | Il tempo della canzone che non si sente, in battute al minuto. |
LOUD | script.js | 0.9 | Quanto suona forte: 0.3 si muove appena, 1 arriva spesso in cima. |
RELEASE | script.js | 3.2 | Quanto in fretta una lettera ricade dopo un colpo: 1 piano, 8 subito. |
HOLD | script.js | 0.55 | Quanti secondi il segno del picco resta in alto prima di cadere. |
TOUCH | script.js | 0.9 | Quanto il puntatore alza le bande sotto di sé. |
Quando usarla
Per una radio, un podcast, un’etichetta, un festival di musica, un locale con i concerti o un’app per ascoltare: il nome che suona. Funziona con parole corte in maiuscolo, cinque-otto lettere, una per banda.
Sul telefono
La stessa animazione: la parola si misura per lo schermo e la scala dei decibel si nasconde per lasciarle posto. Strisciando il dito sulla parola le bande si alzano.
Con il movimento ridotto
Niente si muove: la parola compare in dissolvenza con tutte le lettere a metà livello, ognuna con il suo segno sopra, e resta così; il puntatore non la cambia.
Trappole
- Con le lettere in riga, ogni lettera che si allargava spingeva le altre e la parola tremava tutta: ogni lettera ha una casella larga quanto lei al massimo, misurata una volta all’inizio.
- L’asse dell’altezza va da 528 a 760: le lettere salgono al più di un terzo. Da solo il movimento sembrava timido; insieme a larghezza e peso il colpo di cassa si legge subito, e il segno del picco rende visibile anche l’altezza.
- Un equalizzatore che segue numeri a caso non finisce mai e non si ripete: la canzone è una funzione della battuta e la battuta la muove una timeline che si ripete, così il giro è sempre lo stesso e il banco può rallentarlo.
- Al telefono la scala a sinistra usciva dallo schermo: sotto i 560 px si nasconde.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile, assi opsz, wdth, wght e YTUC) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,3 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.
