Il pulsante a bandiera

Pulsanti, Fisica, TransizioniCanvas, GSAPImpegnativaPeso compresso: Demo 15 KBGSAP 28 KBGratisScarica lo zip

Il pulsante per iscriversi a un’uscita in bici, Join the ride, fatto come una bandierina di stoffa rossa a coda di rondine su un’asta corta. La stoffa è simulata davvero, punto per punto, e la scritta è stampata sopra: a riposo una brezza la fa ondeggiare piano, col mouse sopra il vento rinforza dove sta il puntatore, premuta si raccoglie in pieghe verso l’asta. Al clic una grinza corre lungo la bandiera fino alla punta, e dietro di lei la bandiera si è girata: l’altro lato è verde e dice You’re in con una spunta. Poi si rigira.

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 flag button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/saira@5.3.0/wght-italic.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the flag button: the sign-up of a club ride, made as a swallowtail pennant of cloth on a short pole. The cloth
         is simulated (a grid of points in 3D, held by links, pushed by a breeze) and drawn on a canvas with the words
         printed on it and the light on its folds. The pointer brings the wind up, a press gathers the cloth to the
         pole, and the click sends a big wave down it that turns the flag over to You're in -->
    <div class="flag" data-flag>
      <div class="flag__spot" data-spot>
        <canvas class="flag__shadow" aria-hidden="true" data-shadow></canvas>
        <canvas class="flag__cloth" aria-hidden="true" data-cloth></canvas>
        <button class="flag__btn" type="button" data-btn data-autoclic><span class="sr" data-name>Join the ride</span></button>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </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.

19 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 «Il pulsante a bandiera» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco un’asta corta e scura, alta quanto il pulsante, con un cappuccio d’ottone in cima e il piede che spunta sotto. Dall’asta parte una bandierina di stoffa rossa a coda di rondine, cucita intorno all’asta con una guaina: si vedono la trama del tessuto, gli orli un po’ più scuri con l’impuntura chiara tutt’intorno, anche lungo il taglio della coda, e stampati in crema una bicicletta e JOIN THE RIDE in corsivo. Una brezza leggera fa correre piccole onde dall’asta alla punta: le pieghe hanno il lato in luce e quello in ombra, la stoffa ha un riflesso satinato, la coda si muove più del resto e sulla pagina cade l’ombra morbida della bandiera, che segue le onde. All’arrivo la bandiera è raccolta sull’asta e il vento la apre. Col mouse sopra il vento rinforza: le onde si fanno più profonde intorno al puntatore e la stoffa si scosta dal lato da cui arriva. Premendo, la stoffa si raccoglie verso l’asta in pieghe regolari come una tenda tirata. Al clic una folata la riapre e una grinza parte dall’asta e corre fino alla punta: dove è passata la bandiera si è girata, verde, con una spunta e YOU’RE IN; sul bordo della grinza c’è un filo di luce e la sua ombra cade sul lato ancora rosso. In fondo una raffica la tende. Dopo un momento una grinza più lenta la rigira sul lato rosso. Con la tastiera il fuoco mostra un anello scuro intorno alla bandiera e un soffio di vento la percorre; Invio la gira, Spazio la raccoglie finché è premuto. Al telefono il dito che tocca è vento e pressione insieme.

Come funziona

Una stoffa di Verlet in 3D

La bandiera è una griglia di 33 per 7 punti nello spazio: la colonna sull’asta è cucita e non si muove, gli altri si spostano a ogni passo della loro velocità (la distanza da dove erano prima, smorzata dall’aria) più le forze. Poi, sei volte per passo, i legami riportano ogni coppia alla sua distanza: lungo e giù (la stoffa non si allunga), le due diagonali (non si deforma di sbieco) e, più morbidi, un punto sì e uno no (le pieghe restano tonde). Il passo è fisso, 1/120 di secondo, e il tempo di un fotogramma non conta mai più di 1/30. Le forze: una gravità leggera, il vento che spinge via dall’asta e due treni di raffiche, sin(2π(1,25u − 0,82t)) e uno più corto e veloce, che spingono dentro e fuori dalla pagina, più forti verso la punta: così le onde corrono dall’asta alla coda.

La scritta stampata sulla stoffa

I due lati della bandiera si dipingono una volta sola su due canvas fuori schermo, a due o tre volte la risoluzione: il colore, la trama (fili sottili nei due versi e un po’ di grana), gli orli più scuri con l’impuntura tratteggiata, la bici o la spunta e le lettere una per una, con la loro crenatura. A ogni fotogramma la stoffa si disegna triangolo per triangolo: per ogni triangolo si ricava dai suoi tre punti l’affine che porta il triangolo piatto della figura dov’è ora, si ritaglia il triangolo (un pelo più grande, così fra i vicini non resta una fessura) e si copia solo il pezzo di figura che gli serve. I triangoli più lontani vanno per primi, e tutta la stoffa è ritagliata una volta sul suo bordo.

La luce dalle normali

La normale di ogni punto è il prodotto vettoriale fra i due vicini lungo e i due vicini giù. Confrontata con una lampada in alto a sinistra dà quanto quel punto è più scuro o più chiaro che se la stoffa fosse piatta, più un riflesso satinato dove la piega guarda fra la lampada e l’occhio. I valori vanno in due immagini di 33 per 7 pixel, uno per punto, che si stirano morbide su tutta la figura con source-atop prima di consegnarla ai triangoli: la luce viaggia con la stoffa e le pieghe hanno il loro lato chiaro e quello scuro. L’ombra sulla pagina è il contorno della bandiera su un secondo canvas, spostato in proporzione all’altezza di ogni punto e sfumato dal CSS.

