La fisarmonica col mantice

Fisarmoniche, 3D, Transizioni, FisicaGSAP, Solo CSSImpegnativaPeso compresso: Demo 13 KBGSAP 28 KBGratisScarica lo zip

Le domande frequenti di un negozio di fisarmoniche, fatte come il lato dei tasti di una fisarmonica vera: tasti d’avorio e d’ebano a sinistra, che da una domanda all’altra formano una tastiera sola, la domanda su una placca di madreperla e una levetta cromata a destra. Aprendone una, sotto di lei si distende un mantice di cartone telato rosso, piega dopo piega, in 3D vero: luce e ombra sulle facce, angolari cromati sulle pieghe, il bordo che va dentro e fuori. La risposta è stampata in oro sulle pieghe, una riga per faccia, e si legge appena le pieghe si appiattiscono; chiudendola il mantice si richiude a soffietto.

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 bellows accordion</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-serif@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the questions of a shop that sells and mends accordions. Every question is a piece of the instrument's treble
         side: piano keys on the left, a mother-of-pearl plate with the question, a chrome register tab on the right.
         Opening one, a red bellows unfolds under it, pleat after pleat, and the answer is stamped in gold on the
         pleats, one line on each, readable once they have opened out. The bellows is drawn by the script: every face
         is a real element stretched onto its projected shape with a matrix3d. The answer itself stays a plain
         paragraph in a region for screen readers -->
    <div class="faq" data-faq data-autoclic>
      <div class="faq__item" data-item>
        <h3 class="faq__head"><button class="faq__q" type="button" id="faq-q1" aria-expanded="false" aria-controls="faq-a1"><span class="faq__keys" aria-hidden="true" data-keys></span><span class="faq__plate" aria-hidden="true"><span class="faq__pearl"></span><span class="faq__sheen"></span></span><span class="faq__text">Can I try an accordion before buying?</span><span class="faq__tab" aria-hidden="true"><span class="faq__rocker"><svg viewBox="0 0 16 10" focusable="false"><path class="faq__cut-lo" d="M2.5 2.6 8 7.4 13.5 2.6"/><path class="faq__cut" d="M2.5 2 8 6.8 13.5 2"/></svg></span></span></button></h3>
        <div class="faq__bellows" aria-hidden="true" data-bellows></div>
        <div class="faq__a" id="faq-a1" role="region" aria-labelledby="faq-q1" hidden><p data-answer>Of course. Book a slot and we set aside a quiet room with three sizes ready for you, and someone who plays shows you how the bellows should feel. Stay as long as you like.</p></div>
      </div>
      <div class="faq__item" data-item>
        <h3 class="faq__head"><button class="faq__q" type="button" id="faq-q2" aria-expanded="false" aria-controls="faq-a2"><span class="faq__keys" aria-hidden="true" data-keys></span><span class="faq__plate" aria-hidden="true"><span class="faq__pearl"></span><span class="faq__sheen"></span></span><span class="faq__text">Which size suits a beginner?</span><span class="faq__tab" aria-hidden="true"><span class="faq__rocker"><svg viewBox="0 0 16 10" focusable="false"><path class="faq__cut-lo" d="M2.5 2.6 8 7.4 13.5 2.6"/><path class="faq__cut" d="M2.5 2 8 6.8 13.5 2"/></svg></span></span></button></h3>
        <div class="faq__bellows" aria-hidden="true" data-bellows></div>
        <div class="faq__a" id="faq-a2" role="region" aria-labelledby="faq-q2" hidden><p data-answer>Most adults start on a 72-bass with 34 treble keys: light enough to hold through a lesson, wide enough for almost any song. Children usually begin on a 48-bass.</p></div>
      </div>
      <div class="faq__item" data-item>
        <h3 class="faq__head"><button class="faq__q" type="button" id="faq-q3" aria-expanded="false" aria-controls="faq-a3"><span class="faq__keys" aria-hidden="true" data-keys></span><span class="faq__plate" aria-hidden="true"><span class="faq__pearl"></span><span class="faq__sheen"></span></span><span class="faq__text">Do you repair old instruments?</span><span class="faq__tab" aria-hidden="true"><span class="faq__rocker"><svg viewBox="0 0 16 10" focusable="false"><path class="faq__cut-lo" d="M2.5 2.6 8 7.4 13.5 2.6"/><path class="faq__cut" d="M2.5 2 8 6.8 13.5 2"/></svg></span></span></button></h3>
        <div class="faq__bellows" aria-hidden="true" data-bellows></div>
        <div class="faq__a" id="faq-a3" role="region" aria-labelledby="faq-q3" hidden><p data-answer>Our workshop retunes reeds, replaces pads and valves and patches tired bellows. Bring yours in for a free look and you get a written quote within a week.</p></div>
      </div>
      <div class="faq__item" data-item>
        <h3 class="faq__head"><button class="faq__q" type="button" id="faq-q4" aria-expanded="false" aria-controls="faq-a4"><span class="faq__keys" aria-hidden="true" data-keys></span><span class="faq__plate" aria-hidden="true"><span class="faq__pearl"></span><span class="faq__sheen"></span></span><span class="faq__text">Can I rent one before I commit?</span><span class="faq__tab" aria-hidden="true"><span class="faq__rocker"><svg viewBox="0 0 16 10" focusable="false"><path class="faq__cut-lo" d="M2.5 2.6 8 7.4 13.5 2.6"/><path class="faq__cut" d="M2.5 2 8 6.8 13.5 2"/></svg></span></span></button></h3>
        <div class="faq__bellows" aria-hidden="true" data-bellows></div>
        <div class="faq__a" id="faq-a4" role="region" aria-labelledby="faq-q4" hidden><p data-answer>Any student model is yours for 25 euros a month. If you buy it within six months, every month you have paid comes off the price.</p></div>
      </div>
      <div class="faq__item" data-item>
        <h3 class="faq__head"><button class="faq__q" type="button" id="faq-q5" aria-expanded="false" aria-controls="faq-a5"><span class="faq__keys" aria-hidden="true" data-keys></span><span class="faq__plate" aria-hidden="true"><span class="faq__pearl"></span><span class="faq__sheen"></span></span><span class="faq__text">How should I store it at home?</span><span class="faq__tab" aria-hidden="true"><span class="faq__rocker"><svg viewBox="0 0 16 10" focusable="false"><path class="faq__cut-lo" d="M2.5 2.6 8 7.4 13.5 2.6"/><path class="faq__cut" d="M2.5 2 8 6.8 13.5 2"/></svg></span></span></button></h3>
        <div class="faq__bellows" aria-hidden="true" data-bellows></div>
        <div class="faq__a" id="faq-a5" role="region" aria-labelledby="faq-q5" hidden><p data-answer>In its case at room temperature, away from radiators and sunny windows, with the bellows strap closed so the folds rest evenly.</p></div>
      </div>
      <!-- the end of the instrument under the last question -->
      <div class="faq__foot" aria-hidden="true" data-foot></div>
      <!-- the answers are cut into lines here, at the width of the bellows -->
      <div class="faq__measure" aria-hidden="true" data-measure></div>
    </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.

