Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
Le lanterne di carta
Fili di lanterne di carta colorate attraversano una strada stretta di sera: passandoci col puntatore le lanterne dondolano come pendoli, si urtano fra vicine e i fili si flettono. Un clic accende una lanterna di un altro colore, con le nervature di bambù che si vedono controluce, e un’onda di accensioni corre lungo il suo filo.
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>Paper lanterns</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the street at dusk, the strings across it and the paper lanterns: one SVG drawn by the script -->
<svg class="street" data-street aria-hidden="true"></svg>
<section class="copy" data-copy>
<p class="copy__kicker" data-in>Hollow Lane, Friday nights in August</p>
<h1 class="copy__title" data-in data-title>The Paper <em data-accent>Lantern</em> Fair</h1>
<p class="copy__line" data-in>Four hundred lanterns over one narrow street, a food stall under every string and music until the last one goes out.</p>
<p class="copy__when" data-in>From dusk to midnight. Free entry.</p>
</section>
<!-- one button for every lantern, for the keyboard: the pointer is handled by the stage -->
<div class="keys" data-keys></div>
<p class="hint" data-hint>Brush the lanterns. Click one to light its string.</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.
35 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 lanterne di carta» da Animorio e adattala al mio sitoCosa fa
La pagina di una fiera serale inventata, The Paper Lantern Fair, in una via stretta, Hollow Lane, vista in prospettiva verso il fondo: le facciate delle case con le finestre accese, il selciato, il cielo che passa dal blu al rosa del tramonto. Da un muro all’altro sono tesi due fili, uno vicino e uno più lontano e più piccolo, con le lanterne di carta di sei colori: tonde, alte o basse, con i tappi laccati e la nappina. All’arrivo i fili si disegnano da un muro all’altro, le lanterne scendono sui loro cordini con un rimbalzo e un’onda di luce le accende una dopo l’altra, sul filo vicino da sinistra e su quello lontano da destra. Passando col puntatore le lanterne dondolano come pendoli, si urtano fra vicine schiacciandosi un poco a ogni colpo, la nappina scatta in ritardo, e il filo si piega dove il puntatore lo attraversa e sotto il peso della lanterna che dondola. Quella sotto il puntatore si schiarisce. Un clic accende la lanterna di un colore nuovo: la luce dentro la carta si alza, le nervature di bambù diventano scure controluce, la lanterna fa un saltello, e l’onda corre lungo il filo nei due sensi, ogni lanterna cambia colore e si accende con un piccolo urto; nel titolo la parola Lantern prende il colore nuovo e salta con un elastico.
Come funziona
La strada in prospettiva
Tutto è un solo SVG disegnato dallo script alla misura del palco. C’è un punto di fuga al centro: un punto del muro si trova dicendo quanto è lontano lungo la strada e quanto è alto sul muro, così finestre, case e selciato si rimpiccioliscono da soli. Ogni filo è attaccato ai due muri alla sua distanza, e sul filo lontano tutto è più piccolo.
Il filo è una corda di pesini
Ogni filo è una fila di punti, fermi ai due muri, legati da tratti che non si possono allungare (Verlet: a ogni passo ogni punto continua con la sua velocità, poi sedici giri rimettono le distanze). È un po’ più lungo della distanza fra i muri, quindi pende (SAG). Prima di mostrarlo lo si lascia assestare per cinquecento passi, così all’arrivo non trema.
Le lanterne sono pendoli
Ogni lanterna pende dal suo nodo del filo: si tiene il suo angolo e la sua velocità. Sente la gravità e anche l’accelerazione del nodo, quindi un filo che si muove la fa dondolare; a sua volta tira il nodo lungo il cordino con il suo peso e con la spinta del dondolio, così il filo si piega. La fisica gira a 120 passi al secondo, a passo fisso.
Gli urti
Due lanterne vicine sullo stesso filo sono due cerchi: se si toccano e si stanno avvicinando, si scambiano la velocità lungo la linea che li unisce, con un rimbalzo (BOUNCE), poi si separano. A ogni colpo la carta si schiaccia e torna con una molla, e la nappina scatta in ritardo. Il puntatore dà la sua velocità alle lanterne che attraversa, guardando tutta la strada fatta nel fotogramma, e trascina i punti del filo che incrocia.
La luce e l'onda
La luce è un’altra forma uguale alla carta, un poco più piccola, riempita con un gradiente caldo: alzandone l’opacità la lanterna si accende da dentro, senza niente che brilli fuori. Le nervature sono linee scure sopra la carta, più visibili quanto più è accesa. Il clic chiama per ogni lanterna del filo un’accensione ritardata di WAVE_GAP per ogni posto di distanza: colore nuovo, luce che sale e si assesta su SETTLE_GLOW, un saltello e un colpetto al nodo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LANTERNS | script.js | 8 | Quante lanterne su ogni filo; sul telefono ne entrano meno. |
STRINGS | script.js | 2 | Quanti fili attraversano la strada (da 1 a 3), dal più vicino al più lontano. |
SWING | script.js | 1 | Quanto forte il puntatore spinge le lanterne. |
DAMPING | script.js | 1 | Quanto in fretta si calmano: 0,3 le lascia dondolare a lungo. |
BOUNCE | script.js | 0.55 | Quanto rimbalza un urto fra due lanterne: 0 le appoggia, 0,9 le fa schizzare via. |
SAG | script.js | 1 | Quanto pendono i fili e quanto cedono sotto il puntatore. |
WAVE_GAP | script.js | 0.09 | Quanti secondi fra l’accensione di una lanterna e la vicina, nell’onda. |
SETTLE_GLOW | script.js | 0.72 | Quanto resta accesa una lanterna dopo l’onda (1 = piena). |
Quando usarla
Per la prima pagina di una festa di strada, una fiera serale, un mercato notturno, un ristorante con il dehors, un festival di musica o una sagra: un oggetto da toccare che dà subito l’idea della sera d’estate e della festa.
Sul telefono
La strada è la stessa, con il punto di fuga un po’ più in alto e meno lanterne su ogni filo, più grandi. Le lanterne si muovono trascinando il dito fra loro; un tocco accende la lanterna e manda l’onda. La fisica, gli urti e l’onda sono gli stessi.
Con il movimento ridotto
Niente dondola e i fili stanno fermi: le lanterne sono già appese e accese. Quella sotto il puntatore si schiarisce in dissolvenza; il clic cambia colore e luce alle lanterne del filo una dopo l’altra, sempre in dissolvenza, senza saltelli.
Trappole
- La lanterna deve sentire il filo e il filo la lanterna, altrimenti sembrano due disegni sovrapposti: il pendolo usa l’accelerazione del suo nodo, e il nodo riceve il peso e la spinta della lanterna lungo il cordino. L’accelerazione del nodo, misurata da un passo all’altro, è rumorosa: va filtrata e limitata, se no le lanterne tremano da sole.
- Un filo di Verlet appena creato è teso dritto e al primo fotogramma cade e rimbalza: lo si lascia assestare prima di mostrarlo, e poi si azzera la sua velocità.
- Due lanterne che si toccano già e si scambiano la velocità anche quando si allontanano restano incollate: lo scambio si fa solo se si avvicinano, la separazione sempre.
- GSAP mette il suo transform in linea e cancella quello scritto a mano: i gruppi SVG delle lanterne si muovono solo dallo script, con l’attributo transform, e GSAP anima solo numeri in oggetti JavaScript (luce, nervature, discesa).
- Il video dell’anteprima si ferma quando non c’è più niente di GSAP in programma: una brezza leggerissima è un tween che ricomincia sempre, così l’orologio non si ferma.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 11 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.
