Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
I quadrati che si arrotondano
Nello stile minimal: un campo di quadrati sottili a contorno su carta calda. Vicino al puntatore gli angoli si arrotondano su una molla finché i quadrati diventano cerchi, girando appena; lontano tornano spigoli. Fermando il puntatore parte un'onda: tutti diventano piccoli cerchi grigi tranne i quadrati che restano in piedi, e quelli scrivono una parola in negativo, nel colore d'accento.
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>Rest</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a field of thin squares: near the pointer they round into circles, and when the pointer rests they spell a word -->
<main class="stage" data-stage>
<canvas class="field" data-field role="img"></canvas>
<p class="hint" data-hint>Move across the field, then hold still.</p>
<p class="read" data-readout aria-hidden="true"><span class="read__win"><span class="read__label" data-label>Corner</span></span> <span class="read__win"><b class="read__value" data-value>0%</b></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.
18 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 «I quadrati che si arrotondano» da Animorio e adattala al mio sitoCosa fa
Su un fondo color carta c'è un campo di quadrati vuoti, tracciati con una linea sottile grigia, con tanto spazio intorno. All'inizio i contorni si disegnano da soli, dal centro verso i bordi, e subito dopo un'onda parte dal centro: i quadrati diventano cerchi più piccoli e più chiari, e un attimo dopo quelli che servono alla parola REST restano quadrati, prendono il rosso e una linea un po' più spessa, con un piccolo colpo e un tremolio prima di posarsi. La parola si legge per quello che non è cambiato. Muovendo il puntatore l'onda torna indietro partendo da lì e il campo ridiventa di quadrati grigi. Da quel momento, intorno al puntatore, i quadrati arrotondano gli angoli tanto più quanto sono vicini: quello sotto il puntatore è un cerchio scuro, i vicini sono quadrati dagli angoli morbidi, girati appena verso il puntatore, poco più grandi; lontano restano spigoli. Ogni forma ci arriva con una molla, passa il segno di un niente e torna. Fermando il puntatore per un attimo, l'onda riparte da dove si è fermato e riscrive la parola. Sotto il campo una scritta piccola dice l'angolo del quadrato sotto il puntatore, da 0% (spigolo) a 50% (cerchio), con il peso che cresce; quando la parola è scritta dice «Reads REST».
Come funziona
Un campo su un canvas solo
I quadrati sono disegnati su un canvas, non sono elementi della pagina: così centinaia di forme si ridisegnano a ogni fotogramma senza fatica. Il campo è la parola più una cornice di due celle vuote per lato, e la misura della cella si sceglie perché il tutto stia nello schermo con molto vuoto intorno. Sul telefono la parola si spezza su due righe (RE e ST) se così le celle vengono più grandi. Ogni quadrato è un tracciato con quattro arcTo: con raggio zero è un quadrato, con raggio pari a metà lato è un cerchio, e in mezzo tutte le forme intermedie.
La parola in una griglia da cinque per sette
Le lettere sono scritte in una piccola tabella, cinque colonne per sette righe, con una colonna vuota fra una lettera e l'altra. All'avvio si segnano le celle del campo che cadono su un pieno della lettera: sono quelle che, quando la parola è scritta, restano quadrati. WORD accetta lettere, cifre e qualche segno, fino a otto caratteri.
Tre molle per ogni quadrato
Ogni quadrato ha un angolo (da 0 a 1), una scala e una rotazione, mossi da molle con frequenza (SPRING, in hertz) e smorzamento (WOBBLE) a passi fissi di un duecentoquarantesimo di secondo dentro gsap.ticker. Vicino al puntatore il bersaglio dell'angolo cresce con una curva morbida della distanza, fino a REACH celle; la rotazione va verso il puntatore, a destra in un verso e a sinistra nell'altro, fino a TURN gradi. Il puntatore stesso è seguito con un filo di ritardo, così il campo respira dietro la mano.
L'onda che scrive e cancella
Quando il puntatore resta fermo per HOLD secondi (anche se esce dalla pagina), un tween GSAP allarga un fronte circolare da quel punto, a WAVE celle al secondo. Ogni quadrato raggiunto cambia bersaglio: fuori dalla parola diventa un cerchio più piccolo e grigio, dentro resta quadrato e prende il colore d'accento, un paio di celle dopo, così la parola arriva un attimo dopo i cerchi. Al passaggio ogni forma riceve un colpo sulla scala (e le lettere anche sulla rotazione), che le molle trasformano nel piccolo assestamento. Un movimento vero di un terzo di cella fa partire l'onda contraria, più veloce.
La regia e la scritta
L'entrata è una timeline GSAP: i contorni si disegnano con una linea tratteggiata che si allunga, sfalsati dal centro con lo stagger a griglia, poi parte la prima onda dal centro. Sotto il campo la scritta piccola in Instrument Sans dice l'angolo del quadrato più vicino al puntatore; peso e larghezza del carattere crescono e si stringono con l'angolo attraverso una variabile CSS. Quando la parola è scritta, etichetta e valore scorrono nelle loro finestrelle e diventano «Reads REST».
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'REST' | La parola che i quadrati scrivono quando il puntatore si ferma (lettere e cifre, fino a 8). |
REACH | script.js | 3.2 | Fin dove arriva il puntatore ad arrotondare i quadrati, in celle. |
TURN | script.js | 14 | Quanto gira un quadrato mentre si arrotonda, in gradi. |
SPRING | script.js | 4.2 | Quanto sono rapidi gli angoli, in hertz: 2 lenti e morbidi, 8 scattanti. |
WOBBLE | script.js | 0.34 | Quanto le forme passano il segno e si assestano: 0.15 un tremolio lungo, 1 per niente. |
HOLD | script.js | 0.6 | Quanti secondi il puntatore deve restare fermo prima che la parola si scriva. |
WAVE | script.js | 26 | Quanto corre l'onda che scrive la parola, in celle al secondo. |
SIZE | script.js | 0.6 | Il lato di un quadrato, come parte della sua cella. |
--accent | style.css | #e0462a | Il colore dei quadrati che scrivono la parola. |
--stroke | style.css | 1.2 | Lo spessore dei contorni, in pixel. |
Quando usarla
Per una pagina che premia chi si ferma: l'apertura di uno studio di grafica o di architettura, una landing page con il nome del marchio nascosto nella griglia, la pagina di attesa di un lancio, una pagina 404 con la parola giusta. Funziona con qualunque parola corta.
Sul telefono
Le stesse molle e la stessa onda con le misure adattate: la parola si spezza su due righe se così le celle vengono più grandi, e il campo si ridisegna su misura. Si trascina il dito sul campo per arrotondare i quadrati; alzando il dito, dopo un attimo l'onda riscrive la parola da lì. La scritta d'aiuto diventa «Drag across the field, then let go.» e si nasconde se non c'è posto accanto alla lettura.
Con il movimento ridotto
Niente gira, niente si ingrandisce e non c'è l'onda: il campo compare in dissolvenza già con la parola scritta. Vicino al puntatore gli angoli si ammorbidiscono senza molle, con un passaggio dolce; muovendo e fermando il puntatore tutto il campo passa insieme, in dissolvenza, dai quadrati alla parola e ritorno.
Trappole
- Con il campo grande quanto lo schermo, i quadrati erano quattrocento e la pagina sembrava carta millimetrata: il campo è solo la parola più due celle di cornice, e il resto resta vuoto.
- La molla dell'angolo che passa il segno non si vede (un cerchio non può essere più rotondo, uno spigolo non più vivo): l'assestamento sta nella scala e nella rotazione, che hanno molle più vivaci, e l'angolo ha uno smorzamento un po' più alto.
- Il ResizeObserver chiama subito una volta appena collegato: ricostruiva il campo durante l'entrata e i contorni comparivano già disegnati. Il campo si ricostruisce solo se la misura cambia davvero.
- Un puntatore che si muove piano, un pixel per volta, sembrava fermo e faceva scrivere la parola sotto la mano: conta la distanza dall'ultimo punto in cui si è mosso, non il singolo passo.
- Nel movimento ridotto la scritta restava su «Reads» con il numero dell'angolo in rosso: il ritorno alla lettura dell'angolo va fatto prima del ramo senza onda.
- La lettura appoggiata a sinistra si allungava oltre il bordo del campo quando diventava la parola: è fissata per il suo bordo destro e cresce verso sinistra.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
