Il menu col bruco
Menu, Hover, Transizioni
NuovaGratis
Tutti i componenti
Il pulsante dell'impronta
Sign in with Touch ID da tenere premuto, con un sensore vero nella punta della pillola: un anello d'acciaio intorno a uno zaffiro scuro e sopra un'impronta digitale generata, non disegnata, con il suo vortice, le anse e il delta. Tenendo premuto l'inchiostro riempie le creste dal punto toccato in fuori, corre lungo le creste più svelto di quanto salti le valli e ha il bordo ancora bagnato; lasciato troppo presto si ritira (Keep holding…). Letta l'impronta, le creste si ripiegano una dopo l'altra in un segno di spunta e la pillola si apre su Signed in as Ada; Lock le riapre.
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 fingerprint button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the fingerprint button: Sign in with Touch ID, held down. In the round end of the pill a sensor with a
fingerprint grown from a field of directions (a loop round its core, a delta below). Held, ink fills the
ridges from the point touched outwards, running along them faster than it crosses the valleys; let go too
soon and they empty again. Read, the ridges fold into a tick and the pill opens on the person signed in -->
<div class="touch" data-touch>
<button class="touch__btn" type="button" data-btn data-autoclic>
<span class="touch__fill" aria-hidden="true" data-fill></span>
<canvas class="touch__sensor" aria-hidden="true" data-sensor></canvas>
<span class="touch__faces">
<span class="touch__face" data-face="a">
<span class="touch__word" data-wide="Sign in with Touch ID" data-word>Sign in with Touch ID</span>
</span>
<span class="touch__face" data-face="b" aria-hidden="true">
<span class="touch__word" data-word></span>
</span>
<span class="touch__face touch__face--done" data-face="done" aria-hidden="true">
<span class="touch__who">
<span class="touch__lead" data-lead-text>Signed in as</span>
<span class="touch__name" data-user-text>Ada</span>
</span>
<span class="touch__lock" data-lock-text>Lock</span>
</span>
</span>
</button>
<p class="sr" aria-live="polite" data-live></p>
</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.
28 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 «Il pulsante dell'impronta» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola color grafite, alta 60 pixel, con un filo di luce in alto e un'ombra morbida sotto. A destra, in Mona Sans color avorio, Sign in with Touch ID; nella punta tonda di sinistra un sensore come quello dei telefoni: un anello d'acciaio spazzolato, lucido in alto a sinistra, e dentro uno zaffiro quasi nero col suo riflesso. Sullo zaffiro un'impronta digitale a linee grigie sottili: un'ansa al centro che si apre verso un lato, archi più larghi sotto, creste che finiscono e si biforcano come nelle impronte vere. All'arrivo il pulsante sale piano e l'impronta cresce dal suo centro. Sotto il mouse la scritta si allarga e il fondo si gonfia con un rimbalzo. Premendo e tenendo premuto il fondo si schiaccia, l'impronta affonda appena nel vetro e la scritta diventa Reading…: dal punto dove sta il dito (o dal bordo dell'impronta più vicino, se si preme sulla scritta) l'inchiostro rosso riempie le creste, corre lungo ognuna e salta da una all'altra più lentamente, con una punta color pesca dove è ancora bagnato. Se si lascia prima di poco più di un secondo l'inchiostro si ritira verso il dito, la scritta dice Keep holding… in color pesca e poi torna a riposo. Tenendo fino in fondo la scritta diventa Signing in… e le creste, a partire da quelle interne, si stringono girando un poco e si posano su un segno di spunta, passando dal rosso al verde; al loro posto resta una spunta verde pulita, l'anello prende un filo verde e la pillola si allarga su Signed in as e sotto Ada, con una piccola pillola Lock. Un clic su Lock: Locking…, la spunta si riapre nelle creste, l'inchiostro si ritira verso il punto toccato, Locked e poi di nuovo Sign in with Touch ID. Un clic semplice, un tocco breve o Invio avviano una lettura che va avanti da sola; con la tastiera Spazio tenuto premuto fa da dito.
Come funziona
L'impronta, fatta crescere
Le creste sono le linee dove una fase torna a zero. La fase cresce con la distanza da un tratto che parte dal centro dell'impronta ed esce dal bordo (gli anelli intorno a un segmento sono forcine annidate: l'ansa), e sotto l'ansa cede, con un massimo morbido, a archi larghi che attraversano il dito; dove le due famiglie si incontrano le creste si affollano e si dividono in tre come intorno a un delta. Due ottave di rumore liscio la fanno vagare, e così le creste finiscono e si biforcano. Il lato dell'ansa e il rumore dipendono da SEED.
Marching squares sulle creste
Su una griglia di mezzo pixel si calcola il seno della fase; marching squares segue le linee dove vale zero e tiene solo quelle dove il coseno è positivo (le creste, non le valli) e che stanno dentro il contorno un po' sfrangiato del polpastrello. I segmenti si concatenano in polilinee attraverso i lati delle celle che condividono, si lisciano due volte e quelle più corte di tre pixel e mezzo si scartano. Si fa una volta sola: a ogni fotogramma si disegnano solo le polilinee.
L'inchiostro sotto pressione
A ogni pressione ogni punto di ogni cresta riceve una distanza: attraversare costa CAPILLARY volte la distanza in linea d'aria dal dito, correre lungo una cresta costa la sua lunghezza, e due passate lungo ogni cresta (avanti e indietro) tengono la più corta. Il fronte dell'inchiostro avanza su quella distanza mentre si tiene premuto (in HOLD secondi, con un'andatura che rallenta verso la fine) e ogni segmento si taglia nel punto esatto dove lo attraversa: dietro il fronte il rosso, negli ultimi cinque passi il color pesca del bagnato. Lasciando, il fronte torna indietro.
Le creste che si ripiegano nella spunta
Ogni cresta conosce la sua lunghezza percorsa in ogni punto, da 0 a 1, e si posa sulla spunta lungo la stessa frazione (dal suo capo di sinistra), con un piccolo scarto di lato che si stringe. Le creste partono in ordine di distanza dal centro, con un'andatura power3.inOut e una rotazione e(1−e) intorno al centro che dà l'idea di un ripiegarsi; il colore passa dall'inchiostro al verde nella seconda metà. Alla fine le creste sfumano e resta una spunta pulita di tre pixel con le punte tonde.
Tenere premuto, cliccare, Spazio
Il pulsante prende il puntatore (setPointerCapture), così il dito non lo perde se la pillola si sposta, e mentre il dito è giù la pillola non si stringe mai. Una pressione più corta di un quarto di secondo è un tocco e avvia una lettura che va da sola; così fanno anche il clic di Invio e quello di uno script (detail 0), e l'anteprima mostra il giro intero. Spazio tenuto è il dito: keydown e keyup col preventDefault, perché il pulsante non faccia anche il suo clic. Il clic su Lock conta solo se la pressione è cominciata con l'accesso già fatto.
Le parole e gli stati
Due facce per una riga di parole, che si danno il cambio (quella vecchia esce sfocandosi, la nuova entra dopo), più quella della persona entrata. Prima di ogni cambio i tween ancora in corso sulle facce si fermano, così due cambi ravvicinati non lasciano mai due scritte una sopra l'altra. La pillola prende la larghezza misurata delle parole con back.out. È un button vero: aria-disabled mentre firma e chiude, una zona aria-live dice Reading…, Keep holding…, Signed in as Ada e Locked. Signed out.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Sign in with Touch ID | La scritta a riposo. Se è troppo lunga per lo spazio, il carattere si rimpicciolisce. |
READING | script.js | Reading… | La scritta mentre si tiene premuto. |
AGAIN | script.js | Keep holding… | La scritta quando si lascia troppo presto. |
BUSY | script.js | Signing in… | La scritta mentre le creste si ripiegano nella spunta. |
LEAD | script.js | Signed in as | La riga piccola sopra il nome. |
USER | script.js | Ada | La persona entrata. L'accesso è simulato: in un sito vero qui va il nome che il tuo server restituisce dopo la WebAuthn. |
LOCK | script.js | Lock | La piccola pillola che fa uscire. |
LOCKING | script.js | Locking… | La scritta mentre la spunta torna impronta. |
LOCKED | script.js | Locked | La scritta a uscita fatta, prima di tornare a riposo. |
HOLD | script.js | 1.2 | I secondi in cui il dito deve restare giù. Una lettura avviata da un clic dura un terzo in più. |
SPACING | script.js | 2.8 | La distanza fra due creste, in pixel: più bassa, un'impronta più fitta. |
CAPILLARY | script.js | 3 | Quanto l'inchiostro è più lento ad attraversare una valle che a correre lungo una cresta: 1 si allarga a cerchio, 6 segue le creste una per una. |
SEED | script.js | 7 | Il dito: un altro numero, un'altra impronta (e l'ansa dall'altro lato). |
Quando usarla
Per il pulsante di accesso con la biometria: Sign in with Touch ID o con una passkey in un'app bancaria, in un gestore di password, in un portafoglio, nella conferma di un pagamento o di un'azione delicata (Hold to confirm). Va collegato all'API WebAuthn, che chiede il dito al sistema: qui è tutto simulato e nessun sensore viene interpellato.
Sul telefono
La pillola a riposo è larga circa 270 pixel e quella aperta circa 220: a 390 pixel ci stanno con margine, e se le parole sono troppo lunghe il carattere si rimpicciolisce. Il dito tenuto sulla pillola legge, un tocco breve avvia la lettura da sola; il menu del tocco lungo e la selezione sono spenti sul pulsante.
Con il movimento ridotto
Niente impronta che cresce, niente fondo che si gonfia o scritta che si allarga (sotto il mouse il fondo si schiarisce appena). Tenendo premuto l'inchiostro compare su tutte le creste in dissolvenza, e lasciato troppo presto svanisce; letta l'impronta le creste sfumano e la spunta compare al loro posto, la pillola prende la nuova larghezza mentre le parole sono sparite e Signed in as Ada arriva in dissolvenza. Lock torna indietro nello stesso modo.
Trappole
- Premendo sul lato destro della pillola la lettura partiva da sola: la scritta Reading… è più corta di Sign in with Touch ID, la pillola centrata si stringeva, scappava da sotto il puntatore, arrivava pointerleave dopo settanta millisecondi e la pressione contava come un tocco. Ora il pulsante prende il puntatore con setPointerCapture e, finché il dito è giù, la pillola può solo allargarsi.
- Con Invio premuto subito dopo Locked si vedevano due scritte sovrapposte, una più larga della pillola: il tween ritardato che faceva entrare Sign in with Touch ID partiva dopo quello che lo faceva uscire. Ora prima di ogni cambio i tween delle facce si fermano con killTweensOf.
- La prima impronta, anelli intorno a un centro più una spirale di fase, era una chiocciola: sembrava un'icona, non un dito. Anche gli archi intorno a un centro lontano con un nucleo e un delta davano un grumo di forcine sotto il centro. L'ansa vera è venuta dagli anelli intorno a un segmento che esce dal bordo, uniti agli archi con un massimo morbido.
- Con un clic dell'anteprima ogni 2,8 secondi il secondo clic cadeva sull'accesso appena fatto e la pillola aperta si vedeva un istante. La lettura da sola dura un terzo più di HOLD e il ripiegarsi 1,35 secondi: l'accesso è pronto dopo circa 3,6 secondi, il secondo clic cade nell'attesa e Signed in as Ada resta in vista un giro intero.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 12 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.
