Il selettore del tessuto

Selettori, Fisica, TransizioniCanvas, GSAPImpegnativaPeso compresso: Demo 21 KBGSAP 28 KBGratisScarica lo zip

La scelta del tessuto per un divano su misura: Linen, Velvet, Wool, Denim e Corduroy, cinque campioncini tagliati con le forbici a zigzag. Accanto, appeso a un morsetto di rovere su una barra d'ottone, un grande campione di stoffa vera, simulata punto per punto, con la sua trama e la luce sulle pieghe: il velluto si accende sui fianchi delle pieghe, il velluto a coste prende la luce a bande. Scegliendo un altro tessuto, il campione nuovo esce dal morsetto verso di te, cade sopra il vecchio spingendolo indietro e si assesta ondeggiando; il puntatore o il dito ci soffiano sopra come una brezza.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The fabric picker</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the fabric picker of a made-to-order sofa: five real radio buttons, Linen, Velvet, Wool, Denim and Corduroy,
         each a small swatch cut with pinking shears. Beside them a large swatch hangs from an oak clamp on a brass rail,
         and it is real cloth: a grid of points moved by Verlet integration, drawn on a canvas triangle by triangle with
         the weave of its fabric and the light on its folds (the velvet glows on its flanks, the cord catches the lamp
         across its wales). Choosing another fabric, the new swatch flips out of the clamp, falls over the old one and
         settles swaying; the pointer, or a finger, blows on it like a breeze -->
    <div class="fabric" data-fabric data-autoclic>
      <div class="fabric__hang" data-hang>
        <canvas class="fabric__cloth" aria-hidden="true" data-cloth></canvas>
      </div>

      <fieldset class="fabric__pick">
        <legend class="sr">Upholstery fabric</legend>
        <div class="fabric__head" aria-hidden="true" data-rise>
          <span class="fabric__title">Upholstery</span>
          <span class="fabric__hint">Free swatches by post</span>
        </div>
        <div class="fabric__name" aria-hidden="true" data-name></div>
        <p class="fabric__detail" aria-hidden="true" data-rise><span data-detail></span></p>
        <p class="fabric__spec" aria-hidden="true" data-rise><span data-spec></span><span class="fabric__price" data-price></span></p>

        <div class="fabric__chips" data-chips>
          <label class="chip" data-chip>
            <input class="chip__radio" type="radio" name="fabric" value="linen">
            <span class="chip__lift">
              <canvas class="chip__cloth" aria-hidden="true"></canvas>
              <svg class="chip__stitch" viewBox="0 0 64 64" preserveAspectRatio="none" aria-hidden="true">
                <defs><mask id="sew-linen" maskUnits="userSpaceOnUse" x="-4" y="-4" width="72" height="72"><rect class="chip__sew" x="1.5" y="1.5" width="61" height="61" rx="5" pathLength="1"/></mask></defs>
                <rect class="chip__seam" x="1.5" y="1.5" width="61" height="61" rx="5" mask="url(#sew-linen)"/>
              </svg>
            </span>
            <span class="chip__name">Linen</span>
            <span class="sr" data-about="detail">Washed linen · Oat</span>
            <span class="sr" data-about="spec">290 g/m² · 30,000 rubs</span>
            <span class="sr" data-about="price">Included</span>
          </label>
          <label class="chip" data-chip>
            <input class="chip__radio" type="radio" name="fabric" value="velvet">
            <span class="chip__lift">
              <canvas class="chip__cloth" aria-hidden="true"></canvas>
              <svg class="chip__stitch" viewBox="0 0 64 64" preserveAspectRatio="none" aria-hidden="true">
                <defs><mask id="sew-velvet" maskUnits="userSpaceOnUse" x="-4" y="-4" width="72" height="72"><rect class="chip__sew" x="1.5" y="1.5" width="61" height="61" rx="5" pathLength="1"/></mask></defs>
                <rect class="chip__seam" x="1.5" y="1.5" width="61" height="61" rx="5" mask="url(#sew-velvet)"/>
              </svg>
            </span>
            <span class="chip__name">Velvet</span>
            <span class="sr" data-about="detail">Cotton velvet · Bottle green</span>
            <span class="sr" data-about="spec">420 g/m² · 50,000 rubs</span>
            <span class="sr" data-about="price">+ €220</span>
          </label>
          <label class="chip" data-chip>
            <input class="chip__radio" type="radio" name="fabric" value="wool">
            <span class="chip__lift">
              <canvas class="chip__cloth" aria-hidden="true"></canvas>
              <svg class="chip__stitch" viewBox="0 0 64 64" preserveAspectRatio="none" aria-hidden="true">
                <defs><mask id="sew-wool" maskUnits="userSpaceOnUse" x="-4" y="-4" width="72" height="72"><rect class="chip__sew" x="1.5" y="1.5" width="61" height="61" rx="5" pathLength="1"/></mask></defs>
                <rect class="chip__seam" x="1.5" y="1.5" width="61" height="61" rx="5" mask="url(#sew-wool)"/>
              </svg>
            </span>
            <span class="chip__name">Wool</span>
            <span class="sr" data-about="detail">Herringbone wool · Rust</span>
            <span class="sr" data-about="spec">380 g/m² · 40,000 rubs</span>
            <span class="sr" data-about="price">+ €180</span>
          </label>
          <label class="chip" data-chip>
            <input class="chip__radio" type="radio" name="fabric" value="denim">
            <span class="chip__lift">
              <canvas class="chip__cloth" aria-hidden="true"></canvas>
              <svg class="chip__stitch" viewBox="0 0 64 64" preserveAspectRatio="none" aria-hidden="true">
                <defs><mask id="sew-denim" maskUnits="userSpaceOnUse" x="-4" y="-4" width="72" height="72"><rect class="chip__sew" x="1.5" y="1.5" width="61" height="61" rx="5" pathLength="1"/></mask></defs>
                <rect class="chip__seam" x="1.5" y="1.5" width="61" height="61" rx="5" mask="url(#sew-denim)"/>
              </svg>
            </span>
            <span class="chip__name">Denim</span>
            <span class="sr" data-about="detail">Selvedge denim · Indigo</span>
            <span class="sr" data-about="spec">460 g/m² · 60,000 rubs</span>
            <span class="sr" data-about="price">+ €120</span>
          </label>
          <label class="chip" data-chip>
            <input class="chip__radio" type="radio" name="fabric" value="cord">
            <span class="chip__lift">
              <canvas class="chip__cloth" aria-hidden="true"></canvas>
              <svg class="chip__stitch" viewBox="0 0 64 64" preserveAspectRatio="none" aria-hidden="true">
                <defs><mask id="sew-cord" maskUnits="userSpaceOnUse" x="-4" y="-4" width="72" height="72"><rect class="chip__sew" x="1.5" y="1.5" width="61" height="61" rx="5" pathLength="1"/></mask></defs>
                <rect class="chip__seam" x="1.5" y="1.5" width="61" height="61" rx="5" mask="url(#sew-cord)"/>
              </svg>
            </span>
            <span class="chip__name">Corduroy</span>
            <span class="sr" data-about="detail">Cotton corduroy · Mustard</span>
            <span class="sr" data-about="spec">340 g/m² · 35,000 rubs</span>
            <span class="sr" data-about="price">+ €160</span>
          </label>
        </div>
      </fieldset>
    </div>
  </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.

