Il menu a piumino

Menu, SVG, Fisica, HoverGSAP, Solo CSSImpegnativaPeso compresso: Demo 8,7 KBGSAP 28 KBGratisScarica lo zip

Il menu di un negozio di abbigliamento da montagna trapuntato come un piumino arancione: premendo Menu un pannello piatto si srotola sotto il pulsante e i suoi canali si riempiono di piuma uno dopo l’altro, si gonfiano oltre la misura e si assestano. La luce scivola sul nylon col puntatore, che affonda una fossetta nel canale su cui sta.

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 puffer menu</title>
  <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>
  <main class="stage">
    <!-- the menu of a shop of outdoor clothing, quilted like a down jacket. At rest a glossy orange button with its
         stitching. Pressed, a flat quilted panel drops below it and its channels fill with down one after the other,
         from the top: each one puffs up with an overshoot and pushes the others down. The light slides on the nylon
         with the pointer, and the pointer presses a dimple into the channel it is on -->
    <div class="shop" data-frame>
      <button class="puff" type="button" aria-expanded="false" aria-controls="puffer-menu" data-toggle data-autoclic>
        <svg class="puff__icon" viewBox="0 0 20 16" aria-hidden="true">
          <rect data-icon-bar x="1.5" y="1" width="17" height="4.4" rx="2.2"/>
          <rect data-icon-bar x="1.5" y="5.8" width="17" height="4.4" rx="2.2"/>
          <rect data-icon-bar x="1.5" y="10.6" width="17" height="4.4" rx="2.2"/>
        </svg>
        <span class="puff__words" aria-hidden="true">
          <span class="puff__word" data-word-open>Menu</span>
          <span class="puff__word" data-word-close>Close</span>
        </span>
        <span class="sr" data-toggle-name>Open the menu</span>
      </button>

      <nav class="quilt" id="puffer-menu" aria-label="Shop" data-menu inert>
        <svg class="quilt__fabric" aria-hidden="true" data-fabric></svg>
        <ul class="quilt__list">
          <li><a class="channel" href="#jackets" data-channel aria-current="page"><span class="channel__name">Jackets</span><span class="channel__note">New season</span></a></li>
          <li><a class="channel" href="#fleece" data-channel><span class="channel__name">Fleece</span><span class="channel__note">Mid layers</span></a></li>
          <li><a class="channel" href="#base" data-channel><span class="channel__name">Base layers</span><span class="channel__note">Merino</span></a></li>
          <li><a class="channel" href="#footwear" data-channel><span class="channel__name">Footwear</span><span class="channel__note">Trail and town</span></a></li>
          <li><a class="channel" href="#sale" data-channel><span class="channel__name">Sale</span><span class="channel__note">Up to 40% off</span></a></li>
        </ul>
      </nav>
    </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.

26 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 menu a piumino» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianca c’è un pulsante arancione lucido come il nylon di un piumino, con una cucitura tratteggiata tutt’intorno e un’icona a tre canali; la luce su di lui segue il puntatore. Premuto, il pulsante sale, la parola diventa «Close» e i tre canali dell’icona si schiacciano. Sotto si srotola un pannello trapuntato ancora piatto, e i suoi cinque canali si riempiono di piuma uno dopo l’altro dall’alto: ognuno si gonfia, va un poco oltre e si assesta, con i fianchi che sporgono e le cuciture che stringono, e spinge giù quelli sotto. Su ogni canale c’è una voce, Jackets, Fleece, Base layers, Footwear e Sale, con una riga a destra; la pagina in cui sei, Jackets, è cucita sopra come una toppa, con un’impuntura intorno. Il riflesso della luce scorre sul nylon dove va il puntatore; sul canale indicato si forma una fossetta che lo segue, la voce si allarga e spunta una freccia. Scegliendo una voce il canale si schiaccia forte e torna su, poi i canali si sgonfiano dal basso in alto, il pannello si riavvolge nel pulsante e il pulsante torna al centro. Si chiude anche con Esc, col pulsante o premendo fuori.

