Progetti in fila con l'anello
Scroll, Immagini, Testo
NuovaGratis
Torna alla libreria
Il titolo sullo specchio appannato
Uno specchio del bagno si appanna col vapore che sale e un dito invisibile ci scrive il titolo: il tratto pulisce il vetro e mostra nitida la stanza riflessa, ai bordi si formano goccioline e le più grosse colano lasciando righe. Poi la condensa torna e cancella tutto. Il puntatore sopra lo specchio pulisce un alone.
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 title on the steamy mirror</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/familjen-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena" data-scene>
<!-- the title, for screen readers: the script keeps it in step with the phrase written in the steam -->
<h1 class="leggibile" data-reader>Breathe in. Fogline bath rituals</h1>
<!-- the bathroom: the tiles, the mirror, the room it reflects, the steam, the writing and the drops are all painted on this canvas -->
<canvas class="bagno" data-bath aria-hidden="true"></canvas>
<p class="nota" data-hint><span class="nota__mouse">Move over the mirror to wipe it</span><span class="nota__dito">Touch the mirror to wipe it</span></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.
34 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 titolo sullo specchio appannato» da Animorio e adattala al mio sitoCosa fa
Una parete di piastrelle smaltate color salvia, ognuna di un tono un po’ diverso e col suo riflesso; al centro uno specchio ad arco con la cornice d’ottone e sotto una mensola di marmo con i flaconi di un marchio di cosmetici inventato, Fogline. Nello specchio si vede la stanza alle nostre spalle: un muro d’argilla con una nicchia (asciugamani piegati, una candela, un vaso), una lampada a sospensione accesa, una scala di legno con un asciugamano, una vasca bianca e una pianta. Dal basso sale il vapore in sbuffi morbidi e lo specchio si appanna dal fondo verso l’alto, con un bordo ondulato: la stanza diventa sfocata e lattiginosa, coperta di goccioline minuscole. Poi un dito che non si vede scrive nella condensa «Breathe in», lettera per lettera, e sotto, più piccolo e più svelto, «Fogline bath rituals»: dove passa, il vetro torna pulito e dietro le lettere la stanza si vede nitida. Lungo i bordi del tratto si raccolgono gocce d’acqua; le più pesanti, dopo un po’, colano giù a scatti, si fermano, ripartono, si mangiano le gocce che incontrano e lasciano dietro di sé una riga pulita e qualche goccina. La condensa torna piano: prima a chiazze, poi con un velo di goccioline, e le parole spariscono. Il dito scrive la seconda frase, «Glow slowly», che si appanna anche lei; il vapore si ferma, lo specchio si schiarisce dall’alto in basso e tutto ricomincia. Passando col puntatore (o col dito, sul telefono) sullo specchio si pulisce un alone morbido, che poi si riappanna dal bordo verso il centro.
Come funziona
Due stanze: nitida e appannata
La stanza riflessa si disegna una volta sola su una canvas grande quanto il vetro: muro, nicchia, lampada, scala, vasca, pianta. Da quella nasce la versione appannata: la stessa immagine rimpicciolita di 14 volte e poi ingrandita di nuovo (una sfocatura che funziona in tutti i browser, anche dove ctx.filter non c’è), con sopra un velo lattiginoso più fitto in basso e migliaia di goccioline minuscole, ognuna un puntino d’ombra con un puntino di luce sopra. A ogni fotogramma si disegna la stanza nitida e sopra quella appannata, ritagliata da una maschera.
La maschera della condensa
La maschera dice dove c’è condensa. Il bordo che sale è una texture piccola (un ottavo della grandezza), opaca sotto e trasparente sopra con una sfumatura ondulata: ingrandita diventa morbida e si sposta in alto con un tween. Poi con destination-out si tolgono la canvas dei tratti puliti dal dito, i cerchi delle gocce (acqua limpida: mostrano la stanza nitida) e l’alone del puntatore. Infine la versione appannata si ritaglia con destination-in sulla maschera.
Il dito e le gocce
Le lettere sono un alfabeto a tratto unico: ogni lettera è il percorso che farebbe un dito, con un po’ di mano (ogni lettera un filo inclinata, alzata o abbassata, la riga che pende in avanti). Un tween porta la distanza percorsa da zero alla lunghezza di tutti i tratti, con le pause fra un tratto e l’altro; a ogni aggiornamento si disegna in bianco il pezzo nuovo sulla canvas dei tratti e ai due lati nascono le gocce. Le più pesanti, dopo un’attesa, scendono a scatti: corrono, si incagliano, ripartono, si mangiano le gocce che toccano e lasciano una riga pulita sulla stessa canvas.
La condensa che torna e l’alone
Per cancellare non si ridisegna niente: un tween porta la condensa da zero a uno sopra i tratti, mentre una texture a chiazze toglie un po’ di tratto a ogni fotogramma, così il vapore rientra a macchie. Nel frattempo dentro i tratti ricompaiono prima le goccioline minuscole, poi il velo. L’alone del puntatore è una griglia di numeri (una cella ogni 9 pixel): il puntatore li alza con una sfumatura morbida, il tempo li riabbassa, e la griglia diventa una piccola immagine ingrandita sulla maschera.
La regia
Tutto il giro è una timeline sola con repeat: -1: il vapore che sale e lo specchio che si appanna, una frase scritta, il riposo con le gocce che colano, la condensa che torna, la frase dopo, poi lo specchio che si schiarisce. I tween muovono solo numeri (vapore, altezza della condensa, quanto è appannato, quanto è tornata la condensa); il disegno lo fa gsap.ticker, così il banco può rallentare e fermare tutto. Le frasi, la riga sotto, la velocità del dito, lo spessore della condensa, le gocce e l’alone sono valori in cima allo script.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TITLE | script.js | ['Breathe in', 'Glow slowly'] | Le frasi scritte nella condensa, una dopo l’altra. Le lettere sono maiuscole a tratto unico; le parole lunghe vanno a capo da sole. |
SUBTITLE | script.js | 'Fogline bath rituals' | La riga più piccola scritta sotto ogni frase (vuota = niente riga). |
WRITE_SPEED | script.js | 1 | La velocità del dito: 2 è il doppio, 0.5 la metà. |
FOG | script.js | 1 | Quanto è fitta la condensa: 0.5 è un velo leggero che lascia vedere la stanza, 1 la nasconde quasi tutta. |
DROPS | script.js | 1 | Quante gocce si formano ai bordi dei tratti e quante colano giù (0 = un tratto pulito, senza gocce). |
HALO | script.js | 1 | Quanto è grande l’alone pulito dal puntatore (0 = il puntatore non pulisce). |
REST | script.js | 2.6 | Quanti secondi la frase scritta resta prima che la condensa torni a coprirla. |
Quando usarla
Per l’apertura del sito di una spa, di un hammam, di un marchio di cosmetici o di prodotti per il bagno, per una pagina di benvenuto o un messaggio che deve sembrare scritto a mano e passeggero. Funziona con frasi brevi: due o tre parole si leggono meglio.
Sul telefono
La stessa animazione con le misure adattate: lo specchio è più stretto e più alto, il titolo va a capo, le gocce e il dito restano in proporzione. Il dito sullo schermo pulisce l’alone come il puntatore.
Con il movimento ridotto
Niente si muove: niente vapore che sale, la condensa compare in dissolvenza, la frase compare già scritta in dissolvenza con le sue gocce ferme, poi la condensa torna in dissolvenza e la copre; alla fine lo specchio si schiarisce in dissolvenza.
Trappole
- Dietro le lettere c’era una finestra luminosa: pulita, la stanza era chiara quanto la condensa e mezze lettere sparivano. La stanza riflessa deve stare qualche tono sotto il velo dove si scrive: muro d’argilla, nicchia scura, finestra tolta.
- Riempire la condensa sommando un velo leggero a ogni fotogramma si ferma prima del pieno (con 8 bit, l’aggiunta diventa zero e resta un alone chiaro). La condensa non si accumula: la maschera si ridisegna intera a ogni fotogramma da pochi numeri, e solo i tratti puliti stanno su una canvas che si cancella da sola.
- Con troppe gocce pesanti il titolo sembrava sanguinare come in un film dell’orrore: colano solo due gocce su cento, e partono in tempi diversi.
- Il video del catalogo si ferma quando non c’è più niente in programma: con una storia fatta di timeline che si passano il testimone il giro non finiva mai. Una timeline sola con repeat: -1 dice al banco quanto dura un giro intero.
- Il bordo della condensa disegnato a piena grandezza veniva netto come un righello: la texture è piccola e ingrandita, e la sfumatura colonna per colonna fa le onde.
Librerie
GSAP 3.15.0, Familjen Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 18 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 11 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.
