Il campo sulla corda pizzicata

Moduli, Fisica, Testo, SVGGSAPImpegnativaPeso compresso: Demo 11 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: il campo email di una newsletter senza riquadro, con sotto una corda vera tesa fra due piccoli pioli. Ogni tasto la pizzica proprio sotto il cursore, cancellare la pizzica più piano; un indirizzo giusto la tende, la raddrizza e la colora d’arancio, uno sbagliato la lascia molle e bassa. Inviato, la corda si riavvolge, le lettere della conferma salgono fuori da lei e la sua punta si piega in una spunta.

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 plucked-string field</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the email field of a newsletter sign-up whose underline is a real string: every key plucks it under the caret,
         a valid address tunes it up into the accent, an address that is not right yet leaves it slack, and sending
         shortens it into the confirmation -->
    <form class="pluck" action="#" novalidate data-pluck data-autoclic>
      <div class="pluck__row">
        <div class="pluck__field" data-field>
          <label class="pluck__label" for="pluck-email" data-label>Email address</label>
          <input class="pluck__input" id="pluck-email" name="email" type="text" inputmode="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="send" maxlength="254" aria-describedby="pluck-note" aria-invalid="false" data-input>
          <span class="pluck__caret" aria-hidden="true" data-caret></span>
          <p class="pluck__done" aria-hidden="true" data-done></p>
        </div>
        <button class="send" type="submit" data-send>
          <span class="send__bg" aria-hidden="true"></span>
          <span class="send__label">Subscribe</span>
        </button>
      </div>
      <div class="pluck__lane" aria-hidden="true" data-lane>
        <svg class="pluck__string" data-svg>
          <path class="string__pegs" data-pegs/>
          <path class="string__line" pathLength="1" data-line/>
          <path class="string__tick" pathLength="1" data-tick/>
        </svg>
      </div>
      <div class="pluck__note" id="pluck-note" data-note><span class="note__line">One record a week, picked by ear.</span></div>
      <span class="sr" aria-live="polite" data-live></span>
    </form>
  </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.

22 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 campo sulla corda pizzicata» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianca la scritta Email address in grigio, grande, appoggiata dove andrà l’indirizzo; a destra la pillola nera Subscribe; sotto, una riga sottile grigia tesa fra due piccoli pioli verticali, e più in basso One record a week, picked by ear. Toccando il campo la scritta sale, si rimpicciolisce, prende peso e si allarga un poco, e nel lasciare la riga la fa vibrare appena; la corda diventa nera. Ogni lettera scritta pizzica la corda nel punto del cursore: la corda si piega in un triangolo con l’angolo sotto la lettera, lo lascia andare e oscilla, prima con due pieghe che corrono verso i pioli e poi con un’ondulazione lenta che si spegne. Cancellare la pizzica più piano e verso il basso; incollare un indirizzo la suona da un capo all’altro. Anche il puntatore che attraversa la corda la pizzica. Appena l’indirizzo è giusto la corda si tende: la vibrazione si ferma di colpo, la nota sale, la riga si ispessisce e diventa arancio. Premendo Subscribe con un indirizzo che non va, la corda si allenta: si incurva verso il basso, oscilla lenta e bassa e si spegne, e sotto compare cosa manca (Add the ending, like .com.); appena l’indirizzo torna giusto si tende di nuovo e il messaggio se ne va. Con un indirizzo giusto, invece, l’indirizzo e il pulsante salgono e svaniscono, la corda si riavvolge verso il piolo di sinistra vibrando vicino alla punta, come un piolo che si gira, si ferma un pixel oltre e torna; poi le lettere di You’re on the list. salgono fuori dalla corda una dopo l’altra, sottili e strette, prendono peso posandosi e ognuna pizzica la corda dove atterra. Alla fine la punta della corda si piega in una spunta e sotto si legge Sent to e l’indirizzo, con Change per tornare al campo: le lettere ricadono nella corda, la corda si riallunga con un piccolo rimbalzo e l’indirizzo torna al suo posto.

Come funziona

Una corda vera: l’equazione delle onde

La riga è l’equazione delle onde in una dimensione risolta su 96 punti con le differenze finite (il metodo leapfrog: lo spostamento nuovo viene dall’attuale, dal precedente e dalla curvatura fra i vicini), con i due capi fermi. La velocità delle onde viene dalla nota (PITCH, TAUT, SLACK) e dalla lunghezza intera della corda; il passo di tempo la segue, così il rapporto fra velocità, passo e distanza fra i punti resta a 0,5 e la corda non esplode nemmeno corta e acuta. Uno smorzamento DAMP spegne tutto, e un termine viscoso (la curvatura di adesso meno quella di prima) spegne prima le onde corte: una pizzicata comincia con due pieghe nette e finisce come l’oscillazione lenta della corda intera.

La pizzicata sotto il cursore

Il punto del cursore si misura con measureText su un canvas nel carattere dell’input, meno lo scorrimento dell’input. Una pizzicata è un dito che tira la corda in un triangolo con l’angolo in quel punto, in 12 millesimi di secondo, e la lascia: lo stesso spostamento si aggiunge allo stato di adesso e a quello di prima, così la corda parte ferma. Un tasto vale KEY pixel verso l’alto, una cancellazione KEY per SOFT verso il basso; un indirizzo incollato o riempito dal browser è una serie di pizzicate da sinistra a destra in una timeline GSAP. Il puntatore che passa sopra la riga la pizzica con la sua velocità.

La tensione: tesa, molle, a riposo

