Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La parola di vetro
Scorri dentro l’anteprima
Una parola di vetro spesso galleggia su un muro di pennellate: attraverso le curve il muro si vede piegato tre volte, una per colore, e scorrendo il vetro si scioglie di nuovo nel muro.
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 glass word</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
<script type="importmap">
{ "imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.178.0/build/three.module.min.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.178.0/examples/jsm/"
} }
</script>
</head>
<body>
<main>
<!-- the opening: 220% of the screen tall, with a sticky stage; the word melts into the wall as you scroll -->
<section class="opening" data-opening>
<div class="stage" data-stage>
<canvas class="canvas" data-canvas aria-hidden="true"></canvas>
<p class="wait" data-wait>The glass is cooling</p>
<header class="top">
<p class="brand">Mirage</p>
<p class="top__line">Digital studio</p>
</header>
<h1 class="sr">Mirage, a digital studio</h1>
<p class="corner" data-corner>Interfaces, apps and brands built to hold up in the heat.</p>
<p class="invite" data-invite>Scroll to discover</p>
</div>
</section>
<section class="after">
<h2 class="after__title">Solid on arrival. Invisible in use.</h2>
<p class="after__text">We design and build interfaces that catch the eye in the first second and then step aside, so the work shows through.</p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script type="module" 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.
29 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 di vetro» da Animorio e adattala al mio sitoCosa fa
Un muro color carta coperto di pennellate chiare e, in mezzo, la parola mirage in corsivo, fatta di vetro spesso. Entra volando da destra lungo una curva, girando mentre arriva, e si posa. Poi galleggia, respira appena e si inclina verso il puntatore, e con lei gira la luce che ne accende i bordi. Attraverso il vetro si vede il muro, piegato dalle curve e sdoppiato in un arcobaleno leggero sui bordi; sulle curve si riflettono due pannelli da studio fotografico. Scorrendo la parola sale, si piega all’indietro e si scioglie nel muro, finché resta solo la carta.
Come funziona
Il muro
Il muro si dipinge una volta sola su un canvas grande un terzo dello schermo: 90 pennellate diagonali da un generatore con seme, chiare e scure, ognuna una sfumatura lineare. Stirato a tutto schermo, il terzo lo ammorbidisce da solo. Diventa una texture, e un quadrato che copre lo schermo la mostra leggendola nella posizione del pixel stesso, gl_FragCoord diviso la risoluzione: così muro e vetro combaciano al pixel.
La parola
Il contorno di mirage viene dal Pacifico (licenza SIL OFL), scritto come un path SVG in unità del carattere. SVGLoader lo trasforma in forme e ExtrudeGeometry le estrude: spessore 110, smusso di 26 per 64 in 8 passi. Lo smusso cresce verso l’interno, con bevelOffset uguale a meno la sua larghezza, così gli occhielli piccoli del corsivo restano aperti.
Il vetro
Niente materiale fisico: uno ShaderMaterial. Per ogni pixel la rifrazione si calcola tre volte, con indici 1,42, 1,45 e 1,48, uno per canale: il rosso piega meno, il blu di più, e sui bordi i colori si separano. Lo spostamento è di 0,04 dello schermo. Dove il vetro è spesso il colore tende al #bccbd2, il bordo, (1 − N·V)^2,2, scurisce verso l’inchiostro, una luce radente accende i bordi che la guardano e un lampo stretto, (N·H)^90, fa il punto di luce.
I riflessi da studio
La vista riflessa sulla normale legge due pannelli verticali e una luce dall’alto, disegnati da una funzione e non da una foto; i loro bordi sono filtrati con fwidth, quindi restano morbidi anche sugli smussi. Ogni canale li legge spostati di 0,006, un filo di prisma. Pesano 0,5 per un fresnel che cresce verso i bordi, e un bagliore lento scivola sulle curve.
Volo, respiro e scorrimento
La parola sta in tre gruppi uno dentro l’altro: il primo lo muove lo scorrimento, il secondo l’entrata, il terzo il galleggiamento. L’entrata dura 2,6 secondi di power3.out attraverso tre punti, con sine.inOut fra l’uno e l’altro, e gira da un’angolatura storta fino a dritta. Il puntatore la inclina fino a 0,16 radianti e sposta la luce, con un ritardo che non dipende dalla frequenza dello schermo. Lo scorrimento arriva da un oggetto scrubbato con 0,6 secondi di ritardo: dal 35% alla fine dell’apertura il vetro si mescola al muro e sparisce.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | mirage | Il contorno della parola come path SVG: per cambiarla si esporta il contorno di un’altra parola dal carattere che si preferisce. |
DEPTH, BEVEL | script.js | 110, 26 × 64 | Quanto è spesso il vetro e quanto è largo e profondo lo smusso, in unità del carattere (1000 = il corpo). |
IOR | script.js | 1.42, 1.45, 1.48 | Gli indici di rifrazione di rosso, verde e blu: più sono lontani, più arcobaleno sui bordi. |
BEND | script.js | 0.04 | Quanto la rifrazione sposta il muro dietro. |
TINT, RIM | script.js | #bccbd2 | Il colore del vetro spesso e quello del bordo. |
STUDIO, PRISM | script.js | 0.5, 0.006 | La forza dei pannelli riflessi e quanto sono separati i loro colori. |
FILL | script.js | 0.74 | Quanto della larghezza dello schermo prende la parola (0,92 al telefono). |
MELT | script.js | 0.35, 1 | Fra quali punti dell’apertura il vetro si scioglie nel muro. |
STROKES, FLIGHT | script.js | 90, 2.6 | Le pennellate sul muro e i secondi dell’entrata. |
Quando usarla
Per l’apertura di un sito che deve farsi ricordare nel primo secondo: uno studio, un marchio, un prodotto dal nome breve. Funziona con una parola o un simbolo, non con una frase: il vetro vuole forme spesse e curve.
Sul telefono
La parola prende il 92% della larghezza invece del 74%, la frase in basso va a tutta riga sopra l’invito a scorrere e il canvas lascia passare lo scorrimento del dito. Il palco è alto quanto lo schermo con le barre del browser ritirate, e le scritte in basso salgono dell’altezza delle barre.
Con il movimento ridotto
Niente volo, niente galleggiamento e niente inclinazione: la parola compare in 0,6 secondi già al suo posto. La luce segue ancora il puntatore, e scorrendo la parola sale e si scioglie lo stesso, perché la guida chi scorre.
Trappole
- translate() e scale() di una geometria ricalcolano la sua boundingBox sul posto: se la si legge dopo per misurare, la parola risulta minuscola o enorme. La scatola si copia prima.
- Lo smusso di ExtrudeGeometry cresce verso l’esterno e chiude gli occhielli piccoli di un corsivo: con bevelOffset uguale a meno bevelSize cresce verso l’interno.
- Muro e vetro devono leggere la stessa texture nello stesso modo, in coordinate dello schermo: se il muro fosse un piano con le sue uv, attraverso il vetro si vedrebbe uno scalino.
- Con curveSegments alto il corsivo passa i 270 000 vertici; 8 bastano a tenere morbide le curve.
- Un modulo con importmap parte solo quando tutto quello che importa è arrivato: la scritta d’attesa sta nell’HTML e sparisce al primo fotogramma disegnato.
Librerie
Three.js 0.178.0, GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,0 KB; le librerie: GSAP + ScrollTrigger 45 KB, Three.js + SVGLoader 190 KB.
Collaudo
Provata il 28 settembre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
