La chitarra che si costruisce allo scroll

Scroll, SVGGSAPImpegnativaPeso compresso: Demo 16 KBGSAP + ScrollTrigger 45 KBLenis 5,3 KBGratisScarica lo zip

Scorri dentro l’anteprima

L’intestazione di una bottega di chitarre inventata, nello stile ricco: scendendo, sul banco di lavoro davanti alla parete di pannello forato con gli attrezzi, una tavola di abete diventa una chitarra acustica. Il seghetto alternativo taglia il corpo lungo la dima e schizza segatura, la fresa intarsia la rosetta anello per anello, il manico di mogano entra e i tasti cadono uno alla volta, poi le meccaniche, il ponte e il battipenna, la verniciatura a sunburst e la lucidatura, le sei corde tirate fino alle meccaniche che girano; alla fine la chitarra suona e arriva il titolo. Le corde si pizzicano col puntatore o col dito.

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 guitar built on scroll</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/outfit@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a made-up guitar workshop, Halden Guitars. The stage sticks while you scroll: on the bench a spruce board is cut
       into a body, the rosette is inlaid, the neck slides in and the frets drop one by one, the tuners and the bridge go
       on, the sunburst is sprayed and polished, the strings are pulled tight and at the end the guitar is strummed.
       Everything is SVG drawn by the script -->
  <main>
    <section class="bottega" data-bottega>
      <div class="palco" data-palco>
        <svg class="scena" data-scena aria-hidden="true"></svg>

        <header class="testata">
          <p class="marchio">
            <svg viewBox="0 0 32 32" aria-hidden="true">
              <path class="marchio__corpo" d="M11 4.5c-3 0-4.6 2.2-4.6 4.8 0 1.7.8 2.9.8 4.3 0 1.4-2.7 2.6-2.7 7.2C4.5 25.6 7.7 28 12 28s7.5-2.4 7.5-7.2c0-4.6-2.7-5.8-2.7-7.2 0-1.4.8-2.6.8-4.3 0-2.6-1.6-4.8-4.6-4.8Z"/>
              <circle class="marchio__buca" cx="12" cy="17.5" r="2.4"/>
              <path class="marchio__manico" d="M15.6 12.8L26.5 3.5l1.6 1.8-10.9 9.3Z"/>
            </svg>
            <span data-brand>Halden</span>
          </p>
          <p class="sotto">Handmade acoustic guitars</p>
        </header>

        <div class="fase-box" data-fase-box>
          <p class="fase" data-fase><span class="fase__nome" data-fase-nome>The board</span><span class="fase__nota" data-fase-nota>Alpine spruce, seasoned ten years</span></p>
          <p class="ore"><span class="ore__etichetta">Bench hours</span> <span class="ore__numero" data-ore>0</span></p>
        </div>

        <div class="finale" data-finale>
          <p class="finale__sopra">Built to order</p>
          <h1 class="finale__titolo">Built by hand. <em>Tuned by ear.</em></h1>
          <p class="finale__testo">One guitar at a time, from the board to the first chord, in a small workshop by the river.</p>
          <a class="tasto" href="#" data-tasto><span>Order a guitar</span></a>
        </div>

        <p class="cenno" data-cenno>
          Scroll to build
          <svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
        </p>
      </div>
    </section>

    <section class="dopo">
      <p class="dopo__marchio">Halden Guitars</p>
      <h2 class="dopo__titolo">Twelve guitars a year.</h2>
      <p class="dopo__testo">Every one is cut, braced, sprayed and set up on the same bench. Pass by on Saturdays and play one.</p>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.

37 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 chitarra che si costruisce allo scroll» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Davanti al pannello forato di una bottega, con il seghetto, gli scalpelli, la dima, il morsetto, il righello, le corde di ricambio e la mensola coi barattoli, una lampada verde illumina il banco di noce. Sulla culla c’è una tavola di abete con le sue venature. Scendendo, il seghetto alternativo segue la linea della dima tutto intorno e schizza segatura: la tavola cade e resta il corpo con il suo filetto color osso. La fresa gira e scava la buca, e la rosetta arriva un anello alla volta, rosso, verde e osso. Il manico di mogano entra da destra con un rimbalzo, poi diciannove tasti di nichel cadono uno dopo l’altro con un piccolo scatto e i segni di madreperla spuntano al terzo, quinto, settimo, nono, dodicesimo, quindicesimo e diciassettesimo tasto. Le sei meccaniche si avvitano, arrivano il capotasto, il ponte con i suoi piroli e il battipenna tartarugato. Una pistola a spruzzo passa avanti e indietro e stende il sunburst, dal cuore ambra ai bordi scuri, e una striscia di luce lucida il corpo. Le sei corde, tre di bronzo e tre d’acciaio, si tirano dal ponte alle meccaniche, che girano mentre si tendono. In fondo la chitarra suona, gli anelli del suono escono dalla buca e arriva il titolo con il pulsante; poi una pennata ogni tanto. Passando col puntatore o col dito sulle corde, le corde si pizzicano e vibrano.