58 valori da cambiare

Apri il Playground

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 «Il selettore del tessuto» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco, a sinistra, una barra d'ottone con due staffe avvitate al muro; sopra la barra un gancio di filo d'ottone tiene un morsetto di rovere con le venature, la fessura in mezzo e due puntali d'ottone, e dal morsetto pende un grande campione di stoffa con i bordi tagliati a zigzag e un'etichetta tessuta cucita vicino all'orlo. Il campione fa la sua ombra morbida sul muro, in basso a destra. A destra: Upholstery e Free swatches by post in piccolo, il nome del tessuto grande in Fraunces, sotto la descrizione, il peso, la resistenza all'usura e il sovrapprezzo, e in fondo cinque campioncini quadrati tagliati a zigzag, ciascuno col suo nome. Ogni tessuto ha la sua trama dipinta: il lino color avena con i fili irregolari, il velluto verde bottiglia col pelo, la lana color ruggine a spina di pesce con le fibre di altri colori, il denim indaco con la diagonale della saia e la cimosa bianca col filo rosso, il velluto a coste color senape con le coste tonde. All'apertura la barra scende al suo posto con un rimbalzo e il primo campione cade dal morsetto; il nome entra lettera per lettera e i campioncini salgono uno dopo l'altro. Scegliendo un altro tessuto il campione nuovo esce dal morsetto steso verso di te, cade, passa davanti al vecchio e lo spinge indietro, poi oscilla avanti e indietro e si ferma; il morsetto dondola sul gancio dalla parte del tessuto scelto. Intanto il nome vecchio esce lettera per lettera e il nuovo entra con un piccolo rimbalzo, cambiando peso, morbidezza e taglio ottico del carattere secondo il tessuto (sottile per il lino, morbido per il velluto, pieno e secco per il denim); le righe sotto cambiano insieme. Intorno al campioncino scelto una cucitura tratteggiata si cuce da sola, e da quello lasciato si scuce. Col mouse vicino al campione il puntatore soffia: la stoffa si gonfia e ondeggia a raffiche, più forte se lo muovi in fretta, e un clic è un soffio. Sotto il puntatore i campioncini si alzano e si inclinano con una molla. Le frecce della tastiera cambiano tessuto come i radio veri; il fuoco mostra un anello. Al telefono il campione sta sopra la scelta, e il dito che tocca o trascina sul campione soffia.