Come funziona

Un canale è una forma che respira

Ogni canale si ridisegna a ogni fotogramma da un numero solo, quanto è pieno (da 0 a 1): l’altezza va da FLAT a tutto LOFT, i fianchi sporgono con due curve quadratiche tanto più quanto è pieno, le cuciture restano dritte e un poco rientrate, e il primo e l’ultimo canale hanno gli angoli tondi e il bordo esterno che si gonfia. I canali si impilano: quando uno cresce spinge giù gli altri.

Le molle della piuma

Ogni canale ha la sua molla (PUFF: rigidità e smorzamento), poco frenata, così va oltre la sua misura e si assesta. All’apertura il pannello si srotola con un clip-path e le molle si accendono una ogni STAGGER secondi dall’alto; alla chiusura si spengono dal basso, poi il clip-path riavvolge tutto.

Il nylon in tre strati

Sopra il colore pieno ci sono tre strati con la stessa forma: un gradiente verticale che scurisce le cuciture e schiarisce il tondo (più forte quanto più il canale è gonfio); un gradiente radiale allungato, il riflesso, che scorre in orizzontale verso il puntatore con un ritardo morbido (SHEEN); e la fossetta, un altro radiale scuro al centro e chiaro sul bordo, che segue il puntatore su una sua molla.

La pressione

Il canale sotto il puntatore viene premuto di PRESS: la fossetta si scurisce, i fianchi sporgono un po’ di più, come l’aria spinta di lato, e la voce affonda di un pixel e mezzo. La scelta preme forte e dà al canale un colpo verso il basso, che la molla riporta su. Le voci sono link veri messi a metà del loro canale; le frecce vanno da una all’altra.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LOFT`	script.js	`62`	L’altezza di un canale pieno di piuma, in pixel.
`FLAT`	script.js	`0.55`	Quanto è alto un canale vuoto rispetto a uno pieno.
`PUFF`	script.js	`[190, 11]`	Le molle dei canali che si riempiono: quanto sono rigide e quanto sono frenate.
`STAGGER`	script.js	`0.08`	I secondi fra un canale che si riempie e il successivo.
`PRESS`	script.js	`1`	Quanto affonda il puntatore nella piuma (0 per niente, 2 molto).
`SHEEN`	script.js	`0.55`	Quanto è forte la luce sul nylon.

Provali nel Playground

Quando usarla

Per il negozio di un marchio di abbigliamento da montagna, di piumini, di attrezzatura outdoor o di articoli invernali: il menu ha il materiale di quello che vendi. Va bene con quattro, cinque o sei voci, una per canale.

Sul telefono

Il pannello si stringe alla larghezza dello schermo e i canali si gonfiano allo stesso modo; il tocco sceglie la voce. Senza puntatore il riflesso resta fermo e la fossetta compare solo alla scelta.

Con il movimento ridotto

Niente canali che si gonfiano e niente molle: il pannello compare in dissolvenza già pieno di piuma e scompare allo stesso modo. Sotto il puntatore la fossetta e la luce cambiano senza muovere niente.

Trappole

Il clip-path che srotola il pannello tagliava anche la sua ombra (un drop-shadow sull’svg): ai lati restava un bordo d’ombra dritto. Ora il ritaglio sporge del 40% su tre lati e taglia soltanto dal basso.
Il riflesso e la fossetta sono gradienti radiali in coordinate della pagina con raggio 1, allungati con un gradientTransform intorno al loro centro: con un raggio vero sarebbero tondi, mentre su un canale lungo e basso devono essere ovali.
Le cuciture fra i canali si ridisegnano ogni volta dopo i canali, altrimenti il canale che si gonfia sotto le coprirebbe.
Un pannello che si gonfia cambia altezza a ogni fotogramma: il viewBox e l’altezza dell’svg si riscrivono insieme ai canali, e le voci si mettono a metà del loro canale ogni volta.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 8,7 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.