Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il meteo della manica a vento
Il vento di uno spot da kite ora per ora, letto su una manica a vento a strisce di stoffa vera: un tubo di punti mosso con Verlet, gonfiato dall'aria e tirato giù dal peso, disegnato faccia per faccia con la luce e l'ombra delle pieghe. Con poco vento pende dall'anello e ondeggia, col vento fresco si riempie striscia dopo striscia e sbatte in coda, a ogni raffica schiocca; i nodi rotolano come un contachilometri e la freccia gira con una molla.
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>The windsock forecast</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/saira@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the wind at a kite spot hour by hour: the heart is a striped windsock of real cloth (a tube of points moved by
Verlet and held by links, inflated by the wind, pulled by gravity), hung from its hoop on a swivel. Choosing
an hour changes the wind: in a light air the sock hangs and sways, in a fresh breeze it fills and flaps, and
at every gust it snaps taut -->
<section class="sock" aria-labelledby="sock-place" data-sock data-autoclic>
<canvas class="sock__canvas" aria-hidden="true" data-canvas></canvas>
<header class="read">
<h2 class="read__place" id="sock-place">Pellow Sands</h2>
<p class="read__when" data-when></p>
<div class="read__main">
<p class="speed">
<span class="speed__num" aria-hidden="true" data-num></span>
<span class="speed__unit" aria-hidden="true">kn</span>
<span class="sr" data-speed-sr></span>
</p>
<dl class="facts">
<div class="fact fact--gust" data-gust-row>
<dt>Gusts</dt>
<dd><span data-gust></span> kn</dd>
</div>
<div class="fact">
<dt data-force></dt>
<dd class="fact__name" data-force-name></dd>
</div>
</dl>
</div>
</header>
<div class="dir">
<svg class="dir__rose" viewBox="0 0 60 60" aria-hidden="true">
<circle class="dir__ring" cx="30" cy="30" r="26"/>
<g class="dir__ticks" data-ticks></g>
<text class="dir__n" x="30" y="10.6">N</text>
<g data-arrow>
<path class="dir__arrow" d="M30 15.6 35 26 31.5 24.9V42.4H28.5V24.9L25 26Z"/>
<path class="dir__tail" d="M26.4 45.6 30 42.4 33.6 45.6"/>
</g>
</svg>
<p class="dir__text"><span class="dir__from">from</span> <span data-from></span></p>
</div>
<div class="panel">
<div class="hours" role="radiogroup" aria-label="Forecast hour" data-hours>
<span class="hours__pill" aria-hidden="true" data-pill></span>
</div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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.
61 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 «Il meteo della manica a vento» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un widget scuro dagli angoli tondi, largo 380 pixel e alto 424. In alto Pellow Sands e l'ora (Now, 15:00), i nodi in cifre grandi e sottili (18 kn), le raffiche (Gusts 24 kn) e la forza della scala Beaufort col suo nome colorato come il vento (Force 5 · Fresh breeze); a destra una piccola bussola con la freccia che indica dove va il vento e da dove viene (from WSW). In mezzo un palo di metallo con una manica a vento a cinque strisce arancioni e bianche, appesa al suo anello girevole; dietro passano linee d'aria leggere, veloci quanto il vento. In basso, su un vetro fumé, le ore dalle 7 alle 21: per ognuna una barretta (il vento medio pieno, le raffiche più tenui sopra, nel colore della sua forza), una freccina, i nodi e l'ora. Scegliendo un'ora il vento cambia in poco più di un secondo: la manica gira sull'anello verso la direzione nuova, si affloscia e pende ondeggiando se il vento cala, si gonfia e si tende se sale, e col vento fresco la coda sbatte e la stoffa fa pieghe che corrono verso la coda. Ogni pochi secondi arriva una raffica: la manica schiocca, un'onda d'aria la tende dall'anello alla coda, e la cifra delle raffiche si accende del suo colore. I nodi rotolano alla cifra nuova come un contachilometri (le decine girano solo quando le unità passano dal 9 allo 0), la freccia della bussola gira con una molla che va un po' oltre e torna, la pastiglia scivola sotto l'ora scelta con un rimbalzo. Il puntatore che passa sulla manica ci soffia sopra e la spinge da parte; un tocco soffia dal punto toccato verso la manica.
Come funziona
Un tubo di punti
La manica è fatta di anelli di 18 punti, quattro anelli per striscia, dal più largo all'anello fino alla coda più stretta. I punti si muovono con l'integrazione di Verlet (la velocità è la differenza fra la posizione di adesso e quella di prima) in passi fissi di 1/120 di secondo, al massimo quattro per fotogramma; dopo ogni passo cinque giri riportano i collegamenti alla loro lunghezza: lungo il tubo, intorno a ogni anello e in diagonale su ogni faccia, così la stoffa non si allunga e non si sbieca, più alcuni collegamenti morbidi (un anello sì e uno no lungo il tubo, un punto sì e uno no intorno, attraverso il tubo) che arrotondano le pieghe.
Il vento la trascina e la gonfia
A ogni punto l'aria tira verso la velocità del vento (una resistenza proporzionale al vento, più debole sotto i 10 nodi, quando l'aria scivola su una manica floscia) e il peso lo tira giù. Dall'interno l'aria spinge ogni punto lontano dal centro del suo anello: è questa pressione che fa del tubo una trave e lo tiene dritto. Come sugli aeroporti, il vento riempie circa una striscia ogni tre nodi: oltre il punto dove arriva la pressione cala e la coda pende. Sotto i cinque o sei nodi la pressione diventa negativa e la stoffa si affloscia in pieghe.
Sbattere e schioccare
Due treni d'onde corrono dall'anello alla coda, di lato e in su, più forti e più veloci col vento (la loro frequenza cresce coi nodi) e quasi nulli all'anello; la pressione interna varia intorno al tubo in tre lobi che scorrono, e lascia fra loro le pieghe. Le raffiche arrivano da sole ogni pochi secondi, più spesso quando le raffiche previste superano di molto il vento medio: il vento sale in un terzo di secondo e cala in uno e mezzo, e all'inizio una cresta d'aria corre lungo la manica in 0,32 secondi e la tende di colpo.
Disegnata faccia per faccia
A ogni fotogramma i punti passano nella camera (un po' di lato e un po' dal basso, con la prospettiva) e le facce del tubo, i pezzi dell'anello, i due bracci e il palo si ordinano dal fondo al davanti e si dipingono su una tela. La normale di ogni faccia, orientata verso l'esterno del suo anello, dice se si vede la stoffa da fuori (luce avvolgente più il lucido del nylon) o da dentro, attraverso la bocca (scura e più scura verso la coda); le cuciture fra le strisce e l'orlo della coda sono un filo più scuro. L'anello gira sul palo con una molla verso dove va il vento, più rigida col vento forte.
Le cifre, la freccia e il soffio
Le unità e le decine dei nodi sono due ruote di cifre: un tween porta il valore al numero nuovo e le ruote lo seguono come in un contachilometri, con la ruota delle decine che si allarga dal niente quando si passano i 10 nodi. La freccia della bussola è una molla calcolata a mano che prende la via più corta. La velocità del puntatore sullo schermo, girata nel mondo della camera, diventa un soffio che spinge i punti vicini e svanisce in un terzo di secondo. Le ore sono un gruppo di scelte (frecce, Home e Fine); un clic da script (l'anteprima della libreria) va all'ora dopo da vedere.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
HOURS | script.js | [['07', 6, 9, 60], …] | La previsione: l'ora, il vento medio in nodi, le raffiche in nodi, da dove soffia in gradi. |
NOW | script.js | '15' | L'ora di adesso: si mostra per prima e nella fila si chiama Now. |
CHANGE | script.js | 1.2 | I secondi che il vento impiega a cambiare verso l'ora scelta. |
GUSTINESS | script.js | 1 | Quanto spesso e quanto forte arrivano le raffiche: 0 mai, 2 il doppio. |
FLAP | script.js | 1 | Quanto sbatte la stoffa col vento forte. |
BLOW | script.js | 1 | Quanto forte soffia il puntatore sulla manica. |
STRIPES | script.js | 5 | Le strisce della manica, colorate e bianche a turno. |
SOCK_LENGTH | script.js | 124 | Quanto è lunga la manica, in pixel. |
AIR | script.js | 1 | Quante linee d'aria passano: 0 nessuna. |
Quando usarla
Per l'app o il sito di una scuola di kite, di vela o di windsurf, di un circolo nautico, di un campo di volo o di un parapendio, una stazione meteo di una spiaggia, e in generale per un vento che si vuole vedere, non solo leggere.
Sul telefono
Il widget è largo 380 pixel e sul telefono si stringe allo schermo (358 su uno schermo da 390), sempre alto 424; la cifra dei nodi si fa un po' più piccola perché i dati accanto restino lontani dalla bussola. Le ore si toccano col dito; strisciare il dito sulla manica ci soffia sopra, un tocco soffia verso di lei, e in verticale la pagina scorre come sempre (touch-action pan-y). La tela si disegna a densità 2 al massimo.
Con il movimento ridotto
La manica non si muove da sola: per ogni ora la sua posa si calcola subito, fuori vista, senza onde e senza raffiche, e la figura vecchia si dissolve nella nuova in 0,45 secondi. Le cifre cambiano subito, la freccia è subito al suo posto, niente linee d'aria, niente soffio del puntatore e niente entrata; quando niente cambia la tela non si ridisegna.
Trappole
- Con la camera un po' di lato nel verso sbagliato, col vento da ovest si vedeva la coda e non la bocca: girata dall'altra parte, la bocca si apre verso chi guarda e dentro si vede la stoffa scura.
- Con poco vento la stoffa floscia si accartocciava e attraverso le pieghe spuntavano facce interne quasi nere, come buchi: collegamenti morbidi intorno a ogni anello (un punto sì e uno no) e uno molto morbido attraverso il tubo arrotondano le pieghe, e l'interno è meno scuro.
- Un tubo tenuto tondo da collegamenti rigidi stava dritto come un cono anche con tre nodi: la rotondità deve venire dalla pressione dell'aria, che col vento debole diventa negativa, e la resistenza dell'aria si indebolisce sotto i 10 nodi, così la manica pende.
- Lo sbattere era quasi invisibile: la stessa resistenza che tira la manica col vento frena ogni movimento di lato, e la forza delle onde va scelta contro di lei (con 1500 la coda si spostava di cinque pixel).
- Il palo che passava sotto il vetro delle ore faceva una striscia chiara sfocata in mezzo alla pastiglia: ora sfuma nel buio un po' sopra il vetro.
- Le barrette delle ore con poco vento erano alte cinque pixel e sembravano pallini: partono da nove pixel.
Librerie
GSAP 3.15.0, Saira (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 8 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.