Come funziona

Un numero solo, quanto è avanti il lavoro

Lo scroll muove con scrub un oggetto da 0 a 1. Ogni fase della costruzione è un tratto di quel numero (il taglio da 0,05 a 0,2, la rosetta da 0,21 a 0,31 e così via) e ogni pezzo legge solo il suo tratto: risalendo, la chitarra si smonta allo stesso modo.

Il taglio lungo il disegno

La linea del corpo è un tracciato SVG: il seghetto sta nel punto che getPointAtLength dà alla lunghezza tagliata, e la linea si disegna dietro di lui con stroke-dasharray. A taglio finito la tavola scende e sparisce, e resta il corpo.

I tasti alla distanza giusta

I diciannove tasti stanno dove li metterebbe un liutaio: ogni tasto toglie un dodicesimo d’ottava, quindi la distanza dal capotasto è la scala per 1 meno 2 alla meno n dodicesimi. Cadono dal dodicesimo verso il corpo con back.out, sfalsati.

Le corde che vibrano

Ogni corda è un tracciato dal ponte al capotasto e alla meccanica, con una curva quadratica nel mezzo: la vibrazione sposta il punto di controllo con un seno che si smorza. Una seconda corda più chiara, spostata dall’altra parte, fa vedere l’ampiezza. Il puntatore pizzica una corda quando passa dall’altra parte della sua linea.

Il tempo a parte

La segatura, la nebbia della vernice, la polvere nella luce, la lampada che dondola e le corde che suonano vanno sul ticker di GSAP; la gravità della segatura segue la rotazione della chitarra, così cade sempre verso il banco.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`BRAND`	script.js	`'Halden'`	Il nome della bottega nella testata e sulla paletta.
`SCREENS`	script.js	`6`	Quanto dura la costruzione, in schermate di scroll.
`SAWDUST`	script.js	`1`	Quanta segatura schizza il seghetto, da 0 a 2.
`RING`	script.js	`1`	Quanto suonano le corde pizzicate: 0,5 poco, 2 a lungo.
`STRUM`	script.js	`3.6`	I secondi fra una pennata e l’altra a chitarra finita.
`LAMP`	script.js	`1`	Quanto è forte il cono di luce della lampada (0 spenta).

Provali nel Playground

Quando usarla

Per l’intestazione di una bottega di liuteria, di un negozio di strumenti musicali, di una scuola di musica o di una falegnameria; per raccontare come si fa un prodotto artigianale, dal materiale grezzo al pezzo finito, mentre si scende.

Sul telefono

La stessa animazione con le misure adattate: su uno schermo stretto la chitarra sta in piedi sul suo supporto, con gli attrezzi ai lati, e alla fine si sdraia sul banco sotto il titolo, che va in alto e al centro. Le corde si pizzicano col dito.

Con il movimento ridotto

Niente costruzione continua, niente segatura, nebbia, vibrazioni e scorrimento morbido: la costruzione è divisa in momenti fermi (la tavola, il corpo, la rosetta, i tasti, le meccaniche, la vernice, le corde, il titolo) che sfumano uno nell’altro scendendo.

Trappole

Un tratto con stroke-dasharray lungo zero e la punta tonda disegna comunque un puntino: le corde non ancora montate vanno nascoste con l’opacità.
Quando la chitarra è ruotata (in piedi sul telefono) la gravità della segatura va girata nelle coordinate della chitarra, sennò la segatura cade di lato.
Per pizzicare le corde col puntatore serve la posizione nelle coordinate della chitarra: getScreenCTM().inverse() sul gruppo, che tiene conto di traslazione, rotazione e scala.

Librerie

GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Outfit (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.

Collaudo

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