La parola nel miraggio
WebGL, Testo, Hover
NuovaGratis
Torna alla libreria
La parola dietro il vetro cannettato
Nello stile minimal, per una vetreria inventata: il nome «Ondelle» grande su carta bianco caldo e davanti una lastra di vetro cannettato. Dietro ogni canna la parola si piega, si stringe e si specchia in strisce sottili color vermiglio, come attraverso un vetro colorato. Il puntatore fa scorrere la lastra lungo la parola con una molla; lasciata, torna al suo posto e lo supera di un soffio.
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 word behind fluted glass</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<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>
<!-- the name of a made-up glassworks, large, and in front of it a pane of fluted glass. Through the reeds the word
breaks into thin mirrored slivers, tinted by the glass. The pointer (or a finger) slides the pane along the
word; let go and it glides back to its place. The script draws the word and the glass on the canvas -->
<main class="stage" data-stage>
<canvas class="canvas" data-canvas aria-hidden="true"></canvas>
<h1 class="sr" data-sr>Ondelle</h1>
<p class="hint" data-hint>Move across the glass</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.
16 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 dietro il vetro cannettato» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo le lettere di «Ondelle», in un serif sottile, atterrano una dopo l’altra: scendono di poco, prendono peso e si posano. Sotto la parola si disegna da sinistra una riga sottile, e ai suoi capi compaiono due righe piccole, il nome della vetreria e lo spessore del vetro. Poi da destra entra una lastra di vetro cannettato alta quanto tre volte le maiuscole, con un filo d’inchiostro per bordo: arriva con una molla, supera di un soffio il suo posto e si ferma sopra le ultime lettere. Dietro il vetro ogni canna mostra una striscia di quello che c’è dietro, più larga di lei, stretta e specchiata: la parola si rompe in strisce sottili, tinte di vermiglio come attraverso un vetro colorato, e anche la riga e la didascalia si spezzano. Ogni canna è più scura verso le scanalature, ha un riflesso morbido a sinistra della cresta e un filo sottile nel fondo. Muovendo il puntatore la lastra lo segue lungo la pagina, sempre con la molla, e le canne viaggiano con lei; quando il puntatore esce torna al suo posto.
Come funziona
Tutto quello che sta dietro, su un canvas
La parola e la didascalia si disegnano su un canvas 2D grande come la pagina, bianche su nero: lo shader legge quanto inchiostro c’è nel canale rosso. Ogni lettera ha il suo stato (quanto si vede, quanto pesa, quanto sta sopra il suo posto) e si disegna da sola col suo peso del carattere variabile Fraunces; le posizioni si misurano sulla parola intera, per tenere la crenatura. Il canvas si ridisegna e si ricarica come texture solo quando qualcosa cambia.
Una canna è mezzo cilindro
Dentro la lastra, per ogni pixel lo shader trova la canna e dove sta di traverso (s da −1 a 1), poi legge la carta in x = centro − s · metà canna · BEND · (1 + 0,35 s²): ogni canna mostra una striscia più larga di lei, capovolta, e più stretta verso i bordi, dove il vetro curva di più. Tre letture vicine, più distanti verso le scanalature, fanno la smerigliatura (FROST).
La luce sul vetro
Quello che si vede attraverso prende il colore del vetro: la carta diventa --glass e l’inchiostro --accent. Poi ogni canna si scurisce verso le scanalature con s alla quinta, prende un riflesso gaussiano a sinistra della cresta e un filo sottile nel fondo, largo un pixel e mezzo a ogni densità. Il bordo della lastra è un filo d’inchiostro, e dentro il filo c’è lo spessore del vetro, appena più scuro.
La lastra con la molla
La lastra insegue il puntatore (o il suo posto, REST) con una molla smorzata integrata a passi di 1/240 di secondo nel ticker di GSAP: SPRING decide quanto è svelta, lo smorzamento 0,62 la fa andare oltre di un soffio. Le canne si contano dal bordo sinistro della lastra, così viaggiano con lei, e la lastra è larga un numero intero di canne. Quando la molla si ferma non si ridisegna niente.
L’apertura
Una timeline GSAP fa atterrare le lettere sfalsate di 0,075 s (comparsa, discesa con un back.out, peso da 150 a WEIGHT), disegna la riga con un power3.inOut e accende la didascalia; poi sposta il posto della lastra da fuori pagina a REST, e la molla la porta dentro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Ondelle' | La parola dietro il vetro. |
CAPTION_LEFT | script.js | 'Ondelle Glassworks' | La riga piccola sotto la parola, a sinistra. |
CAPTION_RIGHT | script.js | 'Reeded glass, 8 mm' | La riga piccola sotto la parola, a destra. |
REED | script.js | 26 | La larghezza di una canna del vetro, in pixel. |
BEND | script.js | 1.8 | Quanto ogni canna stringe quello che ha dietro: 1 poco, 3 molto. |
FROST | script.js | 0.35 | Quanto è smerigliato il vetro: 0 limpido, 1 lattiginoso. |
PANE | script.js | 0.3 | La larghezza della lastra, in parti della pagina. |
REST | script.js | 0.66 | Dove riposa la lastra, da sinistra, in parti della pagina. |
SPRING | script.js | 0.5 | Quanto svelta la lastra segue la mano: 0 lenta e morbida, 1 pronta. |
WEIGHT | script.js | 360 | Il peso della parola, da 100 a 900. |
Quando usarla
Per l’apertura del sito di una vetreria, di uno studio di interni o di architettura, di un marchio di arredo o di un hotel che ha il vetro cannettato nelle sue stanze: il nome resta leggibile e il vetro lo fa diventare materia. Va bene anche per il titolo di un portfolio con un nome di una parola.
Sul telefono
La stessa parola, larga nove decimi dello schermo, e la stessa lastra, più stretta: un dito trascinato sopra la pagina fa scorrere il vetro, e lasciandolo torna al suo posto. Il suggerimento dice «Drag» invece di «Move».
Con il movimento ridotto
Niente scorre e niente atterra: la parola, la didascalia e la lastra già al suo posto compaiono in dissolvenza, e il vetro resta fermo.
Trappole
- La didascalia, scritta nell’HTML sopra il canvas, passava davanti al vetro invece che dietro: la lastra la copriva solo a metà e non la piegava. Ora riga e didascalia si disegnano nello stesso canvas della parola, e il vetro piega tutto.
- Con la lastra larga una parte qualunque della pagina, l’ultima canna a destra restava tagliata e sembrava un difetto del vetro: la larghezza si arrotonda a un numero intero di canne.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Archivo (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