Il vento, la mano e la grinza

Col puntatore sopra il vento cresce di GUST, le raffiche si fanno più fitte in una campana intorno al puntatore e la stoffa viene spinta via dal suo lato. Premendo, ogni punto è tirato verso un’asta più vicina di GATHER e ogni quarta colonna è spinta fuori dalla pagina e le altre dentro: la stoffa si raccoglie in pieghe regolari, e uno smorzamento in più la tiene ferma. Al clic una folata la riapre e parte la grinza: i punti vicini a lei sono tirati con una molla rigida verso un dorso a campana alto 19 pixel che corre dall’asta alla punta in SNAP secondi, dietro di lei la stoffa è stirata piatta. I due lati si scambiano sul fianco lontano del dorso, dove la stoffa scende verso la pagina, in ombra e quasi di taglio, lungo una linea un po’ inclinata con un filo di luce e la sua ombra.

Mai sopra le parole

Dopo i legami, lungo ogni fila ogni punto resta almeno un quinto di maglia più a destra del precedente, e lungo ogni colonna un terzo di maglia più in basso: la stoffa può piegarsi dentro e fuori dalla pagina quanto vuole, ma non ripiegarsi su sé stessa davanti agli occhi, e la coda non cade mai sopra la scritta. Invio, Spazio, un lettore di schermo e l’anteprima della libreria fanno lo stesso giro: senza una mano la stoffa si raccoglie a metà da sola e poi parte la grinza. Quando la brezza è a zero e niente si muove più, la bandiera non si ridisegna; fuori dallo schermo si ferma.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`BREEZE`	script.js	`1`	La brezza a riposo: 0 la bandiera sta quasi ferma, 2 un vento fresco.
`GUST`	script.js	`2.6`	Quanto rinforza il vento col puntatore sopra la bandiera (1 = niente).
`RIPPLE`	script.js	`1`	Quanto sono grandi le onde che corrono lungo la stoffa.
`GATHER`	script.js	`0.45`	Quanto si raccoglie la stoffa verso l’asta mentre è premuta, come parte della sua lunghezza.
`SNAP`	script.js	`0.75`	I secondi che la grinza del clic impiega a correre dall’asta alla punta.
`HOLD`	script.js	`1.6`	I secondi in cui la bandiera dice You’re in prima di rigirarsi.
`NOTCH`	script.js	`0.12`	Quanto è profondo il taglio a coda di rondine in fondo alla bandiera, come parte della sua lunghezza (0 = bandiera rettangolare).
`DONE_LABEL`	script.js	`You’re in`	Le parole stampate sull’altro lato della bandiera.

Provali nel Playground

Quando usarla

Per iscriversi a qualcosa che si fa all’aperto e insieme: l’uscita del sabato di un club di ciclisti, una gran fondo, una corsa podistica, una regata, una gita. Sta bene anche per chi organizza eventi o per un negozio di bici. I colori dei due lati e le parole si cambiano nel CSS e nello script.

Sul telefono

La bandiera è larga 284 pixel, o lo schermo meno 48, e alta 60; la stoffa e la scritta si rifanno sulla misura vera. Il dito che la tocca è insieme il vento e la mano: la stoffa ondeggia e si raccoglie, e lasciandola parte la grinza. Su e giù la pagina scorre ancora (touch-action pan-y); il menu del tocco lungo è spento.

Con il movimento ridotto

La stoffa sta ferma in una piega calma, con la sua luce, e non si ridisegna. Niente vento né raccolta: premendo la bandiera si scurisce appena. Al clic il lato rosso si spegne nell’ombra della stoffa e da lì viene su il lato verde, senza che niente si muova, e lo stesso al ritorno.

Trappole

I due lati scambiati dove stava la spinta cadevano su stoffa piatta e sembravano una tendina: la stoffa arriva in ritardo sulla spinta. Ora i punti vicini alla grinza sono tirati con una molla rigida verso un dorso che corre, e lo scambio sta sul fianco lontano del dorso, in ombra.
Un dorso inclinato faceva ruotare la bandiera e lasciava una piega di sbieco, come la carta piegata in diagonale: il dorso resta dritto e si inclina solo la linea dello scambio.
La grinza che tirava stoffa dai due lati riportava indietro la coda, e la coda le ricadeva sopra coprendo la scritta; fermarla a metà restituiva tutta insieme la stoffa presa, con lo stesso risultato. La regola che lungo ogni fila un punto resta sempre più a destra del precedente rende impossibile che la stoffa si ripieghi davanti alle parole.
Le pieghe lasciate dalla pressione venivano congelate dietro la grinza: dietro di lei la stoffa viene stirata piatta, e al rilascio una folata la riapre prima che la grinza parta.
I triangoli un pelo più grandi, che chiudono le fessure fra vicini, si sovrapponevano lungo il bordo e lasciavano una fila di puntini scuri: tutta la stoffa è ritagliata una volta sul suo contorno.
Con 24 colonne la luce di una grinza larga 40 pixel cadeva in una sola maglia e non si vedeva: le colonne sono 32.
Con il movimento ridotto la dissolvenza fra rosso e verde passava per il marrone, con le due scritte una sopra l’altra: ora il lato vecchio si spegne nell’ombra della stoffa e il nuovo ne viene su. Per la stessa ragione la guaina sull’asta cambia colore di colpo.
L’ombra sulla pagina saltava sopra la bandiera quando una piega andava più in fondo della pagina stessa: una piega può arrivare alla pagina, mai attraversarla.
Un angolo della coda rimasto ripiegato non si riapriva più: una memoria leggerissima della bandiera piatta lo srotola da solo.

Librerie

GSAP 3.15.0, Saira (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 12 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.