La parola dietro il vetro cannettato
WebGL, Testo, Hover
NuovaGratis
Torna alla libreria
La parola nel miraggio
Nello stile minimal, per una casa nel deserto inventata: il nome «Calima» sta su un orizzonte sottile e sotto la riga c’è il suo miraggio, la stessa parola capovolta e schiacciata nel blu di un’acqua che non c’è. All’inizio l’aria è calda e le lettere salgono tremando; poi si calma e tutto sta fermo. Il puntatore riporta il caldo dove passa: l’aria vibra vicino a terra, il miraggio si rompe, poi si posa di nuovo.
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 word in the mirage</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>
<!-- the name of a made-up house in the desert stands on a thin horizon, and under the line hangs its mirage: the
same word upside down, in the blue of water that is not there. The pointer brings the heat: the air shivers,
the mirage breaks up, then the air calms down and everything stands still. The script draws on the canvas -->
<main class="stage" data-stage>
<canvas class="canvas" data-canvas aria-hidden="true"></canvas>
<h1 class="sr" data-sr>Calima</h1>
<p class="caption" data-caption>A house at the edge of the dunes</p>
<p class="hint" data-hint>Move to bring the heat</p>
</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.
14 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 «La parola nel miraggio» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo un orizzonte sottile si disegna dal centro verso i due bordi. Sopra la riga le lettere di «Calima», larghe e pesanti, compaiono una dopo l’altra dentro un’aria calda che le fa tremare: prendono peso mentre salgono, e sotto la riga nasce il loro miraggio, la parola capovolta, più bassa, nel blu dell’acqua che il caldo fa vedere sulla strada. L’aria vibra di più vicino a terra e il miraggio si rompe in onde; poi il caldo cala piano, le lettere si fermano e il riflesso diventa nitido, come uno specchio d’acqua ferma. Sotto, una riga piccola dice cos’è il posto. Passando il puntatore l’aria si scalda dove passa la mano, tanto più quanto la mano corre: le lettere vicine tremano alla base e il miraggio sotto di loro si spezza; fermando la mano il caldo si spegne in poco più di un secondo e tutto torna fermo.
Come funziona
La parola su un canvas
La parola si disegna una volta su un canvas 2D grande come la pagina, bianca su nero e appoggiata con la linea di base sull’orizzonte; lo shader legge l’inchiostro nel canale rosso. Ogni lettera ha la sua comparsa e il suo peso (Archivo largo, da 200 a WEIGHT), e il canvas si ridisegna solo mentre cambiano.
L’aria calda
Lo shader sposta il punto in cui legge la parola con tre onde lente che salgono e si mescolano (seni di y meno il tempo, piegati da un seno di x). Lo spostamento è SHIMMER pixel per il caldo del punto, e sopra la riga si spegne salendo con exp(d / 0,55 maiuscole): l’aria trema soprattutto vicino a terra, come sull’asfalto d’estate.
Il miraggio
Sotto la riga lo shader legge la parola allo specchio, a un’altezza SQUASH volte più su (il miraggio è più basso della parola), con onde più forti e un po’ di allungamento quando fa caldo. Si spegne scendendo e col caldo, e prende il colore dell’accento: il blu dell’acqua che non c’è.
Il caldo della mano
Il caldo è la somma di un caldo di tutta la pagina e di quello della mano, una campana larga un quinto della pagina intorno al puntatore. La mano lo alza in proporzione alla strada che fa (HEAT); ogni fotogramma il caldo si moltiplica per exp(−dt / COOL). Quando tutti e due arrivano a zero il disegno si ferma: niente si ridisegna finché la mano non torna.
L’apertura
Una timeline GSAP disegna l’orizzonte dal centro con un power3.inOut, porta il caldo a 1,6 e lo fa scendere mentre le lettere compaiono sfalsate di 0,11 s prendendo peso, accende la didascalia e alla fine porta il caldo a zero in 3,4 s: anche la calma fa parte della regia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Calima' | La parola sull’orizzonte. |
HEAT | script.js | 1 | Quanto la mano scalda l’aria: 0 niente, 2 molto. |
SHIMMER | script.js | 9 | Di quanti pixel l’aria calda piega le lettere. |
COOL | script.js | 1.4 | I secondi in cui il caldo cala di due terzi. |
MIRAGE | script.js | 0.8 | Quanto è forte il miraggio sotto la riga: 0 niente, 1 scuro come la parola. |
SQUASH | script.js | 1.5 | Quanto è schiacciato il miraggio: 1 alto come la parola, 3 molto basso. |
HORIZON | script.js | 0.5 | L’altezza dell’orizzonte, in parti della pagina dall’alto. |
WEIGHT | script.js | 720 | Il peso della parola, da 100 a 900. |
Quando usarla
Per l’apertura del sito di un hotel o di una casa vacanze nel deserto, al mare o in un posto caldo, di un festival d’estate o di un marchio di creme solari e di occhiali da sole: il nome resta fermo e leggibile, e il caldo arriva solo con la mano.
Sul telefono
La stessa parola, larga quasi tutto lo schermo; il dito trascinato sulla pagina scalda l’aria dove passa, come il puntatore. Il suggerimento dice «Drag» invece di «Move».
Con il movimento ridotto
L’aria è ferma: l’orizzonte, la parola e il suo riflesso nitido compaiono in dissolvenza e il puntatore non scalda niente.
Trappole
- Il caldo che si spegneva da solo nel ciclo di ogni fotogramma non era in nessuna timeline: il video dell’anteprima si fermava appena finite le lettere, con l’aria ancora mossa. Ora la calma dell’apertura è un tween GSAP che porta il caldo a zero.
- Alla prima prova il caldo della mano faceva tremare le lettere appena, e passando il puntatore sembrava che non succedesse niente: l’aria piega di 9 pixel invece di 7 e la mano scalda di più, fino a 1,4 volte il caldo dell’apertura.
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
