Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il titolo di ghiaccio che si scioglie
Un grande titolo liquido gela: la brina cresce dai bordi con cristalli ramificati e le lettere diventano blocchi di ghiaccio con riflessi e bolle d’aria. Poi sorge il sole, le lettere si arrotondano e colano, le gocce cadono con uno schizzo e fanno pozzanghere che riflettono il cielo; al tramonto l’acqua risale e il titolo si ricompone. Il puntatore scalda una lettera e la fa sciogliere prima.
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 ice title that melts</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">
<!-- the stage: the script measures the title, builds every letter (liquid, ice, frost, drops, puddle) and the sky -->
<svg class="palco" data-stage role="img" aria-label="Stay Cool" xmlns="http://www.w3.org/2000/svg"></svg>
<p class="nota" data-hint></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.
22 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 di ghiaccio che si scioglie» da Animorio e adattala al mio sitoCosa fa
Su un cielo blu di notte, sopra un bancone lucido che lo riflette, c’è il titolo di una gelateria inventata, Brina Gelato: «Stay Cool», in lettere liquide azzurre, lucide e un po’ molli, che ondeggiano piano. Da sinistra a destra le lettere gelano: dai bordi spuntano cristalli di brina ramificati come felci, il contorno si copre di una crosta granulosa, il liquido diventa ghiaccio chiaro e un po’ più gonfio, con lo smusso illuminato in alto, l’ombra in basso, due strisce di luce e qualche bolla d’aria rimasta dentro. Ogni lettera, finito di gelare, si irrigidisce con un piccolo scatto e manda un luccichio; poi un riflesso corre su tutto il titolo. Dopo un po’ sorge il sole dietro il bancone: il cielo si scalda fino all’albicocca, sul bancone compaiono una pozza di luce e la scia del sole. Le lettere si sciolgono una alla volta, in un ordine sparso: la brina si ritira, esce un filo di vapore, il ghiaccio torna acqua, gli spigoli si arrotondano, la lettera si affloscia e si allarga verso il basso. Sotto si gonfiano gocce che allungano il collo, si staccano, cadono allungandosi e finiscono sul bancone con un piccolo schizzo e un’onda; le gocce fanno una pozzanghera che si allarga con un tremolio, riflette il cielo e ha il luccichio del sole. L’ultimo pezzo cade tutto insieme. Quando il sole tramonta, da ogni pozzanghera sale una colonna d’acqua, la lettera si rialza con un rimbalzo elastico e la pozzanghera sparisce risucchiata: il titolo è di nuovo liquido e tutto ricomincia. Se si tiene il puntatore su una lettera gelata, la lettera si scalda (diventa arancione, la brina si accorcia, fuma) e si scioglie prima delle altre; su una lettera liquida la fa tremolare come una gelatina. Sul telefono basta toccarla.
Come funziona
Le lettere misurate sui pixel
Il palco è un SVG col viewBox grande quanto la finestra, quindi un’unità è un pixel. Ogni lettera è un text a sé, messo alla sua x con measureText sui pezzi di titolo (così resta la crenatura del carattere). Per sapere dove cresce la brina e da dove cadono le gocce, lo script disegna la lettera su una canvas e ne legge i pixel: i punti del bordo con la direzione che va verso fuori (la differenza di alfa fra un lato e l’altro), i punti interni lontani dal bordo per le bolle, e per ogni colonna il punto più basso, dove si appendono le gocce. Su uno schermo alto il titolo va su due righe, ognuna con il suo ripiano.
Un filtro che fa l’acqua
Ogni lettera ha un suo filtro, che tiene insieme la lettera, le gocce, la colonna e la pozzanghera: feDisplacementMap con un feTurbulence stretto in orizzontale (le colature), poi il classico «goo», un feGaussianBlur seguito da un feColorMatrix che alza il contrasto dell’alfa, così le forme vicine si fondono e gli spigoli si arrotondano; feComposite atop rimette sopra i colori nitidi. In fondo un feSpecularLighting sull’alfa sfocata dà la lucentezza del liquido. Lo sciogliersi è solo la sfocatura e lo spostamento che crescono, più una scala che schiaccia la lettera verso la linea di base.
Ghiaccio e brina
Il ghiaccio è una copia della lettera con un gradiente chiaro e un contorno dello stesso gradiente, che la fa gonfiare un poco. Sopra, ritagliati con un clipPath fatto dalla lettera, ci sono lo smusso (due contorni spostati in diagonale, uno bianco e uno scuro: spostati di più di mezzo spessore se ne vede un lato solo), le strisce di luce, il riflesso che corre e le bolle. La brina sta fuori dal filtro, così resta nitida: un contorno con un filtro di grana e una trentina di cristalli, ognuno un tracciato con lo stelo e i rami a sessanta gradi, che cresce dal bordo con scale e vector-effect non-scaling-stroke per lo spessore costante.
Gocce e pozzanghere
Una goccia è un’ellisse dentro il filtro della lettera: prima si gonfia sotto il punto più basso della colonna (che segue la lettera mentre si affloscia) e il filtro le fa il collo, poi si stacca e cade con power2.in, allungandosi. Quando tocca il bancone sparisce, saltano quattro o cinque goccioline con una parabola vera, si allarga un’onda e la pozzanghera cresce con elastic.out; il suo centro si sposta verso dove cadono le gocce. Sulla pozzanghera c’è un’ellisse col gradiente del cielo capovolto e il luccichio del sole. Al ritorno un rettangolo arrotondato sale dalla pozzanghera, la lettera si rialza con elastic.out e il rettangolo si ritira verso l’alto.
La regia e il calore
Il giro è una timeline con repeat -1 che chiama, a tempi sfalsati, freeze, melt e reform per ogni lettera, e muove il sole e i colori del cielo; ogni lettera ha la sua timeline, così il puntatore può farne sciogliere una prima delle altre senza rompere il giro. Lo stato di tutto (brina, ghiaccio, arrotondamento, afflosciamento, pozzanghera, calore) sta in numeri, e una sola funzione sul ticker di GSAP li scrive come attributi, solo quando cambiano. Il calore cresce mentre il puntatore resta su una lettera gelata; a uno si scioglie. Con il movimento ridotto restano solo dissolvenze.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TITLE | script.js | 'Stay Cool' | Il titolo che gela, si scioglie e si ricompone. Su uno schermo alto va su due righe, divise fra le parole. |
BRAND | script.js | 'Brina Gelato' | La riga piccola sopra il titolo (vuota = niente). |
FROST | script.js | 1 | Quanta brina cresce dai bordi: più cristalli e rami più lunghi (0 = niente brina). |
MELT_SPEED | script.js | 1 | La velocità con cui il sole scioglie le lettere: 2 è il doppio, 0.5 la metà. |
DRIPS | script.js | 1 | Quante gocce colano da ogni lettera mentre si scioglie (0 = cade tutta in una goccia sola). |
HOLD | script.js | 2 | Quanti secondi il titolo gelato resta in mostra prima che sorga il sole. |
Quando usarla
Per il titolo d’apertura di una gelateria, di un festival d’inverno, di una bevanda fresca, di un saldo di fine stagione o di qualsiasi cosa che parli di freddo e caldo; anche come intro di un video o di un post. Funziona meglio con titoli corti, di una o due parole.
Sul telefono
La stessa animazione con le misure adattate: su uno schermo alto il titolo va su due righe, la prima appoggiata su un ripiano di vetro, così le lettere restano grandi. Un tocco su una lettera gelata la scioglie subito.
Con il movimento ridotto
Niente si muove: la brina e il ghiaccio compaiono in dissolvenza, il sole appare in dissolvenza già in alto, ogni lettera svanisce mentre compare la sua pozzanghera, e al ritorno succede il contrario. Niente gocce, schizzi, vapore né ondeggiamenti.
Trappole
- Le forme del bordo si cercano sui pixel di una canvas: se il carattere non è ancora caricato si misurano quelle del carattere di riserva e la brina cresce nel vuoto. Lo script aspetta document.fonts.load prima di costruire.
- Il filtro «goo» fa sparire le forme più piccole della sua sfocatura: una goccia di raggio minore della sfocatura non supera la soglia dell’alfa. La sfocatura massima è il 4,8% dell’altezza delle lettere e le gocce sono almeno il 5,5%.
- Con feColorMatrix che alza il contrasto, la lettera diventa opaca anche se il ghiaccio è semitrasparente: la trasparenza del ghiaccio è finta, fatta con il gradiente e le bolle.
- Una goccia aggiunta alla stessa timeline che la stava facendo crescere, da una call, a volte non partiva perché la timeline era già finita: la caduta è un tween a parte, creato quando la crescita finisce.
- Il sole, appena sotto l’orizzonte, lasciava spuntare le punte dei raggi e l’alone: parte quasi tre raggi sotto e l’alone si accende con la sua salita.
- Il riflesso della prima riga, sul telefono, finiva dietro la seconda: si riflette solo l’ultima riga, sul bancone.
- Per far tornare il giro identico, cosa che serve a registrare il video completo, il caso ricomincia dallo stesso seme a ogni giro e l’ondeggiamento delle lettere segue il tempo della timeline, non l’orologio.
Librerie
GSAP 3.15.0, Familjen Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 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.