Nota, curvatura, spessore e colore stanno in un oggetto che GSAP porta da uno stato all’altro. Indirizzo giusto: la nota sale a TAUT, lo spessore va a 1,6 pixel, il colore all’accento, e per un attimo lo smorzamento è cinque volte più forte, così la corda si raddrizza come tirata da una mano. Indirizzo che non va: la nota scende a SLACK e la corda si incurva di SAG pixel con una parabola aggiunta ai punti (elastic.out), poi una pizzicata al centro. Lo spostamento si disegna passando da una tangente iperbolica, che lo tiene entro REACH pixel senza spigoli.

La riga ridisegnata, e il ciclo che dorme

A ogni fotogramma il tracciato SVG si riscrive con curve quadratiche che passano per i punti, e i pioli seguono i capi. Il ciclo sta sul ticker di GSAP, col passo limitato a 1/30 di secondo; si addormenta quando la corda è ferma e niente sta animando il suo stato (gsap.isTweening), e ogni tween che la cambia lo risveglia quando parte. L’etichetta sale con tre assi di Roboto Flex: dimensione da 20 a 12 pixel (con l’asse opsz che la segue da solo), peso da 380 a 620, larghezza da 100 a 114, con un rimbalzo di un pixel.

L’invio, la conferma e l’anteprima

All’invio il capo destro della corda scorre fino alla fine della conferma (misurata prima, lettera per lettera, al suo peso finale) in WAIT secondi, con piccole pizzicate vicino alla punta, e la corda accorciata canta più acuta perché la velocità delle onde non cambia. Le lettere di DONE stanno in scatole larghe quanto la lettera finita; dentro, il glifo sale da sotto la corda con peso 260 e larghezza 84 e si posa a 560 e 100 con back.out, pizzicando la corda sotto di sé. La spunta è un tracciato che parte dal capo della corda e si disegna con stroke-dashoffset. Un clic da script sul modulo (detail 0, l’anteprima della libreria) fa un giro intero in una timeline GSAP, senza prendere il fuoco e con un cursore disegnato.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PITCH`	script.js	`3`	La nota della corda a riposo, in oscillazioni al secondo: più alta, vibra più svelta.
`TAUT`	script.js	`6.5`	La nota quando l’indirizzo è giusto: la corda accordata più in alto.
`SLACK`	script.js	`1.4`	La nota quando l’indirizzo non va ancora: bassa e molle.
`SAG`	script.js	`4`	Quanto si incurva in mezzo la corda allentata, in pixel.
`KEY`	script.js	`5`	Quanto forte un tasto pizzica la corda, in pixel.
`SOFT`	script.js	`0.4`	Quanto forte la pizzica una lettera cancellata, come parte di un tasto.
`DAMP`	script.js	`2.2`	Quanto in fretta la corda si calma: 1 suona a lungo, 6 è una corda smorzata.
`REACH`	script.js	`9`	Il massimo che la corda può allontanarsi dalla riga, in pixel.
`STRUM`	script.js	`true`	Se anche il puntatore che attraversa la corda la pizzica.
`WAIT`	script.js	`0.7`	Quanti secondi dura l’iscrizione, mentre la corda si riavvolge.
`DONE`	script.js	`You’re on the list.`	La frase in cui si trasforma la corda dopo l’invio.

Provali nel Playground

Quando usarla

Nell’iscrizione a una newsletter, in fondo a un articolo o a una pagina di presentazione, in un sito di musica o di suono: dove il modulo è uno solo, ha bisogno di poco spazio e deve farsi notare senza riquadri. La corda dice da sola se l’indirizzo è pronto, prima ancora di premere il pulsante.

Sul telefono

Il modulo prende la larghezza dello schermo (358 pixel su un telefono di 390), il campo resta alto 60, l’indirizzo scende a 18 pixel e la pillola a 40. Un tocco apre la tastiera per le email, con la @ e il punto, e il tasto Invio dice Send; ogni lettera pizzica la corda come col computer. Il dito che scorre attraverso la riga la pizzica come il puntatore. Un indirizzo più lungo del campo scorre, e la pizzicata segue il cursore anche scorrendo.

Con il movimento ridotto

La corda non vibra e non si riavvolge: resta dritta, e cambia solo colore e spessore in dissolvenza (grigia a riposo, nera mentre si scrive, arancio con un indirizzo giusto). Con un indirizzo che non va la curva compare già al suo posto, senza oscillare. L’etichetta svanisce e ricompare in alto, senza salire; all’invio campo e conferma si scambiano in dissolvenza, con la corda già corta e la spunta già disegnata.

Trappole

La prima pizzicata era una forza a campana tenuta per 34 millesimi di secondo: con le onde a quasi 8000 pixel al secondo l’onda scappava prima che il dito finisse di tirare, e un tasto da 5 pixel spostava la corda di meno di uno. Ora il dito tira un triangolo intero, con l’angolo sotto il cursore, in 12 millesimi, come una corda vera pizzicata.
Il ciclo contava i tween in corso per sapere quando dormire, ma una timeline fermata a metà non avvisa i suoi tween: il conto non tornava a zero e il ciclo non dormiva mai. Ora guarda gsap.isTweening sullo stato della corda e ogni tween lo risveglia quando parte.
Fermare i tween dell’etichetta per nome delle proprietà non ferma quelli delle variabili CSS: andando subito dal campo al pulsante l’etichetta tornava giù grande ma restava piccola e in grassetto. Ora il tween dell’etichetta si tiene da parte e si ferma tutto intero. E fermare tutti i tween dell’etichetta, all’arrivo dei caratteri, spegneva la sua dissolvenza d’entrata e la lasciava invisibile.
Nello scambio delle righe sotto il campo la nuova entrava mentre la vecchia stava ancora svanendo e per un attimo si leggevano sovrapposte: la nuova ora aspetta che la vecchia se ne sia andata.

Librerie

GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.

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

Collaudo

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