35 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 «La fisarmonica col mantice» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco, da sola al centro, una lista di cinque domande che sembra il lato dei tasti di una fisarmonica, con gli angoli in alto e in basso arrotondati. A sinistra corre una tastiera di tasti color avorio con i tasti neri in mezzo, una sola dall’alto in basso; accanto, dietro un filetto cromato, ogni domanda è scritta in scuro su una placca di madreperla, bianca con riflessi rosa, verdi e azzurri, e a destra ha una levetta cromata con una freccetta incisa: Can I try an accordion before buying?, Which size suits a beginner?, Do you repair old instruments?, Can I rent one before I commit?, How should I store it at home?. All’arrivo la lista sale appena e un dito invisibile fa una scala su tutti i tasti dall’alto in basso; poi si apre la seconda domanda. Aprendo una domanda tre dei suoi tasti restano giù come un accordo, la levetta si gira e sotto la domanda si distende un mantice di tela rossa: prima la piega vicina ai tasti, poi le altre verso il basso. Le pieghe sono vere, in prospettiva: le facce che guardano in su prendono la luce, quelle che guardano in giù restano in ombra, il fondo di ogni piega è più scuro e i bordi a destra e a sinistra vanno dentro e fuori a zigzag, con un nastro scuro e un filo d’oro lungo i lati e un angolare cromato su ogni piega esterna. Su ogni faccia c’è una riga della risposta, in lettere d’oro: schiacciata e quasi spenta finché la piega è chiusa, si stende e si accende man mano che la piega si apre, e il riflesso dell’oro cambia con l’inclinazione della faccia. Il mantice va un poco oltre, si appiattisce e torna con un piccolo rimbalzo, e le domande sotto scendono per fargli posto. Aprendone un’altra quella aperta si richiude a soffietto dal basso, i suoi tasti tornano su e la levetta si rigira. Sotto il mouse i tasti della domanda fanno una scala, la madreperla cambia colore seguendo il puntatore, le lettere diventano più piene senza allargarsi e il mantice si socchiude di un dito, quanto basta a vedere la tela rossa.

