L’elastico intorno alle parole

Hover, FisicaGSAPImpegnativaPeso compresso: Demo 7,3 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal, su nero: gli argomenti di un giornale sparsi sulla pagina e un solo elastico sottile vermiglio intorno a tutti. Vicino al puntatore l’elastico si stacca e scatta intorno alle parole a portata: si allunga per prenderne una nuova, si ritira quando una resta fuori, passa il segno di un niente e trema fino a fermarsi, e più è tirato più si assottiglia. Le parole prese si accendono e prendono peso; sotto, i loro nomi e la somma delle note.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The band round the words</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <header class="top">
      <span class="top__name">Marl</span>
      <span class="top__note">A journal of making, by topic</span>
    </header>

    <!-- the topics of a journal scattered on the page, and one thin rubber band round them. The band lets go and snaps
         round the topics near the pointer, stretching out to catch a new one and snapping in when one is left behind -->
    <section class="field" aria-label="Topics" data-field>
      <svg class="band" aria-hidden="true" data-band><path class="band__fill" data-fill></path><path class="band__line" data-line></path></svg>
      <ul class="tags" data-tags></ul>
    </section>

    <div class="read" aria-live="polite">
      <span class="read__win"><span class="read__names" data-names>All topics</span></span>
      <span class="read__hint" data-hint>Move over the words</span>
      <span class="read__win"><span class="read__count" data-count>0 notes</span></span>
    </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.

54 valori da cambiare

Apri il Playground

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 «L’elastico intorno alle parole» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo quasi nero ci sono diciotto parole sparse, gli argomenti di un giornale di artigianato (Clay, Glaze, Paper, Ink, Wood, Glass…), ognuna con un numerino in alto che dice quante note ha, in un grigio spento. Aprendo la pagina le parole compaiono a caso salendo un poco, e dal centro un elastico sottile vermiglio si apre da un nodo e scatta intorno a tutte, con gli angoli arrotondati e l’interno appena tinto. Quando il puntatore si avvicina, l’elastico lascia andare le parole lontane e si stringe intorno a quelle a portata: si ritira come un elastico mollato, passa il segno di un niente e trema prima di fermarsi; spostandosi, si allunga verso la parola nuova che entra e scatta indietro quando una resta fuori. Più l’elastico è tirato, più la sua linea si assottiglia. Le parole prese diventano bianche, prendono peso e larghezza, e ricevono un colpetto quando l’elastico le acchiappa; le altre restano grigie. Sotto, a sinistra, i nomi delle parole prese scorrono dentro (Clay, Glaze, Kilns) e a destra la somma delle loro note (50 notes); a riposo All 18 topics e 266 notes. Quando il puntatore se ne va, l’elastico torna intorno a tutto.

Come funziona

Le parole sparse, sempre negli stessi posti

Le parole stanno in una griglia lasca: tante colonne quante ne entrano con la parola più larga, e ogni parola, in un ordine mescolato, si scuote dentro la sua cella di una quantità a caso. Il caso è un generatore con un seme (SEED), così le parole cadono sempre negli stessi posti. Le misure si prendono col peso delle parole prese, perché crescendo non si tocchino; se le righe non entrano, il corpo scende.

La forma dell’elastico

Intorno a ogni parola presa si mettono i punti di un rettangolo arrotondato (PAD pixel di margine), e di tutti i punti si calcola l’inviluppo convesso con l’algoritmo della catena monotona: è la forma che prende un elastico vero tirato intorno a dei chiodi. Dal centro dell’inviluppo si tirano 96 raggi e per ognuno si cerca dove taglia il bordo: quella distanza è il bersaglio del suo punto.

Un anello di molle

L’elastico è un anello di 96 punti intorno a un centro: ogni punto ha la sua molla sulla distanza dal centro (SPRING, rigidità e freno) e anche il centro va col suo passo, così quando la forma cambia ogni parte arriva un po’ prima o un po’ dopo, come la gomma. Le molle girano a passi fissi di 1/240 di secondo nel ticker di GSAP; la curva passa per i punti con una Catmull-Rom chiusa fatta di cubiche.

Più tirato, più sottile

A ogni fotogramma si misura la lunghezza dell’elastico: lo spessore va da WIDTH[0] a WIDTH[1] con la radice di quanto è lungo rispetto al bordo della pagina, come una gomma che si assottiglia tirandola. Le parole prese hanno un colpetto su una molla rigida (un piccolo schiacciamento) quando entrano.

Chi entra

Entrano le parole il cui rettangolo è entro REACH dal puntatore (una parte del lato corto del campo); se non ce n’è nessuna, l’elastico torna intorno a tutte. Peso, larghezza e colore delle parole seguono con un passaggio dolce; la riga in fondo cambia solo quando cambia la scelta, e scorre dentro le sue finestrelle.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TOPICS`	script.js	`[['Clay', 24], ['Glaze', 17], …]`	Gli argomenti: la parola e quante note ha.
`REACH`	script.js	`0.17`	Fin dove l’elastico prende le parole intorno al puntatore, come parte del campo.
`SPRING`	script.js	`[170, 11]`	La molla dell’elastico: quanto è rigida e quanto è frenata (meno freno, più trema).
`PAD`	script.js	`14`	Quanto spazio lascia l’elastico intorno alle parole, in pixel.
`WIDTH`	script.js	`[2.4, 0.9]`	Lo spessore dell’elastico a riposo e tutto tirato, in pixel.
`SEED`	script.js	`7`	Cambia dove cadono le parole sulla pagina.
`--accent`	style.css	`#ff5436`	Il colore dell’elastico.

Provali nel Playground

Quando usarla

Per gli argomenti di un blog o di una rivista, per i filtri di un archivio, per le competenze di uno studio o di un portfolio, per le categorie di un negozio: ovunque un gruppo di parole si sceglie insieme. Cambiando TOPICS diventa qualunque elenco di etichette.

Sul telefono

Le stesse molle e lo stesso elastico a misure adattate: le parole si dispongono su meno colonne e il corpo si adatta. Si trascina il dito sulle parole e l’elastico le segue; alzando il dito la scelta resta. La scritta d’aiuto al centro della riga in fondo si nasconde per lasciare posto ai nomi.

Con il movimento ridotto

Niente molle e niente tremolio: l’elastico prende subito la sua forma nuova, le parole cambiano colore e peso senza colpetti e la riga in fondo cambia in dissolvenza. La pagina compare già con l’elastico intorno a tutte le parole.

Trappole

Con una portata grande l’elastico prendeva undici parole su diciotto e non si capiva cosa stesse scegliendo: la portata è scesa a meno di un quinto del campo, e ne prende da due a cinque.
Calcolare i raggi dal centro attuale, che è ancora in viaggio, faceva uscire il centro dalla forma nuova e i raggi non trovavano il bordo: i bersagli si calcolano dal centro dell’inviluppo nuovo, e i punti si disegnano intorno al centro che arriva.
Le parole misurate al peso leggero, crescendo, si toccavano: la griglia si costruisce con le misure al peso di una parola presa.

Librerie

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,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.