Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
La rete elastica
Animazione di fisica nello stile minimal: una rete di fili sottilissimi tesa in un telaio, con una parola stampata sopra. Il puntatore la preme come un dito su un trampolino, la maglia si incava e la parola si piega con lei, prendendo peso dove la rete tira di più; lasciata, oscilla e si assesta. Un clic la colpisce e un'onda corre fino al telaio.
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>Spanne</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a taut net of hairlines in a frame, with one word printed on it: the pointer presses the net like a finger
on a trampoline, and the word bends with the mesh -->
<main class="stage" data-stage>
<canvas class="net" data-net aria-hidden="true"></canvas>
<h1 class="sr" data-word>bounce</h1>
<p class="brand">Spanne</p>
<p class="hint" data-hint>Press the net. Click to strike it.</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.
19 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 rete elastica» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo, con un telaio sottile e quattro piccoli pioli agli angoli. Dentro, una rete di fili grigi sottilissimi, e stampata sulla rete la parola «bounce» in Archivo leggero. All'apertura la rete è lenta, imbarcata al centro: il telaio la tira e lei sale, passa di un niente oltre il piano e si assesta, mentre i fili si disegnano dal centro verso i bordi. Col puntatore sopra la rete si incava come sotto un dito: i fili scivolano verso il punto premuto e si piegano, la parola si curva con la maglia, e le lettere vicine al dito prendono peso. I fili più tesi diventano vermiglio, in tre gradi. Spostando il puntatore la conca lo segue; togliendolo, la rete torna su, oscilla una volta e mezza e si ferma, e le lettere tornano leggere. Un clic, un tocco o Invio danno un colpo secco: un'onda corre dalla mano fino al telaio e torna indietro più debole. Quando nessuno muove il puntatore, una mano invisibile passa sulla rete, la preme, la lascia, la colpisce una volta e la lascia assestare.
Come funziona
Una membrana di punti
La rete è una griglia di punti, ognuno con una profondità. A passo fisso (un duecentoquarantesimo di secondo, più passi per fotogramma) ogni punto si muove con l'integrazione di Verlet: la nuova profondità è quella di adesso più la differenza con quella di prima, frenata da DAMPING, più la somma delle differenze coi quattro vicini moltiplicata per STIFFNESS. È l'equazione delle onde su una tela: i punti del telaio restano a zero, quindi le onde ci rimbalzano sopra.
Il dito
Il puntatore è una punta arrotondata: dentro PUSH_RADIUS ogni punto non può stare più in alto della forma della punta (una campana, meno PUSH_DEPTH per il quadrato di uno meno la distanza al quadrato). La rete viene spinta giù ma tiene la sua velocità, così togliendo il dito rimbalza da sola. Il clic invece cambia la profondità di prima di un pezzetto di rete: è un colpo di velocità, e parte un'onda.
Dalla profondità al disegno
Visto dall'alto la profondità non si vede: si vede che i fili scivolano verso la conca. Ogni punto è disegnato spostato contro la pendenza sotto di lui (la differenza fra i vicini a destra e a sinistra, sopra e sotto), moltiplicata per SLIDE. La stessa pendenza è la tensione: oltre una soglia i tratti di filo prendono il vermiglio in tre gradi di trasparenza.
La parola piegata
Ogni lettera ha il suo centro fisso, misurato sul peso più pieno, e a ogni fotogramma la parola si ridipinge su un canvas nascosto con ogni lettera al suo peso. Poi ogni cella della rete che contiene inchiostro si divide in due triangoli, e ogni triangolo copia il suo pezzo di parola con la trasformazione affine esatta che porta i tre angoli piatti sui tre angoli piegati, ritagliato a un pixel in più perché non si vedano giunture.
Il peso e la mano invisibile
Il peso di ogni lettera segue, su una molla con un filo di rimbalzo, la tensione più alta dei punti sotto di lei, da LIGHT a HEAVY. Quando il puntatore vero manca da 2,4 secondi, una timeline di GSAP a ripetizione porta una mano invisibile su un giro che torna uguale: preme, alza, colpisce una volta e lascia assestare.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'bounce' | La parola stampata sulla rete (fino a 12 lettere). |
COLS | script.js | 36 | Quanti fili in larghezza (meno sul telefono). |
ROWS | script.js | 22 | Quanti fili in altezza. |
STIFFNESS | script.js | 2400 | Quanto è tesa la rete: 800 un'amaca, 6000 un tamburo. |
DAMPING | script.js | 2.6 | Quanto in fretta si spegne un'oscillazione: 0.8 suona a lungo, 8 si ferma subito. |
PUSH_RADIUS | script.js | 5 | Quanto è largo il dito, in fili. |
PUSH_DEPTH | script.js | 70 | Quanto preme il dito, in px. |
SLIDE | script.js | 0.8 | Quanto i fili scivolano verso la conca (0: la profondità si vede solo dal colore). |
STRIKE | script.js | 1 | Quanto è forte il colpo del clic. |
LIGHT | script.js | 300 | Il peso della parola sulla rete lenta (da 100 a 900). |
HEAVY | script.js | 820 | Il peso dove la rete tira di più (da 100 a 900). |
Quando usarla
Per un titolo che si lascia toccare: l'apertura di uno studio di design o di un'agenzia, il nome di un prodotto in una landing page, una pagina 404 da giocare, la sezione di un sito di sport o di un parco a tema. Funziona con qualunque parola corta.
Sul telefono
La stessa rete, più stretta e alta, con meno fili in larghezza: il dito la preme finché è appoggiato, e alzandolo la rete rimbalza. Il tocco dà anche il colpo. La scritta d'aiuto dice Tap invece di Click.
Con il movimento ridotto
Niente si muove: la rete compare piatta, con la parola leggera, in dissolvenza, e resta ferma; il puntatore e il clic non la deformano.
Trappole
- Con il peso fatto sovrapponendo due immagini, una leggera e una piena, le lettere piene erano più larghe e si vedeva una seconda parola grigia spostata: ora ogni lettera ha un centro fisso e la parola si ridipinge a ogni fotogramma con ogni lettera al suo peso.
- Con una sola trasformazione affine per cella (presa da tre angoli) il quarto angolo non tornava e sulle lettere comparivano gradini dove la rete era molto tirata: ogni cella ora è divisa in due triangoli, ognuno con la sua trasformazione esatta.
- Con l'accento acceso già a poca tensione, l'onda dell'apertura colorava mezza rete di rosso: le soglie partono da un livello di tensione alto, così il vermiglio resta sui fili più tesi.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 21 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.
