Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il piè di pagina col prato
Il piè di pagina di un piccolo vivaio, verde scuro, con una striscia di prato che cresce lungo il bordo alto: centinaia di fili d'erba su tre piani, ognuno una molla mossa dalla brezza e da raffiche che corrono da un lato all'altro. Il puntatore apre l'erba come una mano, un link puntato manda una raffica verso di sé e l'iscrizione alla newsletter fa sbocciare i fiori nel prato, uno dopo l'altro.
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 meadow footer</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/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the footer of a small plant nursery: a strip of meadow grows along its top edge, hundreds of blades on three
planes, each one a spring stirred by the breeze and by gusts running across; a hand in the grass parts it,
pointing at a link sends a gust there, and a sign-up to the newsletter makes flowers bloom in it -->
<footer class="pf" data-footer data-autoclic>
<canvas class="pf__meadow" aria-hidden="true" data-meadow></canvas>
<div class="pf__panel">
<div class="pf__top">
<form class="pf__form" action="#" novalidate data-form>
<h2 class="pf__title" data-in>Notes from the nursery</h2>
<p class="pf__lede" data-in>What to sow, what to cut back, and first pick of new plants. One letter a month.</p>
<label class="sr" for="pf-email">Email address</label>
<div class="pf__field" data-field data-in>
<input class="pf__input" id="pf-email" name="email" type="email" inputmode="email" autocomplete="email" autocapitalize="off" spellcheck="false" enterkeyhint="send" placeholder="you@example.com" aria-describedby="pf-note" aria-invalid="false" data-input>
<button class="pf__send" type="submit" data-send>
<span class="pf__send-bg" data-send-bg></span>
<span class="pf__send-label" data-send-label>Subscribe</span>
<svg class="pf__spin" viewBox="0 0 24 24" aria-hidden="true" data-spin><circle cx="12" cy="12" r="8"/></svg>
<svg class="pf__done" viewBox="0 0 24 24" aria-hidden="true" data-done><path d="M6.4 12.6l3.7 3.7 7.6-8.6"/></svg>
</button>
</div>
<p class="pf__note" id="pf-note" aria-live="polite" data-note data-in><span class="pf__line">No spam, ever. Leave with one click.</span></p>
</form>
<nav class="pf__cols" aria-label="Footer">
<div class="pf__col" data-in>
<h3 class="pf__head">Shop</h3>
<ul>
<li><a class="pf__link" href="#" data-link>Perennials</a></li>
<li><a class="pf__link" href="#" data-link>Grasses</a></li>
<li><a class="pf__link" href="#" data-link>Seeds</a></li>
<li><a class="pf__link" href="#" data-link>Garden tools</a></li>
<li><a class="pf__link" href="#" data-link>Gift cards</a></li>
</ul>
</div>
<div class="pf__col" data-in>
<h3 class="pf__head">Visit</h3>
<ul>
<li><a class="pf__link" href="#" data-link>The nursery</a></li>
<li><a class="pf__link" href="#" data-link>Find us</a></li>
<li><a class="pf__link" href="#" data-link>Workshops</a></li>
<li><a class="pf__link" href="#" data-link>Garden café</a></li>
</ul>
</div>
<div class="pf__col" data-in>
<h3 class="pf__head">Help</h3>
<ul>
<li><a class="pf__link" href="#" data-link>Delivery</a></li>
<li><a class="pf__link" href="#" data-link>Returns</a></li>
<li><a class="pf__link" href="#" data-link>Plant care</a></li>
<li><a class="pf__link" href="#" data-link>Contact us</a></li>
</ul>
</div>
</nav>
</div>
<div class="pf__legal" data-in>
<p class="pf__mark">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.5c0-6.4-.6-11.4-3.4-16"/><path d="M12 21.5c.3-5.2 2.3-9.4 6.2-12.6"/><path d="M12 21.5c-1-3.6-3.2-6.2-6.6-7.6"/><path d="M12 21.5c.6-3 2-5 4.4-6.2"/></svg>
<span>Sorrel & Sedge</span>
<span class="pf__copy"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5.1"/><path d="M7.9 4.5a2.3 2.3 0 1 0 0 3"/></svg><span class="sr">Copyright</span> 2026 Sorrel & Sedge Ltd</span>
</p>
<nav class="pf__small" aria-label="Legal">
<a class="pf__link pf__link--small" href="#" data-link>Privacy</a>
<a class="pf__link pf__link--small" href="#" data-link>Terms</a>
<a class="pf__link pf__link--small" href="#" data-link>Cookies</a>
<a class="pf__link pf__link--small" href="#" data-link>Accessibility</a>
</nav>
</div>
</div>
</footer>
</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.
55 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 piè di pagina col prato» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un piè di pagina verde bosco con gli angoli tondi: a sinistra l'iscrizione alla newsletter di Sorrel & Sedge, un vivaio inventato (Notes from the nursery, una riga che dice cosa arriva, il campo dell'email col pulsante Subscribe dentro e una riga d'aiuto sotto), a destra tre colonne di link (Shop, Visit, Help) e in fondo, dopo un filo, il marchio piccolo, il copyright e i link legali. Lungo tutto il bordo alto cresce un prato disegnato su un canvas: all'arrivo i fili spuntano da sinistra a destra con un piccolo rimbalzo, a ciuffi, su tre piani di profondità (dietro chiari e sottili, davanti scuri e larghi), con qualche stelo più alto con la spiga; alla base si scuriscono e diventano il verde del piè di pagina, così sembrano nascere da lui. La brezza li fa ondeggiare di continuo e ogni tanto una raffica corre da un lato all'altro: i fili si piegano al suo passaggio, prendono luce e tornano su oscillando, così si vede un'onda chiara attraversare l'erba. Il puntatore nel prato è una mano: i fili che incontra si scostano intorno a lei, quelli che sfiora di corsa vengono trascinati nella sua direzione, e quando se ne va tornano su ondeggiando; un clic o un tocco li schiaccia di lato tutt'intorno. Puntando un link, o arrivandoci col tasto Tab, una piccola raffica corre sul prato fino a sopra quel link, mentre la parola si sposta e al suo posto spunta un germoglio con due foglie che si aprono. L'iscrizione ha i suoi stati: un indirizzo sbagliato fa tremare il campo, diventa color corallo e dice cosa non va, e l'erba sopra il modulo trasale; uno giusto fa sparire la parola del pulsante, che si stringe in un cerchio con l'arco che gira, poi diventa una spunta, la riga sotto ringrazia, un soffio di vento parte dal modulo e nel prato sbocciano nove fiori (papaveri, fiordalisi e ranuncoli) uno dopo l'altro dal modulo verso l'esterno: lo stelo sale con un rimbalzo, il bocciolo si apre e i petali si allargano a raggiera, e anche i fiori si piegano col vento e con la mano. Scrivendo un altro indirizzo il pulsante torna com'era.
Come funziona
Il prato a ciuffi
I fili nascono a ciuffi di due-cinque, sparsi in modo uniforme lungo il bordo con un po' di scossa, su tre piani con la loro altezza, larghezza e colore; l'altezza ondeggia anche lungo il bordo, così il profilo del prato ha punti più alti e più bassi. Ogni filo ha una sua inclinazione, una curva, una rigidezza (più alta per i fili corti) e uno smorzamento, presi da un generatore casuale col seme, sempre uguali. Quanti sono dipende dalla larghezza: DENSITY fili per pixel.
Ogni filo è una molla
Lo stato di un filo è un angolo di piega e la sua velocità: a ogni passo l'angolo è tirato verso quello che vuole il vento da una molla smorzata (SPRING e DAMPING). Il filo si disegna in tre pezzi, piegando di più verso la punta (la piega cresce come la lunghezza alla 1,2), come una forma che si assottiglia, con curve quadratiche per i lati. Il passo del fotogramma è al massimo 1/30 di secondo e dentro si divide in passi di 1/120, perché le molle rigide e la spinta della mano restino stabili.
La brezza e le raffiche
Il vento in un punto è una brezza che scorre verso destra e si gonfia e cala piano (due onde moltiplicate), più un fremito proprio di ogni filo, più le raffiche: ognuna è una campana che corre a GUST_SPEED pixel al secondo, col fronte ripido e la coda lunga. Un filo alto prende più vento di uno corto. Più un filo è piegato, più il suo colore va verso la luce: i fili sono divisi per piano, tono e luce in ventiquattro tracciati, ognuno riempito con un gradiente verticale che alla radice diventa il verde del piè di pagina.
La mano nell'erba
Il puntatore è un dito che scende nell'erba: dal suo punto fino a terra nessun filo può stare entro HAND pixel. Per ogni filo vicino si calcola l'angolo che gli serve per girargli intorno, all'altezza del dito o con la punta se è più basso, e una molla forte lo spinge fin lì, solo verso fuori; il filo ricorda da che parte l'ha incontrato. Una mano veloce trascina in più i fili che sfiora nella sua direzione, con una forza che cresce col quadrato della velocità.
Le raffiche verso i link e i fiori
Puntando un link parte una raffica che va dall'ultimo link puntato (o da un punto lontano almeno 220 pixel) fino alla sua ascissa, rallentando, e lì si spegne. All'iscrizione riuscita i fiori nascono in posti sparsi con un po' di scossa, e GSAP fa crescere lo stelo (back.out) e aprire il fiore (elastic.out) uno dopo l'altro dal modulo verso fuori: i petali si allargano da un mazzetto in alto al cerchio intero. Gli steli hanno la loro molla e seguono vento e mano come i fili.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BREEZE | script.js | 0.5 | Quanto soffia la brezza di continuo: a 0 il prato sta fermo finché qualcosa non lo muove (e non arrivano raffiche). |
GUSTS | script.js | 6 | Più o meno quanti secondi passano fra due raffiche che attraversano il prato. |
GUST_SPEED | script.js | 560 | Quanto corre una raffica da un lato all'altro, in pixel al secondo. |
DENSITY | script.js | 0.75 | Quanti fili crescono per ogni pixel di larghezza, contando i tre piani. |
SPRING | script.js | 70 | Quanto è rigido un filo: di più lo fa tornare su prima. |
DAMPING | script.js | 1.5 | Quanto in fretta un filo smette di oscillare: di meno lo fa ondeggiare più a lungo. |
HAND | script.js | 36 | Quanto è larga la mano che apre l'erba, in pixel. |
FLOWERS | script.js | 9 | Quanti fiori sbocciano quando qualcuno si iscrive (meno su un piè di pagina stretto). |
WAIT | script.js | 1.1 | Quanto dura l'iscrizione nella demo, in secondi. |
Quando usarla
Per il piè di pagina di un vivaio, di un negozio di sementi o di attrezzi da giardino, di un marchio per l'aria aperta, di una fattoria o di un agriturismo, di un festival all'aperto: ovunque l'iscrizione alla newsletter meriti un piccolo premio e il fondo della pagina possa respirare.
Sul telefono
Il piè di pagina prende la larghezza dello schermo: la newsletter va sopra e le tre colonne di link si mettono in fila sotto di lei, più strette; il copyright e i link legali vanno a capo. Il prato resta alto uguale ma con meno fili, e i fiori sono meno e un po' più piccoli. Il dito trascinato di lato nell'erba la apre come il puntatore (su e giù scorre la pagina), un tocco la schiaccia tutt'intorno, e toccando un link il germoglio spunta e la raffica parte come con l'hover.
Con il movimento ridotto
Il prato è disegnato una volta sola, fermo, con le sue curve: niente brezza, niente raffiche, la mano non lo muove e non si ridisegna. Puntando un link la parola resta dov'è e il germoglio compare in dissolvenza accanto a lei; il pulsante non si stringe e l'arco resta fermo; all'iscrizione i fiori compaiono già aperti, in dissolvenza, uno dopo l'altro; il campo sbagliato non trema.
Trappole
- Con un passo di 1/30 di secondo le molle più rigide, e soprattutto la spinta della mano, andavano in risonanza e i fili tremavano: il passo del fotogramma resta al massimo 1/30, ma dentro si divide in passi di 1/120 (il vento si calcola una volta per fotogramma, solo le molle si ripetono).
- La mano come un disco all'altezza del puntatore toccava solo le punte dei fili più alti, e passando sopra l'erba non succedeva quasi niente: ora è un dito che scende fino a terra, e un filo deve girargli intorno all'altezza del dito o, se è più basso, con la punta.
- Un filo incontrato in pieno dal dito non sapeva da che parte andare e scattava avanti e indietro: ricorda il lato da cui l'ha incontrato finché il contatto dura, e se l'ha preso in pieno va dalla parte verso cui la mano si muove.
- Con un trascinamento proporzionale alla velocità, una mano veloce faceva quanto una lenta, perché resta vicina ai fili per meno tempo: la forza cresce col quadrato della velocità, così una passata rapida lascia dietro di sé un'onda.
- Le spighe, disegnate come un filo che si assottiglia, restavano appese nel vuoto perché lo stelo spariva sotto di loro: gli steli con la spiga sono linee di spessore costante, e la spiga sta lungo l'ultimo pezzo.
- Gli steli dei fiori, tracciati in un colore pieno, spuntavano sotto il bordo dentro il verde del piè di pagina: usano lo stesso gradiente dei fili, che alla radice diventa il colore del fondo.
- L'anello del focus di un link tagliava la parola, che si sposta con un transform mentre il contorno resta dov'è: l'anello è un pseudo-elemento più largo a destra quanto lo spostamento.
- Al telefono, in tre colonne, Opening hours spostata dal germoglio finiva sopra Returns: il link è diventato Find us e lo spostamento scende a 14 pixel.
- L'anello del campo con :focus-within si accendeva anche col focus sul pulsante, doppio col suo: si accende con :has(.pf__input:focus).
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 19 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
