Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il profilo della parrucchiera
La card di profilo di una parrucchiera, col ritratto disegnato dallo script e i capelli lunghi color rame fatti di ciocche vere: ogni ciocca è una catena di punti che tiene le sue onde su molle, pesa e non si allunga mai. Il puntatore passa fra i capelli come le dita, le ciocche lo seguono e tornano al loro posto ondeggiando, e lei lo guarda. Follow le fa fare un colpo di testa: i capelli volano a ventaglio e ricadono rimbalzando mentre lei sorride a occhi chiusi.
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 hair stylist's card</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
<script>document.documentElement.classList.add('js');</script>
</head>
<body>
<main class="stage">
<!-- the profile card of a hair stylist. Her portrait is drawn by the script, and her long copper hair is made of
locks that move like hair: the pointer runs through them as fingers would, a tap ruffles them, and when she
is followed she tosses her head and the hair flies out and falls back into its waves -->
<article class="profile" aria-labelledby="profile-name" data-profile data-autoclic>
<div class="profile__portrait" data-portrait-box>
<canvas class="profile__canvas" role="img" aria-label="Portrait of Lucía Ferrer, smiling, with long wavy copper hair" data-portrait></canvas>
</div>
<div class="profile__body">
<h2 class="profile__name" id="profile-name" data-name>Lucía Ferrer</h2>
<p class="profile__role">Hair stylist and colourist in Valencia</p>
<dl class="facts">
<div class="facts__item">
<dt>Experience</dt>
<dd>14 years</dd>
</div>
<div class="facts__item">
<dt>286 reviews</dt>
<dd>
4.9
<svg class="facts__star" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3.2l2.6 5.5 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6-4.4-4.2 6-.8z"/></svg>
</dd>
</div>
<div class="facts__item">
<dt>Cut and finish</dt>
<dd>€48</dd>
</div>
</dl>
<div class="actions">
<button class="act act--follow" type="button" data-follow>
<span class="act__icon" aria-hidden="true">
<svg class="act__glyph" viewBox="0 0 24 24" data-glyph="plus"><path d="M12 5.8v12.4M5.8 12h12.4"/></svg>
<svg class="act__glyph" viewBox="0 0 24 24" data-glyph="check"><path d="M5.6 12.6l4.1 4.1 8.7-9.2"/></svg>
</span>
<span class="act__label" data-label>Follow</span>
</button>
<button class="act act--message" type="button" data-message>
<span class="act__icon" aria-hidden="true">
<svg class="act__glyph" viewBox="0 0 24 24" data-glyph="bubble"><path d="M5 6.8A2.3 2.3 0 0 1 7.3 4.5h9.4A2.3 2.3 0 0 1 19 6.8v7.1a2.3 2.3 0 0 1-2.3 2.3h-5.2L7.4 19.4v-3.2h-.1A2.3 2.3 0 0 1 5 13.9z"/></svg>
<svg class="act__glyph" viewBox="0 0 24 24" data-glyph="check"><path d="M5.6 12.6l4.1 4.1 8.7-9.2"/></svg>
</span>
<span class="act__label" data-label>Message</span>
</button>
</div>
<p class="sr" aria-live="polite" data-live></p>
</div>
</article>
</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.
39 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 profilo della parrucchiera» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una card bianca dagli angoli tondi. In alto il ritratto, su un fondale verde acqua con una luce chiara che viene da sinistra: una donna con un maglione color panna dal collo a coste, un cerchio d’oro all’orecchio e lunghi capelli mossi color rame, divisi da una riga quasi in mezzo; a sinistra scendono sulla spalla in ciocche chiare, a destra sono raccolti dietro l’orecchio e cadono dietro la spalla. Sotto: Lucía Ferrer in un Bodoni sottile, Hair stylist and colourist in Valencia, una riga di tre dati separati da filetti (14 years, Experience; 4.9 con una stellina disegnata, 286 reviews; €48, Cut and finish) e due pillole: Follow, verde scuro col più, e Message, bianca col fumetto. All’arrivo la card sale e i capelli si alzano appena e ricadono al loro posto. Gli occhi seguono il puntatore ovunque sia nella pagina, la testa si piega un poco verso di lui, e ogni tanto lei sbatte le palpebre. Il puntatore che passa sul ritratto porta con sé le ciocche che tocca, come una mano fra i capelli: le ciocche lo seguono, poi tornano ondeggiando nella loro piega; un clic o un tocco le scompiglia intorno al punto, e il dito appoggiato le pettina. Col puntatore sopra, le pillole si gonfiano oltre il bordo con un rimbalzo e la scritta si allarga sull’asse della larghezza del carattere; premute si schiacciano. Follow le fa fare un colpo di testa: la testa si piega di lato e torna, i capelli volano a ventaglio da tutte e due le parti e ricadono rimbalzando, il cerchio all’orecchio dondola, gli occhi si chiudono in un sorriso e il sorriso resta più aperto; la pillola diventa Following, verde chiaro con la spunta che si disegna. Premuta di nuovo, lei scuote appena la testa e il sorriso torna quello di prima. Message la fa annuire, la pillola dice Sent con la spunta e dopo un momento torna Message.
Come funziona
Il ritratto su una tavola
Tutto si disegna su una tavola di 324 per 300 punti portata alla misura del canvas, con la figura un po’ ingrandita dal piede. La testa ha una posa, un angolo intorno alla base del collo e uno spostamento: viso, occhi, bocca, orecchio e calotta dei capelli si disegnano dentro quella trasformazione, il collo si piega fra le spalle ferme e la testa. Il disegno si rifà solo quando qualcosa si muove; quando i capelli sono fermi, il ciclo non ridisegna niente.
Le ciocche
I capelli sono 35 ciocche in cinque gruppi: dietro la testa a sinistra e a destra, partite lungo la curva del cranio e poi cadenti; a destra corte, pettinate all’indietro e infilate dietro l’orecchio; davanti a sinistra, sulla spalla, e quelle che partono dalla riga e scendono lungo la guancia. Ogni ciocca nasce da un angolo di partenza che gira verso il basso, con un’onda sinusoidale lungo la strada, in 12 punti. Si disegna come un nastro: una curva di Catmull-Rom fra i punti, larga poco alla radice, piena a un terzo e a punta in fondo, con due fili scuri dentro e il riflesso dal lato della luce.
La fisica di una ciocca
Ogni punto è un punto di Verlet, a passi di 1/240 di secondo col passo del fotogramma limitato a 1/30: tiene la sua velocità (che si spegne in SWING secondi) e il peso WEIGHT. Poi la ciocca cerca la sua forma: la forma a riposo, girata con la testa, si gira ancora del 75 per cento dell’angolo che meglio la sovrappone alla ciocca com’è adesso, e ogni punto le va incontro con la forza SET, più ferma alla radice e più morbida in punta. Così la ciocca dondola tutta intera e tiene le sue onde senza annodarsi. Infine ogni punto torna a un segmento dal precedente (la ciocca non si allunga) e quelle davanti restano fuori da un ovale sul viso.
La mano fra i capelli
Il puntatore si porta sulla tavola e, a ogni passo, il suo spostamento passa ai punti che ha entro HAND pixel, pieno vicino e via via meno lontano: le ciocche vengono trascinate e sette decimi di quella spinta restano nella loro velocità, così dopo il passaggio vanno ancora un poco avanti e poi tornano. Alzati, i capelli sono pesanti e scivolano fra le dita (la spinta verso l’alto vale meno della metà). Un clic o un tocco spinge via i capelli intorno al punto; col dito appoggiato la mano segue il dito.
Il colpo di testa
Follow avvia una timeline GSAP sulla posa della testa (TOSS gradi di lato, un piccolo salto, il ritorno) e, in cima al gesto, dà a ogni ciocca una rotazione intorno alla sua radice, verso l’esterno, più un poco di slancio in alto: una rotazione è l’unica spinta che il vincolo della lunghezza non mangia, e i capelli volano a ventaglio e ricadono. Gli occhi si chiudono a mezzaluna, il sorriso si apre e resta aperto finché lei è seguita. Il cerchio all’orecchio è un pendolo che sente il cambio di velocità del lobo.
Lo sguardo, le palpebre, il sonno
Le iridi si spostano verso il puntatore di GAZE pixel su una molla, i tratti del viso un po’ meno, e la testa si piega di qualche grado dalla stessa parte; arrivata, la molla si ferma del tutto. Con la tastiera lei guarda il pulsante che ha il fuoco. Un battito di palpebre arriva a intervalli fra 2,6 e 5,4 secondi, con un delayedCall di GSAP. Quando per dodici fotogrammi niente si sposta di un centesimo di pixel, la fisica si addormenta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
HAND | script.js | [50, 0.9] | La mano fra i capelli: fin dove arriva, in pixel, e quanta parte del suo movimento prendono i capelli (da 0 a 1). |
SET | script.js | 0.12 | Quanto le ciocche tengono le loro onde: basso è morbido e pesante, alto è come con la lacca. |
WEIGHT | script.js | 220 | Quanto pesano i capelli: quanto in fretta ricadono, in pixel al secondo quadrato. |
SWING | script.js | 0.17 | Quanto continuano a ondeggiare i capelli dopo una spinta, in secondi. |
TOSS | script.js | 9 | Quanto piega la testa nel colpo di testa quando la si segue, in gradi. |
GAZE | script.js | 2.4 | Quanto si girano gli occhi verso il puntatore, in pixel. |
WORDS | script.js | ['Following', 'Sent'] | Le scritte delle due pillole quando lei è seguita e quando il messaggio è partito. |
Quando usarla
Per il profilo di chi lavora con le mani e col proprio aspetto in un’app di prenotazioni: una parrucchiera, un barbiere, una truccatrice, un’insegnante di danza; per la pagina di un salone, per la card di un artista in un marketplace, per una presentazione del team dove ognuno ha il suo ritratto disegnato.
Sul telefono
La card è larga 340 pixel, o lo schermo meno 32, e il ritratto si ridisegna alla misura vera. Il dito appoggiato sul ritratto pettina i capelli e lei lo guarda (il ritratto ha touch-action: none, quindi lì sopra il dito non fa scorrere la pagina); un tocco li scompiglia. Le pillole sono alte 50 pixel e il colpo di testa è lo stesso.
Con il movimento ridotto
I capelli stanno fermi nella loro piega, gli occhi guardano avanti e lei non sbatte le palpebre; la card compare senza salire. Follow non fa il colpo di testa: il sorriso più aperto è già lì e la pillola cambia in dissolvenza; anche Sent arriva in dissolvenza. Le pillole cambiano solo colore col puntatore sopra, senza gonfiarsi.
Trappole
- Tirare ogni segmento verso la sua direzione a riposo, presa sulla testa, andava bene da fermi, ma sotto una spinta forte le ciocche si piegavano a scalini e facevano nodi: ora la ciocca cerca tutta intera la sua forma, girata dell’angolo che meglio la sovrappone a com’è adesso.
- Tirare ogni segmento a piegarsi rispetto al precedente come a riposo, spostando solo il figlio, metteva energia nel sistema: i capelli si contorcevano e non si fermavano più. Una forza deve agire sulla forma intera, non a senso unico.
- Il vincolo della lunghezza (ogni punto a un segmento dal precedente) passava tutta la sua correzione alla velocità, e le punte tremavano per sempre: ora ne passa un decimo.
- Una spinta dritta in fuori e in alto per il colpo di testa veniva mangiata dal vincolo della lunghezza e i capelli si muovevano appena: la spinta giusta è una rotazione intorno alla radice, che il vincolo conserva.
- Le ciocche corte di destra appoggiate all’ovale del viso tremavano a contatto e tenevano sveglio il ciclo: ora la loro forma a riposo resta fuori dall’ovale, sono tenute più ferme, e la spinta fuori dall’ovale non diventa un rimbalzo.
- Il sonno misurato sulla velocità (posizione meno posizione precedente) non arrivava mai a zero per i punti appoggiati al viso: ora conta lo spostamento vero da un fotogramma all’altro, e la molla dello sguardo si ferma del tutto quando arriva.
- Le ciocche dietro, con la radice sul bordo del cranio, mostravano le estremità tagliate dritte sopra la calotta: le radici stanno dentro la calotta e il nastro parte largo un sesto.
- Prima che lo script partisse si vedeva un attimo la card col ritratto vuoto, che poi spariva e rientrava: la classe js la tiene nascosta fino alla partenza, e se lo script non arriva un’animazione CSS la mostra dopo due secondi e mezzo.
Librerie
GSAP 3.15.0, Bodoni Moda (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 7 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.
