Il tubo catodico
WebGL, Testo, Transizioni
Gratis
Torna alla libreria
La parola che cresce come un corallo
Animazione WebGL nello stile minimal: una parola grande che nessuno scrive, cresce. Uno shader fa girare una reazione-diffusione (il modello di Gray-Scott, quello dei coralli e delle impronte digitali) e il disegno può vivere solo dentro le lettere: da pochi semi d'inchiostro nasce un labirinto che riempie la parola, col bordo che cresce in vermiglio, mentre la parola prende peso. Il puntatore pianta semi nuovi.
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>Lichen</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>
<!-- a word that grows like coral: a reaction-diffusion simulation (Gray-Scott) runs in a WebGL shader, and the letters
of the word are the only place where the pattern can live; the pointer drops new seeds -->
<main class="pagina" data-pagina>
<canvas class="tela" aria-hidden="true" data-tela></canvas>
<h1 class="sr">Lichen</h1>
<header class="testa">
<p class="marchio" data-entra>Lichen</p>
<p class="testa__nota" data-entra>Living materials lab</p>
</header>
<p class="nota" data-entra data-nota>Draw to plant a seed</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.
19 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 che cresce come un corallo» da Animorio e adattala al mio sitoCosa fa
Su un foglio bianco caldo c'è l'ombra leggerissima di una parola, Lichen, il nome di un laboratorio di materiali viventi inventato. Nessuno la scrive: in ogni lettera compaiono otto piccoli semi d'inchiostro vermiglio, e da lì comincia a crescere un disegno vivo, un intreccio di strisce nere che si ramificano, si dividono e si richiudono in tante piccole cellette, come un lichene, un corallo o un'impronta digitale. Il disegno può vivere solo dentro le lettere: arrivato al bordo si ferma e lo segue, così la parola si riempie da sola, lettera per lettera, finché ogni asta è un piccolo labirinto. Il bordo che sta ancora crescendo è vermiglio, l'unico colore, e diventa nero quando si posa. Intanto la parola prende peso: le lettere si allargano piano sul loro posto e il corallo le segue. Quando è tutta piena resta ferma qualche secondo, poi si scioglie, le strisce si consumano e la carta torna pulita, e si ricomincia dagli stessi semi. Il puntatore, o il dito, pianta semi nuovi dove passa: dentro le lettere crescono e si uniscono al resto, fuori fanno un piccolo ricciolo e muoiono.
Come funziona
Due sostanze per cella
La simulazione è una griglia di celle grande quanto la pagina divisa per la cella (CELLS fa sì che un'asta della parola sia larga circa 22 celle). Ogni cella ha due numeri, u e v, le due sostanze del modello di Gray-Scott, e stanno nei canali rosso e verde di una texture a virgola mobile (RGBA16F, WebGL 2 con EXT_color_buffer_float). Le texture sono due e si passano la mano: lo shader legge da una e scrive nell'altra, poi si scambiano (il ping-pong).
Un passo di Gray-Scott
A ogni passo lo shader fa il laplaciano a nove punti di u e v (meno il centro, 0,2 i quattro vicini, 0,05 i quattro in diagonale), poi la reazione r = u·v²: u diventa u + Δu − r + F·(1 − u) e v diventa v + 0,5·Δv + r − (F + k)·v. Con F = 0,0545 e k = 0,062 il disegno è quello del corallo, un labirinto che si ramifica. GROW_SPEED passi a ogni sessantesimo di secondo fanno la velocità della crescita.
La parola come terreno
La parola è disegnata in bianco su nero in un canvas 2D grande come la griglia e caricata come una texture R8: è la maschera. Dentro la maschera k vale KILL, fuori vale 0,0075 di più e v si consuma dello 0,4 per cento a passo: lì il disegno non può restare. Ogni lettera è disegnata al centro del suo posto misurato al peso finale, così mentre il peso sale da 460 a 780 la lettera si allarga sul posto e i semi restano dentro.
I semi e il bordo vermiglio
Un secondo shader pianta i semi: in un cerchio di celle v va a 0,9 e u scende a 0,45. Quelli dell'inizio si scelgono con un caso dal seme fisso fra i punti lontani almeno sei celle dal bordo, otto per lettera e distanti fra loro; quelli del puntatore cadono dove passa. Il canale blu conta da quanto una cella è piena: dove è giovane il terzo shader, quello che disegna, mette il vermiglio al posto del nero.
La regia
Il giro va sul ticker di GSAP e la crescita si conta in passi: i passi tengono il passo col tempo (sette secondi), ma la fase finisce solo quando sono tutti fatti, così su una scheda video lenta la parola ci mette di più ma si riempie sempre. Il peso sale da 460 a 780 con la stessa curva dei passi, poi la parola resta piena HOLD secondi e k sale dappertutto in 2,4 secondi: il corallo si consuma e la carta torna pulita. Il disegno legge v con un filtro bilineare fatto a mano e una soglia morbida, così le strisce hanno il bordo liscio anche con celle di due pixel. Col movimento ridotto si fanno 1400 passi subito, prima di mostrare la parola, e poi niente si muove.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | Lichen | La parola che cresce. |
GROW_SPEED | script.js | 3 | Quanti passi della simulazione a ogni sessantesimo di secondo: più alto, cresce più svelta. |
FEED | script.js | 0.0545 | Quanto nutrimento entra: cambia il disegno (più basso, macchie; più alto, labirinti). |
KILL | script.js | 0.062 | Quanto se ne va dentro le lettere: più alto, strisce più sottili e rade. |
SEEDS | script.js | 8 | Quanti semi per lettera all'inizio: più semi, più cellette e crescita più svelta. |
HOLD | script.js | 4.5 | Quanti secondi la parola resta piena prima di sciogliersi. |
WEIGHT_FROM | script.js | 460 | Il peso della parola quando comincia a crescere. |
WEIGHT_TO | script.js | 780 | Il peso a cui arriva. |
PEN | script.js | 4 | Il raggio del seme lasciato dal puntatore, in celle. |
CELLS | script.js | 22 | Quante celle è larga un'asta della parola: più celle, corallo più fine (e più lavoro per la scheda video). |
Quando usarla
Come apertura di un laboratorio di biologia, di uno studio di materiali, di un marchio di cosmetica naturale o di un vivaio; come titolo di una mostra sulla natura e la crescita; come pagina d'ingresso di uno studio di design generativo che vuole mostrare il suo nome fatto da un processo e non da una mano.
Sul telefono
La stessa animazione: la parola si misura sulla larghezza e la griglia della simulazione segue la parola, così sul telefono ci sono meno celle (e meno lavoro) ma il corallo riempie le lettere allo stesso modo. Il dito che tocca o trascina pianta i semi.
Con il movimento ridotto
La parola è già cresciuta e ferma, piena del suo corallo nero: i passi della simulazione si fanno tutti prima di mostrarla, poi compare in dissolvenza. Un tocco pianta un seme e il corallo cresce subito, senza animazione.
Trappole
- Gray-Scott con 8 bit per canale non funziona: u e v cambiano di millesimi a ogni passo e si arrotondano a zero. Servono texture a virgola mobile in cui si possa anche scrivere: WebGL 2 con RGBA16F e l'estensione EXT_color_buffer_float (o quella a mezza precisione). Senza, la demo mostra la parola piena d'inchiostro.
- Le texture mezze-float non si filtrano in modo lineare su tutti i telefoni: lo stato si legge con NEAREST e il filtro bilineare per disegnarlo si fa a mano nello shader, con quattro letture.
- Con la parola centrata tutta insieme, ogni cambio di peso la spostava e i semi finivano fuori dalle lettere sottili (morivano quelli della L). Ora ogni lettera sta al centro del suo posto misurato al peso finale, e i semi si scelgono ad almeno sei celle dal bordo.
- Con celle troppo grandi (un'asta larga nove celle) il corallo non ha posto per il suo labirinto e diventa un verme pieno: la cella si misura dal corpo della parola (CELLS) e non dalla pagina.
- Con tre semi per lettera servivano più di cinquemila passi per riempire la parola: su un WebGL fatto in software (quello dei server, SwiftShader) non bastava un minuto. Con otto semi per lettera ne bastano circa milleduecento, e su un WebGL in software le celle di un'asta scendono da 22 a 18.
- Il canvas e le texture si rifanno a ogni resize, anche a metà crescita: si ripiantano i semi e il giro continua.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,8 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 22 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.
