Il pulsante che copia
Pulsanti, Testo, SVG, Fisica
NuovaGratis
Tutti i componenti
Il meteo della parola
Il meteo dei prossimi cinque giorni di un paese di montagna, nello stile minimal, dove la parola del tempo è il disegno: Rain gocciola (le lettere si allungano verso il basso, tornano su e lasciano cadere una goccia), Wind si piega col vento sull'asse dell'inclinazione di Roboto Flex e si stringe a ogni raffica, Clear si apre larga e leggera, Snow scende lettera per lettera e si posa, Fog perde contrasto e si sfoca. Sopra, la temperatura in cifre grandi e sottili che rotolano; sotto, i giorni come parole da scegliere. Ogni lettera è un piccolo corpo su molle.
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 weather in a word</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the next five days in a small fell village, and the word of the weather is the picture: Rain drips, Wind leans
and narrows in the gusts on the slant axis of Roboto Flex, Clear opens wide and light, Snow comes down letter by
letter and settles, Fog loses its contrast. Above it the temperature in large thin figures, under it the days
as words to choose -->
<section class="forecast" aria-label="Weather in Askerfell" data-forecast data-autoclic>
<span class="rule rule--top" aria-hidden="true" data-rule></span>
<header class="head" data-head>
<p class="head__place" data-place>Askerfell</p>
<p class="head__day"><span class="swap" data-when></span></p>
</header>
<p class="temp" aria-hidden="true"><span class="temp__slot" data-temp></span><span class="temp__deg" data-deg>°</span></p>
<div class="word" aria-hidden="true" data-word></div>
<p class="note" aria-hidden="true" data-note-line>
<span class="swap note__text" data-note></span>
<span class="swap note__low" data-low></span>
</p>
<span class="rule rule--mid" aria-hidden="true" data-rule></span>
<div class="days" role="radiogroup" aria-label="Day" data-days>
<span class="days__tick" aria-hidden="true" data-tick></span>
</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.
50 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 parola» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un widget largo 380 pixel e alto circa 410, senza una scheda intorno: due filetti sottili, in alto Askerfell e il giorno (Saturday), la temperatura in cifre grandi e sottilissime (11°) e sotto, grande, la parola del tempo in Roboto Flex: Rain, Wind, Clear, Snow o Fog. Più giù, in grigio, una frase (Showers until late afternoon) e la minima (Low 7°); in fondo i cinque giorni, Sat, Sun, Mon, Tue e Wed, ognuno con la sua massima. Il giorno scelto è bianco, più largo e più pieno, e sopra di lui pende dal filetto un trattino blu sottile. Scegliendo un giorno il trattino ci corre sopra come un bruco (prima la punta, poi la coda), il nome del giorno e la frase cambiano, la temperatura rotola verso l'alto se il giorno è più caldo e verso il basso se è più freddo, una cifra dopo l'altra, e la parola vecchia si assottiglia e svanisce. Arriva la nuova e fa il suo tempo. Rain compare e le sue lettere gocciolano una alla volta: la parte bassa della lettera scende come vernice bagnata, poi torna su con un piccolo rimbalzo e dal fondo si stacca una goccia blu che cade. Wind entra da sinistra stretta e inclinata, poi tre raffiche la attraversano da sinistra a destra: le lettere si piegano oltre il corsivo e si stringono, e nelle pause tornano quasi dritte. Clear si apre dal centro verso i lati fino quasi alla larghezza più grande del carattere, sottile e leggera, va appena oltre e torna. Snow scende lettera per lettera, in un ordine a caso, piano, dondolando e girando un poco; ogni lettera tocca la riga, si schiaccia di un niente, prende peso e le vicine sentono il colpo. Fog arriva nitida e bianca e perde contrasto: le lettere si fanno grigie e morbide una dopo l'altra, si allargano un poco, e da sinistra passa un banco più fitto. Passando col puntatore sulla parola, o toccandola, il suo tempo ricomincia.
Come funziona
Ogni lettera è un corpo su molle
Ogni lettera ha dodici canali: la larghezza, il peso e l'inclinazione del carattere, uno sbieco in più oltre l'asse, lo spostamento, la rotazione, lo schiacciamento in larghezza e in altezza, la goccia, il contrasto e la sfocatura. Ogni canale insegue il suo bersaglio con una molla (SPRING), integrata in passi di 1/120 di secondo con il tempo del fotogramma limitato a 1/30; il bersaglio è la posa del tempo più quello che aggiungono la raffica, il dondolio della neve, il banco di nebbia e la goccia, valori che GSAP porta avanti in timeline. Contrasto e sfocatura hanno la molla smorzata giusta, senza rimbalzi; la goccia una molla più rigida e più libera, come una cosa bagnata. Quando tutto è fermo il ciclo si toglie dal ticker di GSAP.
La pioggia: la lettera tagliata in tre
Ogni lettera contiene quattro copie del suo glifo: intera, e tre fette ritagliate con clip-path, quella sopra il taglio, una striscia alta un pixel e mezzo e quella sotto. Mentre gocciola la lettera intera si nasconde: la striscia si allunga con scaleY (1 più la goccia divisa per 1,5) e la fetta di sotto scende di quanto si è allungata, così i gambi della lettera colano in righe dritte. Il taglio sta fra 0,18 e 0,28 della grandezza sopra la linea di base (misurata una volta con un elemento alto zero), diverso per ogni lettera; le fette si sovrappongono di mezzo pixel perché non resti una riga chiara. Un tween tira giù la goccia con power2.in, come il peso; poi il bersaglio torna a zero, la molla la riporta su con un rimbalzo e dal fondo della lettera parte una goccia di due pixel che cade.
Il vento sull'asse dell'inclinazione
Roboto Flex ha l'asse slnt da 0 a -10 gradi. A riposo Wind sta a -6 con la larghezza a 86; ogni raffica è un numero da 0 a 1 per lettera, portato da GSAP con uno stagger di 0,08 secondi da sinistra, e a raffica piena porta l'inclinazione a -10, aggiunge uno sbieco fino a -12 gradi oltre l'asse, stringe la larghezza di 42 e spinge la lettera di 0,05 em. Tre raffiche di forza diversa e due pause: le molle danno a ogni lettera il suo piccolo ritardo e il suo assestamento.
Sereno, neve e nebbia
Clear apre la larghezza da 30 a 144 dal centro verso i lati (stagger from center): la molla va oltre, fino a 151, e torna. La grandezza della parola si calcola perché Clear a 151 riempia la riga: ogni parola si misura una volta a 100 pixel nella sua posa, e si rifà al cambio di misura. Snow parte 0,62 em più in alto e scende a velocità costante, così la molla si posa da sola all'arrivo; il dondolio è un seno che si spegne. Toccando la riga la lettera riceve un colpo sulle velocità dello schiacciamento, prende peso e le vicine un colpo più piccolo verso il basso. Fog porta il contrasto a FOG, la sfocatura all'1,6 per cento della grandezza e la larghezza a 124, lettera per lettera, poi un banco passa come un'onda.
Le cifre, i giorni e l'anteprima
La temperatura rotola cifra per cifra dentro una fessura ritagliata: le vecchie escono di tutta la loro altezza, le nuove entrano dall'altra parte solo dopo, e la larghezza della fessura si adatta con un back.out; il segno meno è il carattere vero (String.fromCharCode). I giorni sono un gruppo di scelte (frecce, Home e Fine, un solo giorno raggiungibile col tasto Tab). Il trattino ha due capi su due tween: corre prima quello davanti, l'altro lo segue; la sua lunghezza si misura su una copia nascosta del nome già nella posa larga, perché il nome si allarga con una transizione CSS. Un clic da script sul widget (l'anteprima della libreria) fa il giro della settimana, un giorno dopo l'altro col tempo che serve a ognuno, e torna a Saturday.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PLACE | script.js | 'Askerfell' | Il posto. |
DAYS | script.js | [['Saturday', 'Sat', 'rain', 11, 7, 'Showers until late afternoon'], …] | I giorni: il nome, il nome corto, il tempo (rain, wind, clear, snow, fog), la massima, la minima e la frase. |
WORDS | script.js | { rain: 'Rain', wind: 'Wind', clear: 'Clear', snow: 'Snow', fog: 'Fog' } | La parola di ogni tempo (per un'altra lingua: la grandezza si rifà da sola sulla parola più larga). |
SPRING | script.js | [210, 21] | La molla di ogni lettera: quanto è rigida e quanto è frenata. |
DRIP | script.js | 0.3 | Quanto cola una lettera della pioggia, in parti della grandezza della parola. |
GUST | script.js | 1 | Quanto soffia il vento sulle lettere (0, mai). |
SNOW_FALL | script.js | 1.8 | I secondi che una lettera della neve impiega a scendere. |
FOG | script.js | 0.34 | Quanto contrasto lascia la nebbia alla parola (da 0 a 1). |
MAX_SIZE | script.js | 104 | La grandezza massima della parola, in pixel. |
Quando usarla
Per il sito di un rifugio, di un albergo di montagna, di una località sciistica o di un campeggio, l'app di un paese o di un evento all'aperto, una dashboard che vuole un meteo che si legga al primo sguardo; e in generale dove una sola parola deve dire uno stato. Si cambiano i giorni, le parole (anche in un'altra lingua) e i colori nelle variabili.
Sul telefono
Il widget è largo quanto lo schermo meno 32 pixel (358 a 390) e la parola si rimpicciolisce da sola perché Clear, la più larga, stia nella riga; le animazioni sono le stesse. Un tocco sulla parola fa ricominciare il suo tempo (come il puntatore sul computer), un tocco su un giorno lo sceglie, e premendo il nome del giorno si stringe un poco.
Con il movimento ridotto
Niente molle e niente spostamenti: cambiando giorno la parola vecchia sfuma e la nuova compare in dissolvenza già nella sua posa (Wind stretta e inclinata, Clear larga e sottile, Fog grigia e morbida), la temperatura e le scritte cambiano in dissolvenza e il trattino sfuma e ricompare sul giorno nuovo. Il puntatore sulla parola non fa ripartire niente; all'apertura tutto compare in dissolvenza.
Trappole
- Fontsource carica di solito solo l'asse del peso (index.css): per l'inclinazione, la larghezza e la grandezza ottica di Roboto Flex serve full.css, che porta tutti gli assi.
- Con line-height 1 il glifo esce dal suo riquadro, e un clip-path inset con 0 in alto e ai lati lo tagliava: le fette hanno margini negativi di 0,4 em su tutti i lati tranne quello del taglio.
- Le tre fette lasciavano una riga sottile più scura proprio sul taglio, per l'antialiasing dei bordi a mezzo pixel: ora si sovrappongono di mezzo pixel.
- Nel rullo della temperatura la cifra vecchia e la nuova si vedevano insieme, una sopra l'altra: la nuova entra solo quando la vecchia è uscita di tutta la sua altezza.
- Con la larghezza di Clear a riposo a 151, in fondo all'asse, la molla non poteva andare oltre e l'apertura arrivava secca: la posa è a 144 e la grandezza della parola si calcola a 151, così il rimbalzo ha posto.
- Le lettere della neve, partendo dall'alto, sarebbero passate sopra le cifre: il riquadro della parola ha spazio sopra e sotto e taglia quello che ne esce.
- Con Wind già molto inclinata a riposo le raffiche quasi non si vedevano: a riposo sta a -6 senza sbieco, e la raffica la porta a -10 più 12 gradi di sbieco e la stringe.
- Il giorno scelto si allarga con una transizione CSS, e il trattino misurato subito veniva corto: si misura su una copia nascosta del nome già nella posa larga.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile, con gli assi della larghezza, del peso, dell'inclinazione e della grandezza ottica) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
