Il menu che si apre dal pulsante
Menu, Transizioni, Testo
Gratis
Tutti i componenti
La firma sul foglio
Un foglio da firmare: l’inchiostro segue la penna e si assottiglia quando va veloce, esce blu e bagnato e si asciuga scuro; Undo riavvolge l’ultimo tratto fino al suo inizio, Done ci batte sopra un timbro, e il nome si può anche scrivere coi tasti, che lo mettono giù a mano.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The signature pad</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/literata@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/caveat@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the signature pad: the ink thins with speed and dries from blue to dark, Undo winds the last stroke back, Done
stamps the sheet; the name can also be typed, and comes out handwritten -->
<section class="sign" aria-labelledby="sign-title" data-sign data-autoclic>
<header class="sign__head">
<h2 class="sign__title" id="sign-title">Sign the agreement</h2>
<p class="sign__note">Villa Rosa · 3 nights from 14 October</p>
</header>
<div class="sign__tabs" role="tablist" aria-label="How to sign">
<button class="tab" type="button" role="tab" aria-selected="true" aria-controls="sign-pad" id="tab-draw" data-tab="draw">Draw</button>
<button class="tab" type="button" role="tab" aria-selected="false" aria-controls="sign-pad" id="tab-type" data-tab="type" tabindex="-1">Type</button>
<span class="tab__mark" aria-hidden="true" data-mark></span>
</div>
<div class="pad" id="sign-pad" role="tabpanel" aria-labelledby="tab-draw" data-pad>
<canvas class="pad__ink" role="img" aria-label="No signature yet" data-canvas></canvas>
<p class="pad__typed" aria-hidden="true" data-typed></p>
<span class="pad__hint" aria-hidden="true" data-hint>Sign here</span>
<svg class="pad__cross" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 5l10 10M15 5L5 15"/></svg>
<span class="pad__line" aria-hidden="true"></span>
<div class="pad__stamp" aria-hidden="true" data-stamp><span>Signed</span><small data-date></small></div>
<svg class="pad__nib" viewBox="0 0 40 40" aria-hidden="true" data-nib><path d="M20 38 L13 24 L17 6 Q20 2 23 6 L27 24 Z"/><path d="M20 38 L20 25"/></svg>
</div>
<label class="sign__type" hidden data-type-row>
<span class="sr">Your full name</span>
<input class="sign__input" type="text" placeholder="Type your full name" autocomplete="name" maxlength="28" data-input>
</label>
<div class="sign__actions">
<button class="btn" type="button" data-undo disabled>Undo</button>
<button class="btn" type="button" data-clear disabled>Clear</button>
<button class="btn btn--main" type="button" data-done disabled>Done</button>
</div>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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.
24 valori da cambiare
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 firma sul foglio» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un foglio color carta con Sign the agreement e Villa Rosa · 3 nights from 14 October; sotto, due schede, Draw e Type, con una pastiglia bianca sotto quella scelta, il riquadro della firma con una crocetta, una riga tratteggiata e Sign here, e i pulsanti Undo, Clear e Done. Disegnando col dito, col mouse o con una penna, l’inchiostro segue la mano e si assottiglia dove la mano va veloce; esce di un blu acceso, bagnato, e in poco meno di un secondo si asciuga in un blu quasi nero. Col mouse un pennino segue il puntatore sul foglio, si inclina un poco col movimento e si abbassa mentre scrive. Undo riavvolge l’ultimo tratto all’indietro fino al punto in cui era cominciato; Clear riavvolge tutti i tratti, dall’ultimo al primo. Done fa cadere sul foglio un timbro rosso, Signed con la data del giorno, che arriva grande e inclinato, si posa con un colpo e fa sobbalzare il foglio; il pulsante diventa Sign again. In Type il nome scritto nella casella compare a mano sulla riga, ogni lettera nuova con una piccola rotazione.
Come funziona
L’inchiostro
Ogni tratto è un elenco di punti con la loro larghezza: la velocità fra due punti (pixel al millisecondo) porta la larghezza da WIDTH[1] verso WIDTH[0] man mano che si avvicina a SPEED, e ogni punto si avvicina solo un poco alla larghezza nuova, così la linea non salta. Si disegna su un canvas con curve che passano per i punti di mezzo (quadraticCurveTo), ogni pezzo spesso quanto i suoi due estremi; il puntatore dà anche i punti raccolti fra due fotogrammi (getCoalescedEvents).
Bagnato e asciutto
Ogni tratto ha un suo stato di asciugatura, da 0 a 1 in DRY secondi dalla fine del tratto: il suo colore è il miscuglio dei due colori del foglio (--wet e --ink, letti dal CSS) secondo quello stato.
Riavvolgere
Un tratto ricorda quanti dei suoi punti si vedono: Undo porta quel numero a zero in REWIND secondi con power2.in, così il tratto si ritira dalla fine all’inizio, poi lo toglie; Clear fa lo stesso con tutti, l’ultimo per primo e un poco sovrapposti.
Il timbro e il nome scritto
Il timbro parte STAMP volte più grande e più inclinato e scende sul foglio in 0,32 secondi con power3.in, poi il foglio sobbalza (keyframes su y e scale) e il timbro si gonfia un attimo. Il nome scritto è nel font Caveat: le lettere già scritte restano, le nuove arrivano piccole, girate e un poco più in basso e si posano con back.out.
Tasti e anteprima
Draw e Type sono schede (role tablist, le frecce passano dall’una all’altra) e Type è il modo di firmare senza disegnare: chi usa i tasti scrive il nome e firma con Invio. Il canvas dice se c’è una firma (role img) e una regione aria-live dice Signed o che il foglio è stato pulito. Un clic da script (l’anteprima della libreria) firma con una penna finta, di cui si vede il pennino, poi timbra il foglio e infine lo pulisce.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WIDTH | script.js | [1.2, 4.4] | La larghezza più sottile e quella più grossa dell’inchiostro, in pixel: veloce è sottile. |
SPEED | script.js | 2.2 | La velocità, in pixel al millisecondo, alla quale l’inchiostro è più sottile. |
DRY | script.js | 0.8 | I secondi in cui l’inchiostro si asciuga dal blu bagnato al suo colore scuro. |
REWIND | script.js | 0.4 | I secondi in cui un tratto si riavvolge con Undo. |
STAMP | script.js | 2.2 | Quanto è grande il timbro quando comincia a scendere sul foglio. |
Quando usarla
Per firmare un contratto d’affitto, un modulo di consenso, una consegna, un preventivo accettato, il check-in di una struttura; o per un disegno a mano libera dentro un modulo.
Sul telefono
Si firma col dito senza far scorrere la pagina (touch-action none sul foglio); il pennino non c’è, perché sotto il dito non servirebbe; la casella del nome è a 16 pixel, così Safari su iPhone non ingrandisce la pagina.
Con il movimento ridotto
L’inchiostro esce già asciutto, Undo e Clear tolgono i tratti senza riavvolgerli, il timbro compare al suo posto senza cadere e senza scuotere il foglio, e le lettere del nome compaiono senza girarsi.
Trappole
- Un tratto di larghezza variabile non si fa con un solo path: ogni pezzo fra due punti di mezzo è un path a sé con la sua larghezza, e le estremità tonde nascondono le giunture.
- Il canvas va disegnato alla densità dello schermo (fino a 2) e riportato alla misura CSS con setTransform, o la firma esce sfocata.
- Disabilitare la casella che ha la focalizzazione la lascia sulla pagina: prima la si passa al pulsante.
- Il pennino prende il posto del cursore solo col mouse ((hover: hover) e (pointer: fine)): sotto un dito un cursore disegnato finirebbe sotto il polpastrello.
Librerie
GSAP 3.15.0, Literata (font variabile) 5.3.0, Caveat (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 3 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