Come funziona

Una griglia di punti che pende

Il campione è una griglia di 13 per 17 punti in 3D, appesa per la prima riga al morsetto. Fra i punti ci sono legami lungo le righe, lungo le colonne e sulle due diagonali di ogni cella (così la stoffa non si allunga e non si storce) e un paio più morbido a due punti di distanza, che resiste alle pieghe. Le lunghezze a riposo si misurano su un campione già un po' drappeggiato, con pieghe morbide che si fanno più fonde verso l'orlo: appeso e fermo non è mai un foglio piatto.

Verlet, a passi fissi, un tessuto per volta

Ogni punto ha la posizione di adesso e quella di prima: la velocità è la loro differenza, frenata dall'aria, e la gravità e il soffio si aggiungono per il quadrato del passo. Poi i legami si riportano alla loro lunghezza dodici volte per passo, a passi fissi di 1/120 di secondo (fotogramma limitato a 1/30). Ogni tessuto ha il suo peso, la sua rigidità e la sua aria: il velluto è pesante e cade morbido, il denim è rigido e fa pieghe larghe, il lino è leggero e ondeggia di più.

Il campione nuovo cade sopra il vecchio

Il campione nuovo nasce steso verso di te, ruotato di 93 gradi intorno alla linea del morsetto, con una piccola torsione e una spinta verso il basso: il resto lo fa la gravità. Il morsetto tiene il nuovo 2,2 pixel davanti e il vecchio 2,2 dietro; dove si incontrano, punto per punto, quello davanti resta davanti e quello dietro cede di più, così il nuovo, oscillando, spinge indietro il vecchio. Il vecchio si toglie quando il nuovo lo copre fermo. Quando tutto è quasi fermo il campione scivola nella sua posa di riposo (calcolata una volta per tessuto lasciandolo pendere qualche secondo) e il disegno si ferma.

La stoffa disegnata a triangoli

Ogni tessuto è dipinto una volta su un canvas fuori dallo schermo, due volte più fitto: la trama, i bordi a zigzag, l'etichetta; e una seconda volta il rovescio. Ogni punto si proietta in prospettiva verso un occhio un po' sopra la barra. Poi ogni cella si disegna in due triangoli, ciascuno col suo pezzo di dipinto portato dalla trasformazione affine dai tre punti piatti ai tre punti di adesso, ritagliato un poco più largo perché non si vedano le giunture; le celle sono ordinate per profondità e un triangolo girato mostra il rovescio.

Una luce per ogni tessuto

A ogni fotogramma la normale di ogni punto dà due mappe grandi quanto la griglia, stese sul dipinto con lo smussamento: l'ombra in moltiplica e la lucentezza in scherma. Il lino e il denim hanno un riflesso morbido; la lana una peluria sui bordi; il velluto è scuro dove ti guarda e si accende dove la piega gira (1 meno la normale per la vista, alla 2,2); il velluto a coste usa il modello dei capelli di Kajiya e Kay con la tangente lungo le coste, così brilla a bande. L'ombra sul muro è la sagoma del campione spostata secondo la sua distanza dal muro, disegnata quattro volte più piccola e ingrandita, quindi morbida.