Come funziona

Le pieghe del mantice in 3D

Ogni piega è fatta di due facce di tela lunghe quanto una riga (FACE, 26 pixel) incernierate sulle pieghe: le pieghe esterne stanno davanti, a profondità zero, e quelle interne indietro di FACE per il seno dell’angolo della piega. Più la piega è aperta, più l’angolo scende e le facce si appiattiscono: l’altezza di ogni faccia è FACE per il coseno, quindi la tela non si allunga mai. Ogni piega ha il suo angolo, da 90 gradi (chiusa) a REST (aperta): le pieghe vicine ai tasti partono prima, quelle in basso dopo, di CASCADE.

Una matrix3d per ogni faccia

Ogni piega viene proiettata da un occhio a EYE pixel davanti al centro del mantice: le pieghe interne, più lontane, escono più strette, e il bordo va a zigzag. Ogni faccia è un elemento vero largo quanto la lista, con la sua riga di testo, il nastro, gli angolari e le ombre, e viene stirato sul suo quadrilatero proiettato con una matrix3d calcolata a mano: l’omografia che porta un rettangolo su quattro punti (il metodo di Heckbert). Le facce non si sovrappongono mai, perché ognuna va da una piega alla successiva; mezzo pixel in più sopra e sotto copre le fessure dell’antialiasing.

La luce dalla pendenza

La normale di ogni faccia viene dalla sua pendenza (l’altezza e la profondità che percorre), e la luce arriva dall’alto e da davanti: quanto la faccia si gira verso la luce decide un velo scuro o un velo caldo sopra la tela, e una sfumatura verso la piega interna scurisce il fondo in proporzione alla profondità. La riga d’oro è un gradiente ritagliato sul testo, che scorre in verticale con la luce della faccia: il riflesso corre sulle lettere mentre la piega si apre. La riga compare solo quando la faccia è abbastanza dritta da leggerla.

Le righe della risposta

La risposta vera resta un paragrafo in una regione con aria-labelledby, nascosta alla vista ma letta dagli screen reader. Per il mantice lo script la compone parola per parola in un contenitore nascosto largo quanto la colonna e raccoglie le parole che hanno la stessa cima: sono le righe. Il mantice ha una faccia per riga più una di tela vuota sopra e sotto, sempre in numero pari, così comincia e finisce su una piega esterna. Se la larghezza cambia, anche a metà apertura, le righe si ritagliano e il mantice si rifà.

Una molla, i tasti e il riposo

Quanto è aperto il mantice è una molla con rigidezza e smorzatura ricavate da una durata e da un rimbalzo (OPEN e BOUNCE), a passi di 1/240 di secondo col passo del fotogramma limitato a 1/30; oltre l’apertura le pieghe si appiattiscono ancora un poco. Le domande sotto si muovono solo con translate3d, e il ciclo gira sul ticker di GSAP solo finché qualcosa si muove. I tasti sono generati dallo script con lo schema vero della tastiera (do re mi fa sol la si, coi neri dopo do, re, fa, sol e la) e premuti con una variabile CSS animata da GSAP; la levetta si gira con rotationX in prospettiva.

Tastiera, tocco e anteprima

