Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
Le virgolette che stringono la frase
Una citazione breve nello stile minimal: due virgolette giganti entrano dai lati opposti e si chiudono a tenaglia sulla frase, che si stringe sull’asse della larghezza e si fa più densa; poi la lasciano andare, la frase respira, larga e leggera, e il nome dell’autore scorre sotto, in punta a una linea sottile.
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 quote marks that squeeze the line</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/opsz.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- what people read: the quote and its author; everything drawn below is only its picture -->
<p class="sr" data-read></p>
<!-- the script builds one line per quote in here, letter by letter -->
<div class="phrases" data-phrases aria-hidden="true"></div>
<!-- the two quote marks: they come in from the sides and close on the line like pincers -->
<span class="mark mark--open" data-mark aria-hidden="true">“<i></i></span>
<span class="mark mark--close" data-mark aria-hidden="true">”<i></i></span>
<!-- the author: a hairline draws under the quote and the name rides its tip -->
<div class="cite" data-cite aria-hidden="true">
<i class="cite__line" data-line></i>
<span class="cite__clip" data-clip><span class="cite__name" data-name></span></span>
<i class="cite__tick" data-tick></i>
</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.
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 «Le virgolette che stringono la frase» da Animorio e adattala al mio sitoCosa fa
Su una carta color avorio sale, lettera dopo lettera, una citazione breve: «Words need air.», un po’ larga e leggera. Poi due virgolette rosse giganti, una aperta e una chiusa, entrano dai due lati sempre più veloci, sbattono contro le estremità della frase e continuano a spingere come una tenaglia: la frase si stringe sull’asse della larghezza fino a diventare strettissima e più scura, le virgolette prendono peso e tremano appena sotto lo sforzo, e al colpo le lettere fanno un piccolo sussulto, dai bordi verso il centro. Dopo un attimo la tenaglia si apre: la frase respira, si allarga e si alleggerisce oltre la sua misura, poi torna al suo posto con un piccolo rimbalzo, e le virgolette si fanno sottili e si allontanano. Sotto la frase si disegna una linea sottile e il nome dell’autore ne cavalca la punta, stretto mentre corre e pieno quando si ferma; alla fine della linea spunta una tacca rossa. La frase respira ancora una volta, poi il nome esce oltre la fine della linea, la linea si ritira, e le virgolette si richiudono: schiacciano la frase fino a farla sparire, si toccano al centro e volano via dai lati. Arriva la citazione successiva, «Say less, slowly.», e tutto ricomincia. Puntando la frase col mouse (o tenendoci il dito sul telefono) quella si allarga e si alleggerisce, e le virgolette le fanno spazio.
Come funziona
Due caratteri variabili, un asse ciascuno
La frase è in Roboto Flex con il file «standard» di Fontsource, che tiene l’asse della grandezza ottica: con «opsz» 144 scritto in font-variation-settings l’asse wdth va da 25 (una lamina) a 151 (larghissimo), e il peso da 100 a 1000. Le virgolette sono in Fraunces, che ha il peso da 100 a 900: leggere quando arrivano, piene quando stringono. Ogni lettera della frase è uno span inline-block, per il sussulto e l’entrata; larghezza e peso si scrivono una volta sola, sulla frase intera.
Un numero solo per la stretta
Tutto dipende da q: 0 è la frase a riposo (wdth 100, peso WEIGHT), 1 la frase stretta (wdth SQUEEZE, peso più 80), −1 la frase larga e leggera (wdth 151, peso 220). Una funzione trasforma q nei due assi, e le tween della timeline muovono solo q: entra a −0,35, arriva a 1 con power3.out dopo il colpo, torna a −0,45 × BREATH con expo.out e si posa su 0 con una molla smorzata scritta come easing. Il respiro mentre si legge è un sine.inOut con yoyo; il puntatore toglie a q fino a 0,28.
Le virgolette attaccate ai bordi
A ogni fotogramma si scrivono gli assi, poi si legge una sola volta il getBoundingClientRect della frase: il bordo interno dell’inchiostro di ogni virgoletta sta a una distanza g dalla frase, più m volte la strada per uscire dallo schermo. Dove comincia e finisce l’inchiostro di “ e ” si misura su un canvas con measureText (actualBoundingBoxLeft e Right) a nove pesi, e in mezzo si interpola. Così la tenaglia tocca sempre la frase, qualunque sia la sua larghezza in quel momento.
Il colpo, la pressione, la stretta finale
Le virgolette entrano con power3.in, cioè sempre più veloci, e la stretta riparte da quella velocità. Al contatto un numero hit le schiaccia (scaleX 0,84 e scaleY 1,07 dal bordo interno) e torna con elastic.out; le lettere fanno un sussulto di 0,05 em sfalsato dai bordi verso il centro. Mentre stringono, pr le fa tremare di un pixel con un seno veloce. All’uscita q torna a 1 e un secondo numero k schiaccia la frase con scaleX fino a zero, mentre g va a zero: le virgolette si toccano al centro e volano via con power4.in.
Il nome in punta alla linea
La linea sotto la frase è lunga quanto la frase a riposo e si disegna con scaleX da sinistra (expo.out). Il nome sta in una finestra con overflow hidden larga quanto la linea, e il suo bordo destro è sempre sulla punta: esce dall’estremità sinistra e cavalca la linea fino a fermarsi in fondo, allineato a destra. Mentre corre il suo wdth è 40 e si allarga fino a 100 rallentando; uscendo fa il contrario e scivola oltre la fine della linea.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
QUOTES | script.js | [['Words need air.', 'Mara Lindqvist'], ['Say less, slowly.', 'Teo Ballard']] | Le citazioni, una dopo l’altra: [la frase, chi l’ha detta]. Frasi brevi, su una riga: più è lunga, più il carattere si rimpicciolisce. |
WEIGHT | script.js | 560 | Il peso della frase a riposo, da 100 (un capello) a 1000 (nerissimo). Stretta pesa 80 di più. |
SQUEEZE | script.js | 25 | Quanto le virgolette stringono la frase, sull’asse wdth: 25 è la più stretta del carattere, 100 vuol dire che non la stringono. |
MARK | script.js | 2.4 | La grandezza delle virgolette, in grandezze della frase. |
BREATH | script.js | 0.7 | Quanto la frase respira quando la tenaglia si apre: 0 torna e basta, 1 si fa larga e leggera. |
HOLD | script.js | 2.4 | Quanti secondi la citazione resta, respirando, prima che le virgolette si richiudano. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
LOOP | script.js | true | Se dopo l’ultima citazione torna la prima. Con false l’ultima resta al suo posto. |
Quando usarla
Per una citazione o una recensione da mettere in evidenza: la frase di un cliente sulla pagina di uno studio, il motto di un ristorante, la riga di un critico per un libro o uno spettacolo, una testimonianza in una landing page. Funziona con frasi brevi, da leggere in un colpo, e con poche citazioni in fila.
Sul telefono
La stessa animazione: frase, virgolette e spazi si rimisurano per stare nella larghezza dello schermo, anche quando la frase si allarga. Tenendo il dito sulla frase, quella respira come col mouse; staccandolo torna al suo posto.
Con il movimento ridotto
Niente si muove né si stringe: frase, virgolette, linea e nome compaiono in dissolvenza già al loro posto, restano, poi svaniscono e compare la citazione successiva. Niente respiro al passaggio del puntatore.
Trappole
- Le virgolette vanno attaccate all’inchiostro, non alla loro scatola: il carattere lascia uno spazio diverso ai lati di “ e ”, e lo spazio cambia col peso. Il canvas lo misura (measureText con actualBoundingBoxLeft e Right) a nove pesi, e in mezzo si interpola.
- Anche il peso allarga le lettere: con 240 di peso in più la frase stretta a wdth 25 restava larga quasi quanto a riposo (492 px contro 622 a 100 px di carattere, e con WEIGHT 760 non si stringeva affatto). Stretta pesa solo 80 in più, e WEIGHT arriva al massimo a 700.
- Il canvas conosce solo font-weight, non font-variation-settings: per questo il peso delle virgolette si scrive con style.fontWeight (che in un carattere variabile muove l’asse wght), così la pagina e la misura usano lo stesso disegno.
- La larghezza della frase va letta dopo aver scritto gli assi e prima di spostare le virgolette, una volta sola per fotogramma: leggere e scrivere a turno fa ricalcolare la pagina più volte.
- Con il file «wdth» di Fontsource Roboto Flex quasi non si stringe: ha la grandezza ottica ferma a 14. Serve il file «standard» con «opsz» 144 scritto a mano.
- Le tween fromTo di una timeline scrivono i loro valori iniziali appena create: finita la costruzione, lo stato sarebbe quello dell’ultima uscita (virgolette al centro). Alla fine della costruzione prepare(0) rimette la prima citazione vuota, con le virgolette fuori dallo schermo.
- Una molla smorzata usata come easing, con uno smorzamento che non sembri un cartone animato, passa il bersaglio solo di pochi centesimi: per il respiro la frase va prima mandata oltre (expo.out fino a −0,45 × BREATH) e poi la molla la riporta a riposo.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile, assi opsz, wght e wdth) 5.3.0, Fraunces (font variabile, assi opsz e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
