Lo sgabello salvaschermo
Fisica, Transizioni
NuovaGratis
Torna alla libreria
La transizione col telo
Una lampada nuova aspetta sotto un telo di raso rosso, appeso con le sue pieghe sopra la pagina. Al clic una mano invisibile lo prende dall'angolo in alto a destra: un piccolo strattone, gli anelli si staccano uno dopo l'altro e il telo vola via gonfio d'aria, mostrando la pagina che fa la sua entrata. Il clic dopo il telo ricade dall'alto e si assesta nelle sue pieghe. È una vera simulazione di stoffa, disegnata con 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, viewport-fit=cover">
<title>The unveiling</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage is-covered" data-stage data-autoclic>
<!-- the page under the cloth: a small ceramics studio launching a new lamp -->
<div class="page" data-page inert>
<header class="nav">
<span class="brand" data-in-nav>Vesk & Lowe</span>
<nav class="links" aria-label="Studio">
<a href="#" data-in-nav>Lamps</a>
<a href="#" data-in-nav>Studio</a>
<a href="#" data-in-nav>Journal</a>
</nav>
</header>
<section class="hero">
<div class="copy">
<p class="kicker" data-in>Spring edition, unveiled today</p>
<h1 class="title" data-title>Moonwell</h1>
<p class="lede" data-in>A stoneware table lamp, thrown by hand and glazed in river ash. The light pools low and warm, like a moon at the bottom of a well.</p>
<span class="rule" data-rule></span>
<dl class="specs">
<div data-in><dt>Height</dt><dd>46 cm</dd></div>
<div data-in><dt>Glaze</dt><dd>River ash</dd></div>
<div data-in><dt>Edition</dt><dd>120 pieces</dd></div>
</dl>
<div class="buy" data-in>
<span class="price">€380</span>
<button class="reserve" type="button" data-reserve><span class="reserve__bg"></span><span class="reserve__label" data-reserve-label>Reserve yours</span></button>
</div>
</div>
<figure class="art" data-art>
<svg viewBox="0 0 420 520" aria-hidden="true" data-lamp>
<defs>
<radialGradient id="halo" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" class="glow-a"/>
<stop offset="1" class="glow-b"/>
</radialGradient>
<radialGradient id="pool" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" class="pool-a"/>
<stop offset="1" class="pool-b"/>
</radialGradient>
<linearGradient id="glaze" x1="0" y1="0" x2="1" y2="0.3">
<stop offset="0" class="glaze-hi"/>
<stop offset="0.5" class="glaze-mid"/>
<stop offset="1" class="glaze-lo"/>
</linearGradient>
<linearGradient id="shadeLit" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="lit-a"/>
<stop offset="1" class="lit-b"/>
</linearGradient>
</defs>
<circle class="halo" cx="210" cy="180" r="200" fill="url(#halo)" data-glow/>
<rect class="plinth" data-plinth x="40" y="432" width="340" height="88"/>
<rect class="plinth-top" data-plinth x="40" y="432" width="340" height="6"/>
<ellipse class="pool" cx="210" cy="434" rx="170" ry="18" fill="url(#pool)" data-glow/>
<g class="lamp" data-lamp-body>
<ellipse class="lamp__shadow" cx="210" cy="432" rx="78" ry="7"/>
<path class="lamp__body" d="M162 432C112 404 104 330 156 296c18-12 90-12 108 0c52 34 44 108-6 136z" fill="url(#glaze)"/>
<path class="lamp__rim" d="M166 300c20-9 68-9 88 0"/>
<circle class="lamp__moon" cx="212" cy="368" r="27"/>
<circle class="lamp__crater" cx="203" cy="360" r="5"/>
<circle class="lamp__crater" cx="222" cy="376" r="3.5"/>
<circle class="lamp__crater" cx="216" cy="355" r="2.5"/>
<rect class="lamp__neck" x="202" y="244" width="16" height="50" rx="3"/>
<path class="lamp__shade" d="M118 246L152 112h116l34 134z"/>
<path class="lamp__shade-lit" d="M118 246L152 112h116l34 134z" fill="url(#shadeLit)" data-glow/>
<path class="lamp__seam" d="M124 236h172M147 124h126"/>
</g>
</svg>
</figure>
</section>
</div>
<!-- the cloth: a mesh of points held by springs, drawn with WebGL over its own soft shadow -->
<div class="cloth" data-cloth aria-hidden="true">
<canvas data-shadow></canvas>
<canvas data-gl></canvas>
</div>
<button class="toggle" type="button" data-toggle><span class="toggle__bg"></span><span class="toggle__label" data-toggle-label>Unveil</span></button>
<p class="sr" aria-live="polite" data-live></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.
45 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 transizione col telo» da Animorio e adattala al mio sitoCosa fa
La pagina di uno studio di ceramica inventato, Vesk & Lowe, che presenta la lampada Moonwell: titolo grande, due righe di testo, le misure, il prezzo, il pulsante per prenotarla e a destra la lampada disegnata in SVG sul suo piedistallo. Sopra c'è un telo di raso rosso con la fodera dorata, appeso a un'asta appena sopra lo schermo: è più largo dell'asta, quindi fa pieghe verticali, con la luce che arriva dall'alto a sinistra, le ombre nelle pieghe e il riflesso lucido del raso; lungo l'orlo corre una cucitura dorata. All'apertura il telo cade dall'alto e si assesta. Al clic (sul telo o sul pulsante Unveil) la mano invisibile prende l'angolo in alto a destra, lo tira un poco verso di te, gli anelli si staccano dall'asta da destra a sinistra e poi la mano tira in alto e lontano, sempre più veloce: l'aria prende il telo, che si gonfia, si gira mostrando la fodera dorata e vola fuori dallo schermo, con la sua ombra morbida che scorre sulla pagina. Intanto la pagina entra: il menu scende, le lettere del titolo salgono con un rimbalzo, la lampada si alza con un elastico e si accende con un piccolo tremolio. Al clic dopo (Cover again) il telo ricade dall'alto con l'asta, si tende quando l'asta si ferma, un soffio d'aria sotto l'orlo lo fa ondeggiare e le pieghe si assestano fino a fermarsi. Sulla pagina il pulsante Reserve yours si gonfia col puntatore e al clic risponde Held for you con un elastico, la lampada ondeggia quando il puntatore ci passa sopra.
Come funziona
Una maglia di punti con le molle
Il telo è una griglia di punti (circa uno ogni 30 pixel) con posizione e posizione precedente: è l'integrazione di Verlet, dove la velocità è la differenza fra le due. Fra i punti ci sono vincoli di distanza lungo i fili, in diagonale per non farlo deformare a losanga e saltando un punto per la resistenza a piegarsi (STIFFNESS). A ogni passo fisso di 1/120 di secondo si muovono i punti e poi si rimettono a posto i vincoli dodici volte.
Le pieghe nascono dall'asta
La riga in alto è fissata a un'asta più corta del telo (FOLDS è la stoffa in più), con i punti messi in profondità su un'onda: la stoffa compressa non può che piegarsi verso di te e indietro. Una volta si lascia appendere fuori dalla vista finché non si ferma: quella è la forma a riposo, che si ritrova uguale a ogni caduta.
La mano, l'aria e la lunga presa
Al clic l'angolo in alto a destra diventa un punto fissato alla mano, che GSAP muove: uno strattone e poi un tiro sempre più veloce verso l'alto e fuori. Gli anelli si staccano dall'asta uno alla volta con una call nella timeline. L'aria spinge ogni quadratino contro il suo moto lungo la sua normale (AIR): è quello che lo gonfia. Perché non si allunghi come gomma, nessun punto può stare più lontano dalla mano di quanto permette la stoffa fra loro.
WebGL per la luce
La maglia si disegna con WebGL in una sola chiamata: posizioni e normali dei vertici si ricalcolano a ogni fotogramma, la prospettiva sta nel vertex shader e il fragment shader fa la luce diffusa, il riflesso del raso, le pieghe più scure in fondo, la fodera dorata sul retro (gl_FrontFacing) e l'orlo con la cucitura tratteggiata, dalle coordinate della stoffa. L'ombra sulla pagina è il contorno del telo su un canvas 2D sotto, sfocato e spostato secondo quanto il telo è alto. Senza WebGL resta il disegno piatto in 2D.
La caduta e l'assestamento
Per ricoprire, il telo a riposo riparte sopra lo schermo già in caduta, e l'asta scende con un'accelerazione mai più forte della gravità, così la stoffa resta appesa e non si accartoccia; quando l'asta si ferma il telo si tende e ondeggia, un soffio d'aria sotto l'orlo lo fa respirare e poi uno smorzamento che cresce in una timeline lo ferma. La pagina, sotto, si rimette pronta per la sua entrata.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PULL | script.js | 1.5 | I secondi in cui la mano invisibile tira via il telo. |
DROP | script.js | 1.1 | I secondi della caduta del telo dall'alto. |
AIR | script.js | 2.4 | Quanto l'aria prende il telo: alto si gonfia come seta, basso cade come feltro. |
GRAVITY | script.js | 2.2 | Quanto pesa il telo, in altezze dello schermo al secondo al quadrato. |
FOLDS | script.js | 0.14 | Quanta stoffa in più c'è sull'asta: di più fa pieghe più profonde. |
STIFFNESS | script.js | 0.35 | Quanto il telo resiste a piegarsi: basso fa pieghe fitte come la seta, alto morbide come la tela. |
CELL | script.js | 30 | La misura di una maglia in pixel: più piccola è più fine e più pesante da calcolare. |
Quando usarla
Per il lancio di un prodotto o di una collezione, per la pagina di un'opera o di una mostra che si scopre come all'inaugurazione, per un annuncio, per il passaggio fra la copertina e il contenuto di un sito che vuole un momento di teatro.
Sul telefono
Stessa simulazione e stesse animazioni: la maglia si adatta allo schermo (meno colonne, stessa misura di maglia), la gravità è in altezze dello schermo, quindi la caduta dura uguale. La pagina mette il testo sopra e la lampada sotto. L'ondeggiare della lampada sotto il puntatore c'è solo col mouse.
Con il movimento ridotto
Niente si muove: il telo è disegnato fermo con le sue pieghe a riposo; al clic si dissolve e la pagina compare già al suo posto con una dissolvenza, al clic dopo il telo ricompare con una dissolvenza.
Trappole
- Disegnato in 2D, un quadratino per colore, il raso sembrava fatto di tessere: le pieghe avevano gli spigoli. Con WebGL e le normali dei vertici la luce scorre liscia, e il 2D resta solo come riserva.
- L'asta che ricadeva con un ease power2.in andava più veloce della stoffa sotto (che ha lo smorzamento), la comprimeva, e il fondo del telo si arrotolava mostrando la fodera; con la gonfiatura iniziale e il rimbalzo dell'asta era peggio. Ora l'asta scende con un'accelerazione mai più forte della gravità e la stoffa parte già con la sua velocità.
- Con fotogrammi lenti l'asta e la mano saltavano di centinaia di pixel fra un passo e l'altro e il telo si aggrovigliava: ora dentro un fotogramma i passi le portano dalla posizione di prima a quella nuova un poco alla volta.
- Il titolo spezzato in lettere inline-block andava a capo in mezzo alla parola, e la lettera salita da sotto finiva nella riga sbagliata: ora ha white-space nowrap.
- Tirato forte da un punto solo, il telo si allungava come gomma, perché dodici passate sui vincoli non bastano a portare la forza fino all'altro capo: serve la lunga presa, la distanza massima di ogni punto dalla mano.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0, Hanken 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 11 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.
