Il pulsante di vetro liquido
Pulsanti, WebGL, Hover, Fisica
NuovaGratis
Tutti i componenti
La nav di raso
La barra in alto di una casa di moda tagliata da una striscia di raso nero. Sotto la pagina in cui si è la stoffa è arricciata, come pizzicata da sotto: le pieghe corrono verso la parola dai due lati e la luce ci scivola sopra in lunghe strisce chiare. Scegliendo un'altra pagina l'arricciatura si allenta un poco, corre lì su una molla e raccoglie di nuovo la stoffa, e dal punto nuovo parte un'onda morbida che si spegne. Sotto la voce su cui sta il puntatore la stoffa si arriccia appena. Il raso è disegnato in WebGL.
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 satin nav</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/opsz.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the top bar of a fashion house, Velin, cut from a strip of black satin. Under the page you are on the satin is
gathered, as if pinched from below: its folds run in towards the word and the light slides along them. Going
to another page the pinch lets go and gathers the cloth again further along, the folds travel with it and a
soft ripple runs out of the new gather. The satin is drawn in WebGL: a height map of folds, lit with the
stretched highlights of a woven fabric. The links on top are the real navigation -->
<header class="bar" data-bar>
<canvas class="bar__satin" aria-hidden="true" data-satin></canvas>
<a class="brand" href="#" aria-label="Velin, home" data-brand>
<span class="brand__word">Velin</span>
<span class="brand__mark" aria-hidden="true">V</span>
</a>
<nav class="nav" aria-label="Main">
<ul class="list">
<li><a class="link" href="#" aria-current="page" data-link>New in</a></li>
<li><a class="link" href="#" data-link data-autoclic>Women</a></li>
<li><a class="link" href="#" data-link>Men</a></li>
<li><a class="link" href="#" data-link data-autoclic>Atelier</a></li>
<li><a class="link" href="#" data-link data-autoclic>Journal</a></li>
</ul>
</nav>
</header>
</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.
20 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 nav di raso» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una barra alta 60 pixel e larga 760, con gli angoli appena tondi, fatta di raso nero: lungo tutta la striscia la stoffa ricade in pieghe lunghe e morbide con dei riflessi lilla pallidi. A sinistra il nome Velin in Bodoni maiuscolo spaziato, a destra cinque voci in Bodoni avorio: New in, Women, Men, Atelier e Journal. Sotto la voce in cui si è, la stoffa è arricciata: dai due lati le pieghe corrono verso la parola, più fitte vicino a lei, e su ognuna scorre una striscia di luce. All'arrivo la barra compare liscia, le voci salgono una dopo l'altra, poi la stoffa si raccoglie sotto New in e un'onda si allarga dal punto. Cliccando un'altra voce l'arricciatura si allenta mentre corre, con le pieghe che la seguono sulla stoffa, va appena oltre la voce nuova e torna, si stringe di nuovo e da lì parte un'onda che si allarga e sparisce; la voce scelta diventa avorio pieno, le altre restano più spente. Col mouse su un'altra voce la stoffa sotto di lei si arriccia un poco e la voce si accende; da tastiera la voce col fuoco ha un contorno sottile e la stessa piccola arricciatura, e le frecce passano da una voce all'altra.
Come funziona
Una mappa delle altezze
Il raso è un solo passaggio di WebGL su tutta la barra. Per ogni pixel lo shader calcola quanto è alta la stoffa: un drappeggio lungo fatto di tre onde quasi verticali, e le pieghe dell'arricciatura. La pendenza, presa con le differenze fra i pixel vicini, dà la normale della superficie, e da lì vengono l'ombra e la luce.
Le pieghe che corrono verso la parola
Le pieghe di un'arricciatura sono creste che dai due lati si stringono verso il punto pizzicato: lo shader usa il rapporto fra la distanza in verticale e quella in orizzontale dal punto, così le creste sono fitte vicino alla parola e si aprono lontano. La loro profondità cresce uscendo dal punto e poi si spegne entro REACH pixel, e il drappeggio intorno è tirato verso l'arricciatura, quindi anche le pieghe lunghe si raccolgono lì. La distanza in orizzontale è ammorbidita (una radice al posto del valore assoluto), altrimenti al centro restava una cucitura dritta.
La luce del raso
La luce viene dall'alto a sinistra. Il riflesso è in due lobi, uno stretto e uno largo, e la normale è schiacciata in orizzontale prima di calcolarlo, come per un tessuto coi fili che corrono lungo la barra: così ogni piega porta una striscia di luce lunga. Il colore della stoffa e quello del riflesso vengono dalle variabili --satin e --sheen.
L'arricciatura che corre
La posizione dell'arricciatura segue il centro della voce scelta su una molla (SPRING), a passi di 1/120 di secondo; la sua forza su un'altra molla, che con la velocità scende verso la metà: correndo la stoffa si allenta, fermandosi si stringe. Quando l'arricciatura arriva parte un'onda: un anello che si allarga e si spegne in tre secondi. Il puntatore ha una sua arricciatura più leggera (HOVER_GATHER), con le sue molle.
Disegnare solo quando serve
Lo shader gira solo mentre una molla si muove, un'onda è viva o l'entrata è in corso; poi la barra resta ferma senza ricalcolare niente. Senza WebGL la barra ripiega su un fondo scuro con una luce morbida sotto la voce scelta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FOLDS | script.js | 13 | Quante pieghe corrono nell'arricciatura. |
DEPTH | script.js | 9 | Quanto sono profonde le pieghe dell'arricciatura, in pixel di altezza della stoffa. |
REACH | script.js | 120 | Fin dove l'arricciatura tira la stoffa, in pixel dalla parola. |
SHEEN | script.js | 0.9 | Quanto è forte la luce sulle pieghe (0, stoffa opaca). |
SPRING | script.js | [120, 15] | La molla su cui corre l'arricciatura: quanto è rigida e quanto è frenata (meno frenata, va più oltre). |
RIPPLE | script.js | 1 | Quanto è forte l'onda che parte dall'arricciatura nuova (0, nessuna). |
HOVER_GATHER | script.js | 0.5 | Quanto si arriccia la stoffa sotto la voce su cui sta il puntatore (da 0 a 1). |
Quando usarla
Per la testata di chi vende o fa cose di stoffa e di lusso: una casa di moda, un atelier, una sartoria, un negozio di lingerie o di cravatte, un marchio di profumi, un hotel elegante. Sta bene con quattro-sei voci corte su un fondo scuro; il raso può essere di qualsiasi colore, cambiando --satin e --sheen (un avorio con riflessi caldi, un blu notte, un verde bottiglia).
Sul telefono
Sotto i 600 pixel il nome diventa la sola V e le cinque voci si stendono su tutta la barra, a 14 pixel: a 390 la barra è larga 358 e alta 60, e ci stanno tutte senza sforare. Il raso è lo stesso, con l'arricciatura e l'onda; col dito giù su una voce la stoffa si arriccia sotto di lei come col mouse, e il tocco la sceglie.
Con il movimento ridotto
La stoffa non corre e non fa onde: scegliendo un'altra voce l'arricciatura è già sotto di lei e il raso si ridisegna in una breve dissolvenza; il puntatore accende la voce senza arricciare. All'apertura la barra compare in dissolvenza con l'arricciatura già al suo posto.
Trappole
- La prima arricciatura era fatta di raggi intorno al punto (il coseno dell'angolo): sembrava un'esplosione, una raggiera di linee sottilissime che si confondevano coi pixel. Ora le pieghe sono creste che corrono in orizzontale verso la parola, e vicino al punto sono più larghe.
- Con la luce del riflesso di Kajiya-Kay e la stoffa piatta quasi perpendicolare ai fili, tutta la barra si accendeva di grigio. Ora il riflesso è stretto (esponenti 30 e 140) e la normale è solo schiacciata in orizzontale: la stoffa piatta resta nera e si accendono le pieghe.
- Il drappeggio fatto di onde oblique faceva delle macchie di luce ovali, come gocce sulla stoffa. Ora le onde sono quasi verticali e la luce viene giù in strisce, come su un tessuto che ricade.
- Col valore assoluto della distanza orizzontale, sotto la parola restava una cucitura verticale netta: ora la distanza è ammorbidita con una radice.
Librerie
GSAP 3.15.0, Bodoni Moda (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,2 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.
