Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Il titolo scritto sulla sabbia
Un grande titolo scritto con un dito nella sabbia, lettera per lettera, con il solco, il bordo rialzato e i granelli che saltano; poi arriva l’onda con la schiuma, lo cancella e lascia la sabbia bagnata, dove si scrive la frase dopo. Un clic chiama subito l’onda.
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 written in the sand</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 sand -->
<h1 class="leggibile" data-reader>Summer starts here. Saltwater Days, July 18 to 21</h1>
<!-- the beach: the sand, the grooves, the flying grains, the water and the foam are all painted on this canvas -->
<canvas class="spiaggia" data-beach aria-hidden="true"></canvas>
<p class="nota" data-hint>Click or tap to call the wave</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.
24 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 scritto sulla sabbia» da Animorio e adattala al mio sitoCosa fa
Una spiaggia vista dall’alto: sabbia chiara con la grana, le increspature lasciate dal vento e qualche pezzetto di conchiglia; in fondo il mare arriva e si ritira piano, con un filo di schiuma. Un dito che non si vede scrive nella sabbia il titolo di un festival estivo inventato, «Summer starts here»: ogni lettera segue il suo tracciato, tratto dopo tratto, come la scriverebbe una mano. Il solco si scava con la parete in ombra da una parte e quella in luce dall’altra, ai lati si alza un bordo di sabbia spinta via e davanti al dito si forma un mucchietto; a ogni tratto saltano granelli che volano, rimbalzano una volta e restano sparsi intorno. Sotto, più piccola e più veloce, la riga «Saltwater Days, July 18 to 21». Dopo un attimo arriva l’onda: corre su per la spiaggia con il bordo frastagliato, una fascia di schiuma e tante bolle, e davanti un velo d’acqua sottile che luccica. Passa sopra le parole e le liscia, poi si ritira: la schiuma si sfilaccia, le bolle restano sulla sabbia e scoppiano, e la sabbia rimane scura e bagnata, lucida per un momento come uno specchio. Nella sabbia bagnata il dito scrive la seconda frase, «See you at low tide», con la stessa riga sotto; arriva un’altra onda, la spiaggia si asciuga e tutto ricomincia. Un clic, mentre il dito scrive o la frase riposa, fa arrivare subito l’onda.
Come funziona
Un alfabeto da scrivere col dito
Le lettere non vengono da un carattere: sono un alfabeto a tratto unico disegnato per la demo, maiuscole, numeri e qualche segno, ognuno con i suoi tratti scritti come tracciati SVG (M, L, C) alti 100 unità. Ogni M è il dito che si alza, e l’ordine dei tratti è l’ordine della scrittura: la S in un tratto solo, la E dall’alto, la barra della A per ultima. Lo script appiattisce le curve in tanti punti e per ogni tratto tiene le lunghezze progressive, così sa dov’è il dito a ogni istante. Alcune coppie aperte (TA, LT, AV) si avvicinano un poco, come le scriverebbe una mano.
Il solco su una canvas
La sabbia è dipinta una volta sola su una canvas fuori schermo: macchie larghe più chiare e più scure, increspature come righe ondulate, decine di migliaia di granelli e qualche pezzetto di conchiglia. Il solco si ridisegna a ogni fotogramma in cui il dito si muove, in due canvas: una si stende sulla sabbia con il metodo multiply (l’ombra del bordo, la parete in ombra, il fondo) e una con screen (la luce sul bordo e sulla parete di fronte). Le pareti nascono dallo stesso tracciato disegnato più volte, spostato di una frazione della sua larghezza verso la luce o contro, e ritagliato dentro il solco con source-atop e source-in. Così il solco funziona sulla sabbia asciutta e su quella bagnata.
Il dito e i granelli
Ogni tratto è un tween GSAP sulla lunghezza già scritta, con una durata che dipende dalla lunghezza; fra un tratto e l’altro il dito si alza e si sposta, con una pausa proporzionale alla distanza. A ogni passo nascono granelli ai due lati del solco, con una spinta di lato, un po’ in avanti e verso l’alto: una gravità li riporta giù, rimbalzano una volta e, quando si fermano, vengono stampati su una canvas dei detriti. In volo hanno un’ombra che si allontana con l’altezza.
L’onda
Il bordo dell’acqua è una riga di punti: l’altezza dell’onda, che GSAP fa salire con power2.out e scendere con power1.in, più tre sinusoidi lente che fanno i lobi, più ampi quando l’acqua si ritira. Sotto c’è l’acqua, con un gradiente che parte quasi trasparente e diventa più profondo, e qualche riflesso che ondeggia; davanti un filo di luce, il velo d’acqua; dietro due nastri di schiuma che si gonfiano e si assottigliano lungo la riva e centinaia di bolle, piene o ad anello. L’acqua cancella mentre passa: a ogni fotogramma la sua sagoma toglie un po’ di solco e di detriti con destination-out, quindi un’onda debole lascia le parole appena visibili.
La sabbia bagnata e il giro
Per ogni colonna lo script ricorda il punto più alto raggiunto dall’acqua: sotto quella riga la sabbia è la versione bagnata (la stessa texture moltiplicata per un colore più scuro), con un velo di cielo che luccica e poi si asciuga, e una riga più scura dove l’onda si è fermata. La frase dopo si scrive lì sopra. Alla fine la spiaggia si asciuga, il mare si calma e il giro riparte dallo stesso seme casuale, quindi ogni giro è identico. Un clic ferma il dito dov’è e chiama l’onda. Con il movimento ridotto le parole compaiono e spariscono in dissolvenza e la sabbia si scurisce senza onda.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TITLE | script.js | ['Summer starts here', 'See you at low tide'] | Le frasi scritte nella sabbia, una dopo l’altra: ogni onda cancella la frase e il dito scrive la seguente. Si possono mettere lettere, numeri e i segni . , ' ! ? : - / &. |
SUBTITLE | script.js | 'Saltwater Days, July 18 to 21' | La riga più piccola scritta sotto il titolo (vuota = niente riga). |
WRITE_SPEED | script.js | 1 | La velocità del dito: 2 scrive il doppio più in fretta, 0.5 la metà. |
WAVE | script.js | 1 | La forza dell’onda: quanto sale, quanta schiuma porta e quanto bene cancella (con 0.4 le parole restano appena visibili sotto la frase nuova). |
GRAINS | script.js | 1 | Quanti granelli di sabbia saltano fuori dal solco mentre il dito scrive (0 = nessuno). |
REST | script.js | 2.4 | Quanti secondi la frase finita resta in mostra prima che arrivi l’onda. |
Quando usarla
Per aprire la pagina di un posto di mare, di un hotel o di un lido, di un festival estivo, di una crema solare o di una collezione da spiaggia; per un messaggio che deve sparire e tornare, come un saluto, una data o una promessa; per un post o una storia d’estate.
Sul telefono
La stessa animazione con le misure adattate: il titolo va a capo su due o tre righe per restare grande, la riga sotto su una o due, solchi, granelli, schiuma e bolle si rimpiccioliscono con lo schermo. Un tocco chiama l’onda.
Con il movimento ridotto
Niente si muove: il mare in fondo resta fermo, le parole compaiono già scritte in dissolvenza, poi spariscono in dissolvenza mentre la sabbia si scurisce come bagnata, e compare la frase dopo; alla fine la sabbia torna asciutta.
Trappole
- Disegnare il solco un pezzo alla volta, aggiungendo solo il tratto nuovo, lasciava una riga chiara a ogni giunta: il bordo del pezzo nuovo copriva il fondo del pezzo prima. Il solco si ridisegna intero, da un tracciato solo, ogni volta che il dito si muove.
- Con colori opachi il solco andava bene sulla sabbia asciutta e diventava una macchia chiara su quella bagnata: le ombre sono moltiplicate e le luci sommate in screen, così si adattano alla sabbia che c’è sotto.
- La luce del bordo, larga più del solco, finiva anche dentro il solco e lo appiattiva: dopo averla stesa si toglie la sagoma del solco con destination-out e solo dopo si aggiunge la parete in luce.
- Per cancellare con l’onda non si può ridisegnare il solco (tornerebbe intero): durante l’onda il solco non si ridisegna più e l’acqua toglie un po’ di quello che c’è. Quando arriva la frase nuova, quello che resta della vecchia si copia a parte e si disegna sotto.
- Il clic durante la scrittura deve fermare il dito, non finire la frase: per questo la storia non è una timeline sola con le etichette (saltare all’onda completerebbe tutti i tween prima) ma una fase alla volta, e il clic uccide quella in corso.
- Il video della scheda si ferma quando la demo torna uguale: il caso usa un seme che si azzera a ogni giro, e alla fine del giro il mare si calma prima di ripartire, così il primo fotogramma del giro nuovo è identico a quello del primo.
- Una regex con i caratteri degli accenti scritti a mano si trasformava nei caratteri veri: il campo si costruisce con String.fromCharCode.
Librerie
GSAP 3.15.0, Familjen Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 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.