Le domande sono button dentro un h3 con aria-expanded e aria-controls; frecce, Home e End passano da una all’altra, e col fuoco da tastiera il mantice si socchiude come sotto il mouse. Il dito che tocca una domanda fa la scala e socchiude il mantice, il tocco lo apre. La lista ha data-autoclic: il clic dell’anteprima, che arriva da uno script, fa un giro intero (si apre la terza domanda, poi la quinta, poi si torna alla seconda) e i clic da script che arrivano durante il giro vengono ignorati.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FIRST`	script.js	`1`	La domanda aperta all’apertura della pagina, da 0; −1 per nessuna.
`ONLY_ONE`	script.js	`true`	Aprendo una domanda si chiude quella aperta; con false se ne possono aprire tante.
`OPEN`	script.js	`1.25`	I secondi che il mantice ci mette ad aprirsi o a chiudersi.
`BOUNCE`	script.js	`0.14`	Quanto il mantice va oltre l’apertura e torna (0 per niente).
`REST`	script.js	`18`	Quanto restano piegate le pieghe a mantice aperto, in gradi (0 piatte).
`CASCADE`	script.js	`0.6`	Quanto le pieghe si aprono una dopo l’altra dai tasti in giù (0 tutte insieme).
`EYE`	script.js	`1300`	La distanza dell’occhio dal mantice, in pixel: meno, più profondo il 3D.
`PEEK`	script.js	`0.15`	Quanto si socchiude il mantice sotto il mouse, da 0 a 1.
`GLISS`	script.js	`0.04`	I secondi fra un tasto e il successivo nella scala sotto il mouse.

Provali nel Playground

Quando usarla

Per le domande frequenti di un negozio di strumenti, di una scuola di musica, di un laboratorio artigiano o di qualunque bottega che ha un oggetto bello da raccontare: ovunque le risposte sono tante, se ne legge una alla volta e il sito può permettersi un pezzo d’arredo vero. Il mantice rosso dice da lontano quale risposta è aperta, e i tasti premuti lo ripetono.

Sul telefono

La lista è larga al massimo 640 pixel e sul telefono si stringe allo schermo con 16 pixel di margine (358 su un telefono di 390). Le righe chiuse sono alte 80 pixel sul computer e 72 sul telefono, come le altre fisarmoniche della libreria; la tastiera scende a 46 pixel, le domande a 16,5 e vanno su due righe, le facce del mantice a 25 pixel e le risposte a 15, su quattro o cinque righe e quindi su più pieghe. Il dito che tocca una domanda fa la scala sui tasti e socchiude il mantice, come il mouse sopra; il tocco lo apre. Stesse pieghe, stessa luce, stessa molla.

Con il movimento ridotto

Niente pieghe che si muovono: il mantice compare già aperto al suo posto, in dissolvenza, e si richiude di colpo; i tasti dell’accordo vanno giù e la levetta si gira senza movimento. Niente scala sui tasti, niente mantice socchiuso sotto il mouse e niente riflesso che corre sulla madreperla. All’apertura la lista compare in dissolvenza con la seconda domanda già aperta.

Trappole

Con l’occhio a 760 pixel le facce a riposo uscivano trapezi abbastanza diversi da piegare le righe: una sì e una no sembravano in corsivo, inclinate da una parte e dall’altra. È prospettiva giusta, ma si leggeva come un errore: l’occhio è andato a 1300 pixel, e il bordo fa ancora lo zigzag quando le pieghe sono profonde.
Le facce proiettate si toccano esattamente sulle pieghe, e l’antialiasing lasciava fra l’una e l’altra un filo del fondo bianco. Ogni quadrilatero è allungato di mezzo pixel sopra e sotto, e la faccia dopo copre la cucitura.
Con le pieghe tutte allo stesso angolo il mantice si apriva come una saracinesca e le righe si leggevano tutte insieme solo alla fine. Ogni piega ha ora il suo ritardo, dai tasti in giù: le righe si accendono una dopo l’altra, nell’ordine in cui si leggono.
Una riga stampata su una faccia quasi perpendicolare diventava una striscia di segni schiacciati che sembrava testo rotto. La riga compare solo quando la faccia supera una certa dritta (il coseno fra 0,42 e 0,86), e il mantice socchiuso sotto il mouse mostra solo tela.
Le righe dipendono dal carattere: tagliate prima che Roboto Serif fosse arrivato, uscivano lunghe o corte. Lo script aspetta il carattere (con un limite di 1,2 secondi) e ritaglia tutto quando arriva.
Il riquadro del fuoco sulla placca stava sotto la madreperla e il suo riflesso, che la coprono tutta, e non si vedeva. È passato sul velo lucido che sta sopra.
Il clic dell’anteprima arriva da uno script sulla lista: se ogni clic aprisse una domanda sola, il video resterebbe a metà. Un clic da script fa partire un giro intero in una timeline di GSAP, e i clic che arrivano durante il giro non lo fanno ripartire.

Librerie

GSAP 3.15.0, Roboto Serif (font variabile, con gli assi del peso, della larghezza, del corpo ottico e del grado) 5.3.0.

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