Il pavimento che si alza
SVG, Hover, Fisica
NuovaGratis
Torna alla libreria
L’aquilone nel vento
Un aquilone a rombo di stoffa colorata vola con una fisica vera: il filo e la coda di fiocchi sono catene di punti (Verlet), il telo si gonfia e si increspa con le raffiche, che passano come linee di vento disegnate e piegano l’erba e le lettere del titolo. Trascini e tiri il filo; un clic manda una raffica forte e l’aquilone fa il giro della morte.
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>Kite in the wind</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the far things: clouds, birds, the wind lines and the hills, drawn behind the title -->
<svg class="layer layer--back" aria-hidden="true" focusable="false" data-back>
<g data-clouds></g>
<g data-birds></g>
<g data-wind></g>
<path class="hill hill--far" data-hill-far/>
</svg>
<header class="poster">
<h1 class="poster__title" data-title>Kite Day on Hollow Hill</h1>
<p class="poster__line" data-line>An afternoon festival on the windy side of town. Bring a kite, the hill brings the wind.</p>
</header>
<!-- the near things: the kite with its tail, the string and the grass in front -->
<svg class="layer layer--front" aria-hidden="true" focusable="false" data-front>
<g data-tail>
<path class="tail__line" data-tail-line/>
<g data-bows></g>
</g>
<g data-kite>
<g data-kite-body>
<path class="sail sail--a" data-panel="0"/>
<path class="sail sail--b" data-panel="1"/>
<path class="sail sail--a" data-panel="2"/>
<path class="sail sail--b" data-panel="3"/>
<path class="sail-shade" data-shade="0"/>
<path class="sail-shade" data-shade="1"/>
<path class="sail-shade" data-shade="2"/>
<path class="sail-shade" data-shade="3"/>
<path class="sail sail--c" data-heart/>
<path class="fold" data-folds/>
<path class="hem" data-hem/>
<path class="spar" data-spars/>
<path class="bridle" data-bridle/>
</g>
</g>
<path class="string" data-string/>
<path class="ground" data-ground/>
<path class="grass grass--dark" data-grass-dark/>
<path class="grass grass--light" data-grass-light/>
</svg>
<p class="hint" data-hint>Drag to pull the string. Click for a gust.</p>
<!-- the whole sky is the button: a press and a drag pulls the string, a click sends a gust -->
<button class="catch" type="button" aria-label="Send a strong gust of wind" data-catch data-autoclic></button>
</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.
29 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 «L’aquilone nel vento» da Animorio e adattala al mio sitoCosa fa
Il manifesto di una festa degli aquiloni inventata, Kite Day on Hollow Hill: un cielo di fine estate che si scalda verso l’orizzonte, una collina verde, l’erba in primo piano, nuvole che passano e qualche uccellino lontano. Le lettere del titolo arrivano in volo come spinte dal vento e si posano con un rimbalzo elastico. L’aquilone parte appoggiato sull’erba: la prima raffica lo solleva, il filo si tende e lui sale fino al punto dove il vento lo tiene, con la coda di fiocchi rossi e verde acqua che sventola sotto. Il vento cambia da solo: ogni tanto arriva una raffica, che si vede come un fascio di linee bianche (alcune con un ricciolo) che attraversano il cielo da sinistra; dove passa, l’erba si piega a ondata, le lettere del titolo ondeggiano un po’ di più e l’aquilone fa uno strattone, mentre il telo si gonfia, la crociera si incurva e il bordo di dietro si increspa. Se trascini, tiri il filo: l’aquilone prende più vento, sale e strattona; quando lasci, il filo torna alla mano con un elastico. Un clic manda una raffica forte: la mano lascia un po’ di filo, l’aquilone gira il muso e fa un giro della morte completo, con la coda che disegna il cerchio, poi oscilla un poco e si rimette a volare.
Come funziona
Il filo e la coda sono catene di punti
Il filo è una fila di trenta punti integrati con Verlet: ogni punto ricorda dov’era al passo prima, e la velocità è la differenza. Il primo punto è la mano (fermo), l’ultimo è l’aquilone, più pesante. Il vincolo del filo accorcia solo: due punti più lontani del pezzo di filo vengono riavvicinati, più vicini restano liberi, così il filo tira ma non spinge, si tende e si affloscia. La coda è un’altra catena appesa alla punta di sotto dell’aquilone, con vincoli rigidi in tutte e due le direzioni.
Come vola l’aquilone
Sull’aquilone agiscono una spinta lungo il muso, un trascinamento lungo il vento apparente (il vento meno la velocità dell’aquilone), il peso e l’aria che lo frena. Spinta e trascinamento crescono col quadrato del vento apparente: se tiri il filo verso di te l’aquilone va contro il vento, prende più spinta e sale. L’inclinazione è una molla che cerca un angolo un po’ girato verso il vento, più la turbolenza e un colpo all’insù quando la mano strattona.
Le raffiche attraversano lo schermo
Ogni raffica ha un inizio, una salita e una discesa esponenziale, ed entra da sinistra a una velocità fissa: un punto dello schermo la sente quando il fronte arriva lì. Così le linee di vento (tracciati SVG con un trattino che corre lungo stroke-dashoffset), l’erba che si piega, le lettere che ondeggiano e l’aquilone che strattona sono la stessa onda, nello stesso istante.
Il telo che si gonfia
Il rombo si ridisegna a ogni fotogramma: la crociera è una curva che si incurva con il gonfiore (una molla che va oltre e torna), i quattro spicchi seguono la crociera, e i bordi sono curve campionate che si gonfiano in fuori e, dietro, si increspano con un’onda che corre. Una piccola rotazione su se stesso (lo yaw) restringe il rombo e scurisce un lato, e quando il telo è gonfio compaiono due pieghe chiare.
Il giro della morte
Al clic parte una raffica forte e GSAP porta un angolo in più da zero a un giro intero: la molla dell’inclinazione lo insegue, la spinta segue il muso e, durante il giro, la velocità si orienta sul muso con una velocità costante, così la traiettoria è un cerchio stretto. La mano lascia un poco di filo (un tween yoyo sulla lunghezza) perché il filo non tagli il cerchio. Alla fine l’angolo torna a zero togliendo un giro intero e la molla, poco smorzata, fa oscillare l’aquilone mentre si riprende.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WIND | script.js | 1 | Quanto è forte il vento costante: più vento, l’aquilone vola più alto e le nuvole corrono di più. |
GUST | script.js | 1 | Quanto sono forti e frequenti le raffiche (anche quella del clic). |
TAIL | script.js | 7 | Quanti fiocchi ha la coda: la coda si allunga con loro. |
STRING | script.js | 1 | Quanto è lungo il filo. |
GRAVITY | script.js | 1 | Quanto pesano l’aquilone, il filo e la coda: più peso, l’aquilone vola più basso. |
LOOP_TIME | script.js | 1.2 | Quanti secondi dura il giro della morte dopo il clic. |
BIRDS | script.js | 3 | Quanti uccellini volano lontano. |
--sail-a | style.css | #ec5a3f | Il colore di due spicchi del telo (gli altri due sono --sail-b, il rombo in mezzo --sail-c; i fiocchi sono --bow-a e --bow-b). |
Quando usarla
Per l’apertura di una festa all’aperto, un sito per bambini o per una scuola, un negozio di giochi, il meteo con il vento, una pagina d’estate o una pagina 404 che si fa perdonare: ovunque serve un’immagine viva e leggera che chi guarda può toccare.
Sul telefono
La stessa scena con le misure adattate: la mano è più a sinistra, il filo più corto rispetto all’altezza e l’aquilone vola più dritto, così resta dentro lo schermo stretto; le nuvole sono tre. Si trascina col dito per tirare il filo (la pagina non scorre) e un tocco manda la raffica.
Con il movimento ridotto
Niente si muove: l’aquilone è già in cielo dove il vento lo tiene (la fisica gira qualche secondo senza disegnare, poi si disegna una volta sola), e la scena e il titolo compaiono in dissolvenza. Niente raffiche, niente linee di vento, niente giro della morte, e la scritta con le istruzioni non c’è.
Trappole
- Il giro della morte fatto solo con la spinta lungo il muso finiva per terra: la raffica forte dava troppa velocità e il cerchio diventava enorme. Durante il giro la velocità si orienta sul muso con un valore fisso, il trascinamento del vento si spegne quasi del tutto e il filo si allunga un poco: così il cerchio è stretto e in cielo.
- Girato in senso orario, il giro partiva verso valle e il filo teso lo tagliava a metà: in senso antiorario l’aquilone prima sale, verso la mano, dove il filo è lento, e il cerchio si chiude.
- Con una spinta sempre uguale l’aquilone, al decollo o dopo uno strattone, passava sopra la mano e restava sospeso dall’altra parte con il filo molle: la spinta cala quando l’aquilone è alto sopra la mano (la finestra del vento) ed è quasi zero oltre la verticale, così torna sempre sottovento.
- Con un vincolo che spinge anche (distanza fissa), il filo si comportava come un’asta: per un filo il vincolo deve solo accorciare.
- Con trenta punti e un aquilone pesante il filo si allungava come un elastico: dopo le iterazioni un ultimo controllo tiene l’aquilone dentro la lunghezza del filo.
- Le lettere del titolo hanno due span: quello fuori lo muove GSAP per l’entrata, quello dentro lo muove il vento a ogni fotogramma. Su un elemento solo il transform di uno cancellava quello dell’altro.
- Il filo disegnato dietro al telo sembrava attaccato alla punta di sotto, dove parte la coda: va disegnato davanti, come lo vede chi lo tiene, con le due briglie che arrivano al nodo.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 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.
