Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il piè di pagina scritto in cielo
Il piè di pagina di una piccola agenzia di viaggi, tutto cielo: in alto cinque aeroplanini in formazione scrivono il nome dell'agenzia a sbuffi di fumo, una riga di puntini a testa, come si fa davvero nello skytyping. Gli sbuffi si gonfiano e si fondono in lettere di nuvola, ombreggiate dal lato opposto al sole, e il vento le porta piano; il puntatore soffia via il fumo e lo arriccia, un clic è una folata, e quando la scritta è sfatta la formazione torna a riscriverla. Su ogni link passa un aeroplanino minuscolo che solleva le lettere, e l'iscrizione fa scrivere in cielo il grazie.
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 skywritten footer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the footer of a small travel agency, all sky: along its top a formation of five little planes flies across
and skytypes the agency's name in puffs of smoke, one row of the letters for each plane. The smoke billows,
drifts on the wind and can be blown about with the pointer; a click is a gust. A link pointed at has a tiny
plane fly over it, its letters lifted in its wake, and signing up to the fare letter calls the formation
back to write thank you -->
<footer class="fw" data-footer data-autoclic>
<canvas class="fw__sky" aria-hidden="true" data-sky></canvas>
<div class="fw__top">
<form class="fw__form" action="#" novalidate aria-labelledby="fw-news" data-form>
<h2 class="fw__title" id="fw-news" data-in>The Friday fare drop</h2>
<p class="fw__lede" data-in>Empty seats, quiet seasons and the small-group trips with places left.</p>
<label class="sr" for="fw-email">Email address</label>
<div class="fw__field" data-field data-in>
<input class="fw__input" id="fw-email" name="email" type="email" inputmode="email" autocomplete="email" autocapitalize="off" spellcheck="false" enterkeyhint="send" placeholder="you@example.com" aria-describedby="fw-note" aria-invalid="false" data-input>
<button class="fw__send" type="submit" data-send>
<span class="fw__send-bg"></span>
<span class="fw__send-label" data-send-label>Subscribe</span>
<svg class="fw__spin" viewBox="0 0 24 24" aria-hidden="true" data-spin><circle cx="12" cy="12" r="8"/></svg>
<svg class="fw__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="fw__note" id="fw-note" aria-live="polite" data-note data-in><span class="fw__line">Fridays only. Leave with one click.</span></p>
</form>
<nav class="fw__cols" aria-label="Footer">
<div class="fw__col" data-in>
<h3 class="fw__head">Destinations</h3>
<ul>
<li><a class="fw__link" href="#" data-link>Lisbon</a></li>
<li><a class="fw__link" href="#" data-link>Kyoto</a></li>
<li><a class="fw__link" href="#" data-link>Oaxaca</a></li>
<li><a class="fw__link" href="#" data-link>Lofoten</a></li>
</ul>
</div>
<div class="fw__col" data-in>
<h3 class="fw__head">Trips</h3>
<ul>
<li><a class="fw__link" href="#" data-link>Small groups</a></li>
<li><a class="fw__link" href="#" data-link>By rail</a></li>
<li><a class="fw__link" href="#" data-link>Gift a trip</a></li>
<li><a class="fw__link" href="#" data-link>Travel journal</a></li>
</ul>
</div>
<div class="fw__col" data-in>
<h3 class="fw__head">Agency</h3>
<ul>
<li><a class="fw__link" href="#" data-link>Our guides</a></li>
<li><a class="fw__link" href="#" data-link>Visas and insurance</a></li>
<li><a class="fw__link" href="#" data-link>Careers</a></li>
<li><a class="fw__link" href="#" data-link>Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="fw__base" data-in>
<p class="fw__brand">
<svg class="fw__mark" viewBox="0 0 30 14" aria-hidden="true"><path d="M29 7.2c0-2.2-1.6-3-4-3l-4.6.1L6 5.8 2.8 1.2C2.4.6 1.2.6 1 1.6l.8 6.7c.1.6.5.9 1.1 1l4.2.6-2.4 3.1h2.4l4.6-2.6 7.6.6c2.6 0 4-.6 6.2-1.4C27.8 9.1 29 8.6 29 7.2z"/></svg>
<span class="fw__name">Faraway Travel</span>
<span class="fw__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 Faraway Travel Ltd</span>
<span class="fw__hours">Desk open Monday to Saturday, 9:00 to 18:30</span>
</p>
<nav class="fw__legal" aria-label="Legal">
<a class="fw__link fw__link--small" href="#" data-link>Privacy</a>
<a class="fw__link fw__link--small" href="#" data-link>Terms</a>
<a class="fw__link fw__link--small" href="#" data-link>Cookies</a>
</nav>
</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 scritto in cielo» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un piè di pagina largo 1100 pixel e alto circa 410, con gli angoli tondi, tutto di cielo: azzurro intenso in alto, blu profondo in fondo, con la luce calda del sole appena fuori dall'angolo in alto a destra. È di Faraway Travel, un'agenzia di viaggi inventata. In basso a sinistra c'è l'iscrizione alla lettera del venerdì con le tariffe (The Friday fare drop, 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 (Destinations, Trips, Agency) e in fondo, dopo un filo, il marchio con l'aeroplanino disegnato, il copyright, l'orario dello sportello e i link legali. In alto c'è una fascia di cielo aperto, disegnata su un canvas. Appena il piè di pagina si vede arrivano da sinistra cinque aeroplanini rossi a strisce chiare, in formazione a punta di freccia, ognuno con l'elica che frulla e un piccolo dondolio, e scrivono FARAWAY come nello skytyping vero: ogni lettera è una griglia di puntini alta cinque, ogni aereo vola una riga e a ogni puntino della sua riga la coda lascia uno sbuffo di fumo. Gli sbuffi nascono piccoli e si gonfiano in un attimo fino a toccarsi, e le lettere a puntini diventano lettere di nuvola, bianche dove le prende il sole e azzurrine sotto. Poi il vento le porta piano verso destra, con una turbolenza lenta che le fa respirare. Il puntatore che passa nel cielo si porta dietro il fumo e lo arriccia dalle due parti, come una mano nel vapore; un clic o un tocco è una folata che apre un buco nella scritta. Dopo qualche secondo, o prima se la scritta è stata sfatta, il vento se la prende: gli sbuffi si allargano, si fanno radi e svaniscono, e la formazione torna da sinistra a riscriverla. Puntando un link, o arrivandoci col tasto Tab, un aeroplanino minuscolo color sole ci vola sopra salendo da sinistra a destra, e ogni lettera, quando le passa sopra, si solleva inclinata come un aereo che decolla e riatterra con un piccolo rimbalzo. L'iscrizione ha i suoi stati: un indirizzo sbagliato fa tremare il campo, che diventa color corallo e dice cosa non va; uno giusto fa sparire la parola del pulsante, che si stringe in un cerchio con l'arco che gira e poi diventa una spunta, la riga sotto ringrazia, e la formazione torna subito a scrivere THANKS sopra il fumo vecchio, che il vento porta via. Scrivendo un altro indirizzo il pulsante torna com'era.
Come funziona
Le lettere a puntini
Ogni lettera è una griglia alta cinque puntini e larga da tre a cinque, scritta come righe di testo ('.##.', '#..#'…). La parola diventa cinque elenchi di colonne, uno per riga, con una colonna vuota fra le lettere. La misura del puntino viene dalla parola più lunga fra NAME e THANKS, così le due scritte hanno lo stesso passo e stanno sempre dentro il cielo, anche sul telefono.
La formazione che scrive
Un tween di GSAP senza accelerazione porta la formazione da un lato all'altro a SPEED pixel al secondo; ogni aereo vola la sua riga, un po' più indietro quanto più è esterno, a punta di freccia. A ogni aggiornamento, per ogni riga, finché la coda dell'aereo ha superato la colonna del prossimo puntino, nascono PUFFS sbuffi lì, con un piccolo scarto a caso e già invecchiati del tempo in cui la coda è andata oltre: così le lettere restano dritte anche se un fotogramma salta.
Gli sbuffi
Ogni sbuffo è un punto con velocità, età e misura: il raggio cresce come 1 - e^(-età/0,42) e si fonde coi vicini. Si disegnano con due immagini sfumate preparate una volta sola e stampate con drawImage: prima tutte le ombre, spostate in basso a sinistra, poi tutte le luci, così gli sbuffi diventano una nuvola sola, chiara verso il sole. La velocità tende al vento più una turbolenza di onde che si incrociano, uguale per gli sbuffi vicini, quindi la scritta si deforma piano invece di sgranarsi.
La mano nel fumo
Il puntatore porta gli sbuffi vicini verso una parte della sua velocità, mai oltre, con un peso a campana, più una spinta di lato che gira attorno alla sua strada e arriccia il fumo; un clic spinge in fuori quelli intorno. Un pavimento morbido rimanda in su il fumo che scende verso i link. Quanto la scritta è stata smossa si accumula: oltre una soglia il vento se la prende prima, così la formazione torna a riscriverla.
Il vento che se la prende
Dopo LINGER secondi una chiamata di GSAP lascia andare la scritta: in FADE secondi gli sbuffi si allargano di più di un puntino, la turbolenza e il vento crescono, il fumo sale un poco e la trasparenza scende con una curva morbida. Quando il cielo è vuoto parte una nuova passata; l'iscrizione la chiama subito con THANKS. Il ciclo di disegno gira solo mentre c'è fumo o un aereo, si ferma fuori dallo schermo e il passo è al massimo 1/30 di secondo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'FARAWAY' | La parola che gli aerei scrivono in cielo: lettere dalla A alla Z e spazi, fino a otto lettere perché resti grande. |
THANKS | script.js | 'THANKS' | La parola che tornano a scrivere quando qualcuno si iscrive. |
CELL | script.js | 19 | Quanto sono distanti i puntini di una lettera sul computer, in pixel: sul telefono meno, perché la parola più lunga entri. |
SPEED | script.js | 380 | Quanto corre la formazione, in pixel al secondo. |
WIND | script.js | 8 | Quanto il vento porta il fumo verso destra, in pixel al secondo (sotto zero verso sinistra). |
LINGER | script.js | 9 | Quanti secondi la scritta resta in cielo prima che il vento se la prenda e gli aerei la riscrivano. |
STIR | script.js | 1 | Quanto il puntatore smuove il fumo passandoci dentro: a 0 non lo tocca. |
PUFFS | script.js | 3 | Quanti sbuffi fanno ogni puntino di una lettera: di più fa lettere più piene e più nuvolose. |
WAIT | script.js | 1.1 | Quanto dura l'iscrizione nella demo, in secondi. |
Quando usarla
Per il piè di pagina di un'agenzia di viaggi, di una compagnia aerea piccola, di un aeroclub, di una scuola di volo o di paracadutismo, di un festival all'aperto o di un evento estivo: ovunque il fondo della pagina possa essere un cielo, e il nome del marchio meriti di essere scritto lassù.
Sul telefono
Il piè di pagina prende la larghezza dello schermo e la fascia di cielo si abbassa: la parola si fa più piccola (i puntini scendono a circa 10 pixel) perché la più lunga entri, e gli aerei si accorciano con lei. 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 dito trascinato di lato nel cielo smuove il fumo come il puntatore (su e giù scorre la pagina), un tocco è una folata, e toccando un link l'aeroplanino ci vola sopra come con l'hover.
Con il movimento ridotto
Niente aerei e niente vento: la scritta compare già fatta, ferma e in dissolvenza, al centro del cielo, e il puntatore non la smuove. All'iscrizione FARAWAY sfuma e al suo posto sfuma dentro THANKS, che dopo qualche secondo torna FARAWAY allo stesso modo. Puntando un link la parola cambia solo colore e l'aeroplanino non vola; il pulsante non si stringe, l'arco resta fermo e il campo sbagliato non trema.
Trappole
- Con una turbolenza diversa per ogni sbuffo le lettere si sgranavano in pochi secondi e non si leggevano più: la turbolenza dipende solo dalla posizione e dal tempo, così gli sbuffi vicini si muovono insieme e la scritta si deforma piano; il caso entra solo mentre il vento se la porta via.
- Il puntatore che aggiungeva la sua velocità agli sbuffi li lanciava via tutti e la scritta finiva sopra i link: ora ogni sbuffo tende solo a una parte della velocità della mano, senza mai superarla, e un pavimento morbido sotto la fascia di cielo rimanda su il fumo che scende.
- Una scritta sfatta dal puntatore restava illeggibile per tutti i secondi di LINGER: quanto è stata smossa si accumula e oltre una soglia il vento se la prende prima, più in fretta, e la formazione torna a riscriverla.
- Spostando la parola un po' a sinistra perché il vento la porti attraverso il centro, sul telefono la F usciva dal bordo: lo spostamento si ferma allo spazio che resta ai lati.
- Gli sbuffi grandi la metà del passo restavano puntini staccati: con il raggio a circa tre quarti del passo si toccano e le lettere diventano nuvole, ma solo dopo un attimo, così si vede ancora come sono nate.
- Le lettere divise per il decollo sui link venivano lette una per una dai lettori di schermo, e l'anteprima che cercava un link per nome non lo trovava più: la parola intera sta in uno span nascosto agli occhi e il nome resta in data-word.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