Le parole e i campioncini

Il nome è in Fraunces, un carattere variabile: ogni tessuto ha il suo peso, la sua morbidezza (asse SOFT) e il suo taglio ottico, e GSAP li porta dall'uno all'altro mentre le lettere entrano con un rimbalzo. I campioncini sono radio veri dentro le loro etichette: le frecce funzionano, e chi usa un lettore di schermo sente anche la descrizione, il peso e il prezzo. La cucitura intorno al campioncino scelto è un rettangolo tratteggiato con una maschera, il cui tratto (pathLength 1) avanza come l'ago.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`START`	script.js	`1`	Il tessuto scelto all'apertura: 0 Linen, 1 Velvet, 2 Wool, 3 Denim, 4 Corduroy.
`BREEZE`	script.js	`1`	Quanto forte soffia il puntatore sul campione: 0 per niente, 2 una folata.
`DROP`	script.js	`1`	Quanto pesa la stoffa che cade: di più, una caduta più svelta e un'oscillazione più secca.
`AIR`	script.js	`1`	Quanto l'aria frena la stoffa: meno, ondeggia più a lungo.
`STIFF`	script.js	`1`	Quanto ogni tessuto resiste a piegarsi: 0 morbido come la seta, 2 rigido come la tela.
`SHEEN`	script.js	`1`	Quanta luce prendono il velluto e il velluto a coste sulle pieghe.
`WALL`	script.js	`30`	Quanto il campione sta lontano dal muro, in pixel: più lontano, l'ombra cade più in là.
`TOUR`	script.js	`2`	Nel giro dell'anteprima, i secondi da un tessuto all'altro.

Provali nel Playground

Quando usarla

Per scegliere il tessuto di un divano, di una poltrona, di una testiera o di una camicia su misura, dove la stoffa si vuole vedere e quasi toccare prima di ordinare; anche per un negozio di tessuti a metraggio o di tende. Il campione grande mostra un tessuto alla volta: con più di sei o sette scelte conviene una tendina accanto. I prezzi e i dati qui sono inventati: vanno presi dal tuo catalogo.

Sul telefono

Il campione sta sopra la scelta, disegnato più piccolo (alto 270 pixel invece di 380), e la fisica è la stessa. I cinque campioncini stanno in una riga larga quanto lo schermo, a 390 pixel con margine. Il dito che tocca il campione fa un soffio, e trascinandolo di lato la brezza lo segue; scorrere in verticale resta libero.

Con il movimento ridotto

Il campione pende fermo nella sua posa di riposo, il puntatore non soffia, il morsetto non dondola, i campioncini non si alzano e non si inclinano. Cambiando tessuto il campione nuovo compare in dissolvenza sopra il vecchio, il nome e le righe cambiano in dissolvenza e la cucitura compare intera.

Trappole

Con le pieghe di riposo profonde 5 pixel e la luce quasi di fronte il velluto fermo sembrava un feltro piatto: la luce dipende dall'inclinazione delle pieghe. Pieghe di 10 pixel e la lampada spostata di lato, più radente, fanno vedere le pieghe anche da fermo.
La cucitura tratteggiata dei campioncini non scelti lasciava un puntino all'angolo: con la maschera a tratti «1 1» e l'avanzamento a 1 l'ultimo pezzetto del percorso cadeva sull'inizio del tratto dopo. Con «1 2» e l'avanzamento a 1,5 (e −1,5 per scucire) tutti e due i capi stanno in mezzo al vuoto.
L'ombra sul muro disegnata cella per cella mostrava una griglia di righe chiare: i bordi smussati di ogni quadrilatero lasciavano passare il fondo. Ora è una sola sagoma, il giro dei punti del bordo, riempita e ripassata.
Il video dell'anteprima si ferma quando la demo torna com'era: la stoffa, assestata dalla fisica, finiva ogni volta in una posa un po' diversa. Quando è quasi ferma scivola in mezzo secondo nella posa di riposo calcolata una volta per tessuto, sempre la stessa.
Il campione nuovo e il vecchio passano uno attraverso l'altro se si guardano solo i loro morsetti. Un vincolo per punto li tiene in ordine: dove quello davanti finirebbe dietro, tutti e due si spostano, quello dietro di più.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 21 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 17 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.