Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il piè di pagina con la marea
Il piè di pagina di una piccola scuola di surf, blu profondo, col mare lungo il bordo alto: una fila di molle legate fra loro su tre piani, con le onde che corrono, rimbalzano sui lati e si smorzano, la schiuma sulle creste e il sole che luccica sotto la superficie. Il puntatore smuove l'acqua, un link puntato fa salire una piccola onda verso di sé, l'iscrizione alla newsletter manda un'onda lunga da un lato all'altro e rialza la marea un attimo; una boa e una tavola galleggiano davvero.
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 tide footer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the footer of a small surf school: the sea runs along its top edge, a row of coupled springs drawn on three
planes with foam on the crests and the light glinting under the surface. The pointer stirs the water, a link
pointed at draws a small wave to itself, and a sign-up to the swell report sends a long wave across the whole
footer while the tide comes up for a moment; a buoy and a board float on it -->
<footer class="tw" data-footer data-autoclic>
<canvas class="tw__sea" aria-hidden="true" data-sea></canvas>
<div class="tw__panel" data-panel>
<div class="tw__top">
<form class="tw__form" action="#" novalidate aria-labelledby="tw-news" data-form>
<h2 class="tw__title" id="tw-news" data-in>The Thursday swell report</h2>
<p class="tw__lede" data-in>The week’s best tides, the wind for the weekend and the lessons with places left.</p>
<label class="sr" for="tw-email">Email address</label>
<div class="tw__field" data-field data-in>
<input class="tw__input" id="tw-email" name="email" type="email" inputmode="email" autocomplete="email" autocapitalize="off" spellcheck="false" enterkeyhint="send" placeholder="you@example.com" aria-describedby="tw-note" aria-invalid="false" data-input>
<button class="tw__send" type="submit" data-send>
<span class="tw__send-bg"></span>
<span class="tw__send-label" data-send-label>Subscribe</span>
<svg class="tw__spin" viewBox="0 0 24 24" aria-hidden="true" data-spin><circle cx="12" cy="12" r="8"/></svg>
<svg class="tw__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="tw__note" id="tw-note" aria-live="polite" data-note data-in><span class="tw__line">One email a week. Leave with one click.</span></p>
</form>
<nav class="tw__cols" aria-label="Footer">
<div class="tw__col" data-in>
<h3 class="tw__head">Learn</h3>
<ul>
<li><a class="tw__link" href="#" data-link>First waves</a></li>
<li><a class="tw__link" href="#" data-link>Private coaching</a></li>
<li><a class="tw__link" href="#" data-link>Kids’ camps</a></li>
<li><a class="tw__link" href="#" data-link>Surf and yoga</a></li>
</ul>
</div>
<div class="tw__col" data-in>
<h3 class="tw__head">Hire</h3>
<ul>
<li><a class="tw__link" href="#" data-link>Boards</a></li>
<li><a class="tw__link" href="#" data-link>Wetsuits</a></li>
<li><a class="tw__link" href="#" data-link>Lockers</a></li>
<li><a class="tw__link" href="#" data-link>Gift cards</a></li>
</ul>
</div>
<div class="tw__col" data-in>
<h3 class="tw__head">School</h3>
<ul>
<li><a class="tw__link" href="#" data-link>Surf report</a></li>
<li><a class="tw__link" href="#" data-link>Our coaches</a></li>
<li><a class="tw__link" href="#" data-link>Water safety</a></li>
<li><a class="tw__link" href="#" data-link>Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="tw__base" data-in>
<p class="tw__brand">
<svg class="tw__mark" viewBox="0 0 28 28" aria-hidden="true"><path d="M2.5 19.5c2.6 0 3.9-1.6 5.6-3.9 2.3-3.2 4.4-6.4 9.2-6.4 3.9 0 6.3 2.6 6.3 5.6 0 2.4-1.7 4-3.8 4-1.8 0-3-1.2-3-2.8 0-1.2.8-2 1.8-2"/><path d="M2.5 23.6c2.3 0 3.4-1.2 5.1-1.2s2.8 1.2 5.1 1.2 3.4-1.2 5.1-1.2 2.8 1.2 5.1 1.2"/></svg>
<span class="tw__name">Tidewell Surf School</span>
<span class="tw__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 Tidewell Surf Ltd</span>
<span class="tw__hours">Beach hut open daily, 7:30 to 19:00</span>
</p>
<nav class="tw__legal" aria-label="Legal">
<a class="tw__link tw__link--small" href="#" data-link>Privacy</a>
<a class="tw__link tw__link--small" href="#" data-link>Terms</a>
<a class="tw__link tw__link--small" href="#" data-link>Cookies</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.
56 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 con la marea» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un piè di pagina blu profondo, largo 1100 pixel e alto circa 400, con gli angoli in basso tondi, di Tidewell Surf School, una scuola di surf inventata. A sinistra l'iscrizione al bollettino del giovedì (The Thursday swell report, 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 (Learn, Hire, School) e in fondo, dopo un filo, il marchio con l'onda disegnata, il copyright, l'orario della capanna sulla spiaggia e i link legali. Lungo tutto il bordo alto c'è il mare, disegnato su un canvas: tre file d'onde una dietro l'altra, quelle lontane più alte, più scure e più calme, e davanti l'acqua vicina, turchese e un po' trasparente appena sotto la superficie, che scende fino a diventare il blu del piè di pagina. Un'onda lunga di fondo arriva di continuo, a serie che crescono e calano; lungo le facce rivolte al sole corre un filo di luce e sotto la superficie luccicano brevi strisce di sole che seguono la sua pendenza. All'arrivo la marea sale fino al suo livello mentre le scritte vengono su. Il puntatore che passa nell'acqua la spinge giù e se la trascina dietro: davanti alla mano si alza un'onda, dietro resta una scia, e le onde corrono via da tutte e due le parti, rimbalzano sui lati del piè di pagina e si spengono piano; un clic o un tocco è un sasso che cade, con gli spruzzi che ricadono in mare. Dove una cresta si fa ripida o sale in fretta nasce la schiuma, una riga bianca più spessa dove ce n'è di più e un merletto che resta indietro e svanisce. Puntando un link, o arrivandoci col tasto Tab, una spinta corre sull'acqua verso di lui alla velocità delle onde, così un'onda piccola cresce strada facendo e arriva sopra il link; intanto le lettere della parola la cavalcano una dopo l'altra, alzandosi e inclinandosi, e la parola diventa chiara. Sull'acqua galleggiano una boa rossa a strisce bianche, col suo palo, il segnale giallo e la cima d'ormeggio che scende nel blu, e una tavola gialla con la striscia corallo e la pinna: salgono e scendono con le onde, si inclinano col pendio dell'acqua, la tavola beccheggia e un'onda grande la porta avanti; quello che esce dall'acqua si vede netto, quello sotto si vede attraverso l'acqua. L'iscrizione ha i suoi stati: un indirizzo sbagliato fa tremare il campo, che diventa color corallo e dice cosa non va, e l'acqua sopra il modulo s'increspa; 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, dal lato sinistro parte un'onda lunga che attraversa tutto il piè di pagina, solleva la tavola e la boa, sbatte sull'altro lato e torna indietro più piccola, e intanto la marea sale di qualche pixel e poi ridiscende. Scrivendo un altro indirizzo il pulsante torna com'era.
Come funziona
Una fila di molle
La superficie è una fila di molle ogni 7 pixel: ognuna ha un'altezza e una velocità ed è tirata dalle due vicine (l'equazione delle onde, con la velocità WAVE_SPEED), un poco verso il livello calmo, frenata dall'acqua (DAMPING) e con un termine che liscia le increspature più corte. I bordi rimandano indietro le onde. Il passo del fotogramma è al massimo 1/30 di secondo e dentro si divide in passi di 1/240, perché le molle restino stabili anche con le onde veloci.
Tre piani e l'onda di fondo
Le file sono tre, una dietro l'altra: le lontane stanno più in alto, sono più scure e ricevono solo una parte delle spinte. Su ogni fila si somma un'onda di fondo fatta di tre onde lunghe che viaggiano, con l'ampiezza che cresce e cala a serie (SWELL); la marea alza tutte e tre. L'altezza si addolcisce con una tangente iperbolica invece di un taglio, così una cresta grande o una gola profonda non diventano mai piatte.
Le spinte che corrono
Un link puntato fa partire una spinta a campana che corre verso di lui alla stessa velocità delle onde: così continua ad alimentare la cresta che crea e l'onda cresce strada facendo, fino ad arrivare sopra il link. L'iscrizione fa lo stesso da un lato all'altro con una spinta larga, più forte all'inizio, mentre GSAP alza la marea di TIDE pixel e la riabbassa. Il puntatore spinge giù dove scende e sotto di sé, e alza l'acqua davanti a sé in proporzione alla sua velocità.
Schiuma e luce
A ogni fotogramma la schiuma cresce dove la cresta è ripida, appuntita o sale in fretta, e svanisce piano: si disegna come una riga bianca a quattro spessori, più un merletto tratteggiato appena sotto. La luce è una riga lungo la superficie, più forte sulle facce rivolte al sole, e una cinquantina di brevi strisce sotto l'acqua che si accendono e si spengono ognuna col suo ritmo, inclinate come la superficie e solo dove guarda verso la luce.
Galleggiare davvero
La tavola è fatta di cinque fette: ognuna riceve una spinta proporzionale a quanto sta sotto la superficie, perpendicolare alla superficie stessa, quindi sul pendio di un'onda la tavola scivola in avanti; l'acqua frena il suo moto e la porta col suo flusso, che si calcola dalla pendenza delle onde. Dalle spinte delle fette vengono anche la rotazione e il beccheggio. La boa è una palla col peso in basso, che si raddrizza e si inclina col pendio, tenuta dalla sua cima. Salendo e scendendo, tutte e due spingono l'acqua e fanno partire piccoli anelli.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SWELL | script.js | 1 | Quanto si muove il mare da solo: a 0 resta piatto finché qualcosa non lo smuove, e quando torna calmo il canvas smette di ridisegnarsi. |
WAVE_SPEED | script.js | 260 | Quanto corre un'onda sull'acqua, in pixel al secondo. |
DAMPING | script.js | 0.5 | Quanto in fretta le onde si spengono: di meno le fa rimbalzare sui lati più a lungo. |
STIR | script.js | 1 | Quanto il puntatore smuove l'acqua passandoci dentro. |
FOAM | script.js | 1 | Quanta schiuma fanno le creste (e quanti spruzzi): a 0 niente schiuma. |
TIDE | script.js | 10 | Di quanti pixel sale la marea per un momento dopo un'iscrizione. |
FLOATERS | script.js | 2 | Quante cose galleggiano: 0, 1 (la boa) o 2 (la boa e la tavola). |
WAIT | script.js | 1.1 | Quanto dura l'iscrizione nella demo, in secondi. |
Quando usarla
Per il piè di pagina di una scuola di surf, di uno stabilimento balneare, di un noleggio di tavole o di kayak, di un club velico, di una piscina, di un festival sulla spiaggia o di un marchio di costumi: ovunque il fondo della pagina possa essere il mare, e iscriversi meriti un'onda.
Sul telefono
Il piè di pagina prende la larghezza dello schermo: la newsletter va sopra, poi le colonne si impilano, due affiancate e la terza sotto, con righe più alte da toccare; il marchio, il copyright, l'orario e i link legali vanno uno sotto l'altro. Il mare resta alto uguale con meno molle, la tavola è un po' più corta e più a sinistra. Il dito trascinato di lato nell'acqua la smuove come il puntatore (su e giù scorre la pagina), un tocco è un sasso che cade, e toccando un link l'onda parte verso di lui e le lettere la cavalcano come con l'hover.
Con il movimento ridotto
Il mare è disegnato una volta sola, fermo, con le sue onde e i suoi riflessi, e compare in dissolvenza: niente onda di fondo, niente onde dal puntatore, dai link o dall'iscrizione, e la marea non si muove. La boa e la tavola stanno ferme sull'acqua. Puntando un link la parola cambia solo colore; il pulsante non si stringe e l'arco resta fermo; il campo sbagliato non trema.
Trappole
- Una spinta ferma sopra un link faceva solo una gobba che si divideva in due e scappava dalle due parti: la spinta corre verso il link alla velocità delle onde, così alimenta sempre la stessa cresta e l'onda arriva cresciuta proprio lì.
- L'onda lunga dell'iscrizione, con una spinta costante, all'inizio era invisibile e in fondo enorme (oltre 40 pixel): la spinta è più debole ma più forte nei primi istanti, così l'onda parte già intera e attraversa il piè di pagina con la stessa altezza.
- Con l'altezza tagliata ai limiti, una gola profonda fatta dal puntatore diventava un tratto piatto e la cresta più alta della marea tagliava il segnale della boa in cima al canvas: l'altezza si addolcisce con una tangente iperbolica, e verso l'alto si ferma lasciando posto al palo della boa.
- Dove l'acqua scendeva, sopra la superficie si vedeva il bordo dritto del blu del piè di pagina: il suo colore comincia 30 pixel sotto il livello calmo (--drop), più in basso della gola più profonda, e sopra c'è solo il canvas.
- La tavola e la boa, disegnate dietro l'acqua vicina che è un po' trasparente, sembravano affondate anche quando galleggiavano: si disegnano due volte, dietro l'acqua e poi di nuovo ritagliate sopra la superficie, così la parte asciutta è netta.
- Le lettere divise per l'onda sui link venivano lette una per una dai lettori di schermo: la parola intera sta in uno span nascosto agli occhi e le lettere in uno span con aria-hidden.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 19 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.
