Il menu col bruco
Menu, Hover, Transizioni
NuovaGratis
Tutti i componenti
Il pulsante del volto
Sign in with Face ID su fondo nero: nella punta della pillola, dentro i quattro angoli della cornice di Face ID, un volto fatto solo di curve di livello, come la carta topografica di una collina. Le linee vengono da una mappa d'altezza di un volto stilizzato vista in 3D: il volto segue il puntatore e le isolinee scivolano sulle guance e si affollano sul lato che si gira. Al clic il volto guarda davanti, una linea di scansione lo percorre e le linee prendono il suo colore, poi si stringono e si ricompongono in una spunta: Signed in as Noor. Lock riapre la spunta nel volto.
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 face button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hubot-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the face button: Sign in with Face ID. In the round end of the pill a face drawn only with contour lines, like a
map: the lines are worked out from a height map of a face seen from where it is turned, so as it follows the
pointer they slide and change. A click sends a scan line down it, the contours tighten and gather into a
tick, and the pill opens on the person signed in -->
<div class="fid" data-fid>
<button class="fid__btn" type="button" data-btn data-autoclic>
<span class="fid__fill" aria-hidden="true" data-fill></span>
<canvas class="fid__sensor" aria-hidden="true" data-scan></canvas>
<span class="fid__faces">
<span class="fid__face" data-face="a">
<span class="fid__word" data-wide="Sign in with Face ID" data-word>Sign in with Face ID</span>
</span>
<span class="fid__face" data-face="b" aria-hidden="true">
<span class="fid__word" data-word></span>
</span>
<span class="fid__face fid__face--done" data-face="done" aria-hidden="true">
<span class="fid__who">
<span class="fid__lead" data-lead-text>Signed in as</span>
<span class="fid__name" data-user-text>Noor</span>
</span>
<span class="fid__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.
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 «Il pulsante del volto» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una pillola color grafite, alta 60 pixel, con un filo chiaro tutto intorno. A destra, in Hubot Sans bianco, Sign in with Face ID; nella punta tonda di sinistra i quattro angoli arrotondati della cornice di Face ID e dentro un volto disegnato solo con sette curve di livello grigio-azzurre: il contorno della testa, le anse delle guance, le due conche degli occhi sotto la fronte, il naso con la sua punta, le labbra e il mento; le linee più alte sono più chiare. All'arrivo il pulsante sale e le linee compaiono dal bordo del volto alla punta del naso. Il volto segue il puntatore con un po' di peso: girandosi, le linee del lato che si allontana si affollano e quelle dell'altro si allargano; senza puntatore si guarda intorno piano da solo. Sotto il mouse la scritta si allarga e il fondo si gonfia con un rimbalzo. Al clic la scritta diventa Signing in…, il volto torna a guardare davanti e si ferma, gli angoli si stringono un poco e una linea color menta scende sul volto con una scia che sfuma: le curve sopra di lei diventano menta. Poi le curve si stringono verso il centro e si posano su una spunta, le chiuse andata e ritorno; resta una spunta menta pulita, gli angoli tornano al loro posto color menta e la pillola si allarga su Signed in as e sotto Noor, con una piccola pillola Lock. Un clic su Lock: Locking…, la spunta si riapre nel volto, il menta si ritira dal basso verso l'alto, Locked e poi di nuovo Sign in with Face ID. Con la tastiera il fuoco mostra un anello bianco e Invio o Spazio entrano; al telefono il dito che scorre sulla pagina è dove il volto guarda.
Come funziona
La mappa d'altezza del volto
Il volto è una somma di gobbe morbide su una cupola bassa: una gaussiana per la fronte, due cave per gli occhi, una cresta e una punta per il naso con le sue ali, le guance, le labbra con la linea fra le due e il mento; fuori dall'ellisse della testa non c'è altezza. RELIEF dice quanti pixel è profondo il volto all'altezza 1.
Le curve di livello
Su una griglia di mezzo pixel marching squares segue LINES altezze, dal bordo alla punta del naso; i segmenti si concatenano in polilinee attraverso i lati delle celle che condividono (un anello chiuso torna al suo inizio), e si lisciano due volte. Ogni punto di ogni linea tiene la sua altezza, così la carta si può girare in 3D.
Il volto che guarda il puntatore
A ogni fotogramma ogni punto delle linee si gira intorno all'asse verticale (yaw) e poi a quello trasversale (pitch), e si proietta con una prospettiva leggera (f = 110 / (110 − z)): le linee scivolano sulle guance e si affollano sul lato che si allontana. L'angolo segue il puntatore con tanh della distanza, fino a TURN radianti, con un inseguimento esponenziale che gli dà peso. Senza puntatore due sinusoidi lente che non si ripetono lo fanno guardare intorno (SWAY); fuori dallo schermo non si calcola niente.
La scansione
Il volto torna davanti in 0,35 secondi e si ferma. La linea di scansione scende in SCAN secondi con sine.inOut, con una banda a gradiente che sfuma verso l'alto dietro di lei; le curve si disegnano due volte, ritagliate sopra e sotto la linea: sopra nel colore della scansione, sotto nel grigio. Gli angoli della cornice si stringono di quasi due pixel con back.out.
Le curve che si stringono nella spunta
Finita la scansione le curve si congelano come sono. Ogni linea conosce la frazione di lunghezza di ogni suo punto: una aperta si posa sulla spunta dal suo capo di sinistra, una chiusa parte dal suo punto più a sinistra e va lungo la spunta e torna, e diventa un doppio filo sottile. Prima la linea si stringe verso il centro a metà della sua misura (power2.inOut), poi si posa sulla spunta (power3.inOut), le esterne per prime; alla fine le linee sfumano e resta una spunta pulita con le punte tonde.
Le parole e gli stati
Due facce per una riga di parole che si danno il cambio, più quella della persona entrata; prima di ogni cambio i tween ancora in corso sulle facce si fermano, così non restano mai due scritte una sopra l'altra. È un button vero: aria-disabled mentre scansiona e chiude, una zona aria-live dice Signing in…, Signed in as Noor e Locked. Signed out.; da entrato l'aria-label dice anche Lock. Tutto simulato: nessuna fotocamera viene accesa.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Sign in with Face ID | La scritta a riposo. Se è troppo lunga per lo spazio, il carattere si rimpicciolisce. |
BUSY | script.js | Signing in… | La scritta mentre scansiona e le curve si stringono nella spunta. |
LEAD | script.js | Signed in as | La riga piccola sopra il nome. |
USER | script.js | Noor | 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 si riapre nel volto. |
LOCKED | script.js | Locked | La scritta a uscita fatta, prima di tornare a riposo. |
SCAN | script.js | 1.1 | I secondi della linea di scansione. |
LINES | script.js | 7 | Quante curve di livello, dal bordo del volto alla punta del naso: 4 un volto essenziale, 10 una carta fitta. |
TURN | script.js | 0.42 | Quanto il volto si gira verso il puntatore, in radianti: 0 resta fermo. |
RELIEF | script.js | 1 | Quanto è profondo il volto: più alto, le linee scivolano di più girando. |
SWAY | script.js | true | Senza puntatore il volto si guarda intorno piano da solo; false resta fermo davanti. |
Quando usarla
Per il pulsante di accesso col volto o con una passkey: un'app bancaria, un gestore di password, un portafoglio, un'area riservata, la conferma di un pagamento. Sta bene nei siti scuri, di tecnologia e di sicurezza. Va collegato all'API WebAuthn, che chiede il volto al sistema: qui è tutto simulato e la fotocamera non viene mai accesa.
Sul telefono
La pillola a riposo è larga circa 265 pixel e quella aperta circa 215: a 390 pixel ci stanno con margine, e se le parole sono troppo lunghe il carattere si rimpicciolisce. Il dito che scorre sulla pagina è dove il volto guarda; senza dito il volto si guarda intorno da solo. Il tocco sul pulsante scansiona.
Con il movimento ridotto
Il volto resta fermo davanti e non segue il puntatore; niente linee che entrano, niente fondo che si gonfia né scritta che si allarga (sotto il mouse il fondo si schiarisce appena). Al clic niente linea che scende: le curve passano al color menta in dissolvenza, poi sfumano e la spunta compare al loro posto; la pillola prende la nuova larghezza mentre le parole sono sparite e Signed in as Noor arriva in dissolvenza. Lock torna indietro nello stesso modo.
Trappole
- Le prime curve erano di uguale profondità vista dalla fotocamera: girando il volto, la profondità prendeva un piano inclinato (−x · sin yaw) che dominava tutto, le curve diventavano bande verticali e il volto spariva. Ora le curve sono quelle della mappa d'altezza, ricalcolate a ogni fotogramma girate in 3D e in prospettiva: restano un volto e scivolano sul rilievo.
- Con una cupola alta e nove livelli il volto, largo una trentina di pixel, era un groviglio che sembrava un'impronta. La cupola ora è bassa (0,56, con esponente 0,8), il naso e gli occhi più marcati e le linee sette: si leggono la testa, gli occhi, il naso e la bocca.
- La linea di scansione partiva sopra gli angoli della cornice stretti e li tagliava. Ora corre dal bordo della testa con mezzo pixel di margine e gli angoli si stringono di 1,8 pixel invece di 2,6.
- Con un clic dell'anteprima ogni 2,8 secondi l'accesso era pronto dopo 2,7 e il secondo clic faceva subito Lock: Signed in as Noor si vedeva un istante. Ora l'accesso è pronto dopo circa 3 secondi, il secondo clic cade nell'attesa e la pillola aperta resta in vista un giro intero.
Librerie
GSAP 3.15.0, Hubot Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 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.
