Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante della veneziana
Il Sign out di un'app con una finestrella nella punta tonda della pillola e dentro una veneziana: lamelle in 3D vero, una giornata calda dietro, e la luce che passa fra le lamelle e cade sulla pillola a strisce oblique, parole comprese. Sotto il puntatore le lamelle si inclinano una dopo l'altra per puntare le strisce verso di lui. Al clic la cordicella col pomolo di legno viene tirata, le lamelle si chiudono dall'alto con un'onda e un rimbalzo e la luce si spegne: Signed out. Un altro clic le riapre dal basso e la luce torna: Good morning, Rui.
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 venetian blind 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 venetian blind button: the Sign out of an app, with a small window in the round left end of the pill and a
venetian blind in it. Behind the slats there is a warm day; the light comes through the gaps and falls on the
pill in slanting stripes. Under the pointer the slats lean, one after the other, to aim their light at it. A click
pulls the cord: the slats close one by one with a bounce and the light goes. Another click opens them again -->
<div class="blind" data-blind>
<button class="blind__btn" type="button" data-btn data-autoclic>
<span class="blind__fill" aria-hidden="true" data-fill></span>
<span class="blind__under" aria-hidden="true">
<span class="blind__glow" data-glow></span>
<span class="blind__window" data-window>
<span class="blind__sky">
<span class="blind__sun"></span>
<svg class="blind__branch" viewBox="0 0 66 44" data-branch>
<path d="M70 -4C58 4 49 9 40 13c-6 3-12 4-17 8" />
<g>
<path d="M58 3c-5-5-11-4-13 0 4 3 9 3 13 0z" />
<path d="M50 8c-1-7-7-9-11-6 2 4 6 6 11 6z" />
<path d="M46 10c-6 0-9 5-7 9 4-1 6-5 7-9z" />
<path d="M37 14c-4-5-10-5-12-1 3 3 8 4 12 1z" />
<path d="M33 16c-5 2-6 8-3 10 3-3 4-6 3-10z" />
<path d="M26 20c-3-4-8-3-10 0 3 2 7 3 10 0z" />
</g>
</svg>
</span>
<span class="blind__slats" data-slats></span>
<span class="blind__tapes"></span>
<span class="blind__rail"></span>
</span>
</span>
<span class="blind__label">
<span class="blind__word" data-word data-wide="Sign out">Sign out</span>
</span>
<span class="blind__over" aria-hidden="true">
<canvas class="blind__light" data-light></canvas>
<canvas class="blind__cord" data-cord></canvas>
</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.
29 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 della veneziana» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola verde petrolio scuro, alta 60 pixel, con un filo di luce in alto e un'ombra morbida sotto. Nella punta tonda di sinistra c'è una finestrella con la cornice color crema, tonda dal lato della pillola e squadrata dall'altro: in alto il cassonetto, sei lamelle d'alluminio verniciato appese a due nastri, e dietro una giornata calda, chiara in alto a sinistra dove sta il sole e arancio verso il davanzale, con un ramo di foglie che si muove appena. Accanto alla finestra pende la cordicella con un pomolo di legno a ghianda. La luce del giorno passa fra le lamelle ed esce sulla pillola in strisce oblique color tungsteno, che scendono un poco e si spengono verso il fondo, e attraversano anche la scritta Sign out. All'arrivo il pulsante sale piano e le lamelle, chiuse, si aprono con un'onda. Col mouse sopra le lamelle si inclinano una dopo l'altra, partendo da quella più vicina al puntatore, finché le strisce puntano verso di lui: col puntatore all'altezza della finestra si mettono quasi di taglio e la luce arriva piana e più forte; entrando sulla pillola un'increspatura corre lungo la veneziana; passando sulla cordicella il puntatore la sposta e il pomolo dondola. La scritta si allarga e il fondo si gonfia con un rimbalzo. Al clic la cordicella viene tirata giù e torna su oscillando, la scritta diventa Signing out… e le lamelle si chiudono dall'alto, una ogni decimo di secondo, ognuna batte su quella sotto e rimbalza; le strisce si spengono una alla volta, l'alone caldo intorno alla finestra se ne va e resta una finestra chiusa color crema: Signed out, e poco dopo Sign in. Un altro clic tira la cordicella, le lamelle si riaprono dal basso, le strisce tornano sulla pillola: Good morning, Rui, poi di nuovo Sign out. La pillola prende ogni volta la larghezza delle parole con un piccolo rimbalzo. Con la tastiera il fuoco mostra un anello verde petrolio, la scritta si allarga e un'increspatura corre fra le lamelle; Invio o Spazio funzionano come il clic. Al telefono il dito appoggiato vicino al pulsante fa inclinare le lamelle e il tocco esce o entra.
Come funziona
Le lamelle in 3D
La finestra ha perspective: 200px e overflow: hidden; le lamelle sono span creati dallo script (SLATS, da 3 a 10), alte 1,17 volte il passo così da chiuse si sovrappongono, girate con rotateX. Ogni lamella ha un velo scuro (::after) la cui opacità segue il quadrato del seno dell'angolo: più la lamella si mette di taglio, più la sua faccia guarda via dalla stanza e si scurisce. I nastri e il cassonetto stanno davanti, fermi. L'angolo si scrive solo quando cambia di un decimo di grado.
Le molle accoppiate
L'angolo di ogni lamella è una molla smorzata (2,2 oscillazioni al secondo, smorzamento 0,2) verso il suo posto, più un accoppiamento ai vicini, θ'' = K (meta − θ) + 160 (θ vicini − 2θ) − C θ': come nei nastri a scala vero, una spinta su una lamella corre lungo la veneziana come un'onda. Sotto i zero gradi una lamella batte sulla vicina: si ferma e riprende BOUNCE volte la sua velocità al contrario, ed ecco il rimbalzo della chiusura. Passi di 1/240 di secondo, fotogramma limitato a 1/30; quando niente si muove il ciclo dorme.
La luce che passa
Le strisce sono un canvas sopra le parole in mix-blend-mode: screen. Per ogni lamella la fessura libera è il passo meno l'altezza della lamella vista di fronte (|cos θ|), e la luce esce con un'inclinazione (90° − θ) · 0,55: una lamella aperta la lascia passare quasi piana, una mezza chiusa la manda giù. Ogni striscia è un trapezio che si allarga un poco e si spegne con un gradiente, in due passate (un bordo morbido e un nucleo netto) e nasce dentro l'apertura della finestra, senza uno spigolo sulla cornice. L'alone caldo intorno alla finestra segue la media delle fessure.
Puntare il puntatore
Dalla posizione del puntatore nella pillola si calcola l'angolo che manderebbe le strisce dal centro della finestra su di lui, e da lì l'inclinazione delle lamelle, al massimo LEAN gradi, pesata dalla distanza del puntatore dalla pillola. Tutte vogliono la stessa inclinazione, così le strisce restano parallele e si spostano insieme; ma la raggiungono con un ritardo che cresce con la distanza dalla lamella più vicina al puntatore (velocità 16 / (1 + 1,1 · distanza)), ed è l'onda.
La cordicella
La cordicella è una catena verlet di sei anelli sotto una staffa, con gravità e sei passate di vincoli; il puntatore che ci passa la spinge da parte. Al clic una mano tiene il pomolo e lo tira giù di 9 pixel allungando gli anelli, poi lo lascia: gli anelli tornano corti e il pomolo risale oscillando. Il pomolo a ghianda e la sua ombra si girano lungo l'ultimo anello.
Gli stati
Il pulsante è un button vero, con aria-disabled mentre esce o entra e una zona aria-live che dice Signing out…, Signed out, Signing in… e Good morning, Rui; tutto è simulato coi tempi di GSAP. Le parole escono prima, sfocandosi, ed entrano dopo; la pillola prende la larghezza misurata delle nuove parole (alla larghezza dell'asse wdth, così l'hover non la fa sforare) con back.out, e quando si stringe aspetta che le vecchie siano sparite.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SIGN_OUT | script.js | Sign out | La scritta a riposo, da dentro. |
SIGNING_OUT | script.js | Signing out… | La scritta mentre esce; la dice anche la zona aria-live. |
SIGNED_OUT | script.js | Signed out | La scritta appena uscito, prima di Sign in. |
SIGN_IN | script.js | Sign in | La scritta a riposo, da fuori. |
SIGNING_IN | script.js | Signing in… | La scritta mentre entra. |
WELCOME | script.js | Good morning, Rui | Il saluto appena entrato. L'accesso è simulato: in un sito vero qui va il nome che il tuo server restituisce. |
WAIT | script.js | 1 | I secondi della richiesta simulata (almeno quanto le lamelle impiegano a chiudersi). |
SLATS | script.js | 6 | Quante lamelle ha la veneziana. |
OPEN | script.js | 66 | Quanto si girano le lamelle aperte, in gradi: verso 90 sono di taglio e passa più luce. |
LEAN | script.js | 22 | Quanto si inclinano per puntare la luce verso il puntatore, in gradi. 0 restano ferme. |
STAGGER | script.js | 0.1 | I secondi fra una lamella e la successiva quando si chiudono o si aprono. |
BOUNCE | script.js | 0.45 | Quanto rimbalza una lamella quando batte su quella sotto: 0 niente, 0,8 molto. |
LIGHT | script.js | 1 | Quanto sono luminose le strisce sulla pillola. |
Quando usarla
Per l'uscita o l'entrata di un'app di casa, di arredamento, di hotel e case vacanza, di meteo o di benessere, dove il giorno e la luce sono di casa. Va collegato alla propria uscita vera: qui la richiesta è simulata.
Sul telefono
La pillola è larga fra circa 200 e 265 pixel e a 390 ci sta sempre; se le parole sono troppo lunghe il carattere si rimpicciolisce. Il dito appoggiato vicino al pulsante fa inclinare le lamelle verso di sé, il tocco tira la cordicella ed esce o entra. La finestra e la cordicella restano della stessa misura.
Con il movimento ridotto
Le lamelle non si girano e non seguono il puntatore, la cordicella sta ferma, la pillola non si gonfia e la scritta non si allarga (sotto il mouse il fondo si schiarisce appena). Al clic le lamelle svaniscono e ricompaiono già chiuse, le strisce si spengono in dissolvenza e le parole cambiano in dissolvenza; un altro clic le fa ricomparire aperte con la luce.
Trappole
- Con un'inclinazione diversa per ogni lamella (ognuna puntava la sua striscia sul puntatore) le strisce si incrociavano e la luce diventava una nebbia sulle parole. Ora tutte vogliono la stessa inclinazione, presa dal centro della finestra, e arrivano in ritardo una dopo l'altra: le strisce restano parallele e l'onda resta.
- Con le lamelle quasi di taglio la luce diventava una fascia unica con righe sottili: la striscia ora è larga al massimo il 62% della fessura, e fra due strisce resta sempre buio.
- Le strisce in modalità lighter si sommavano dove convergevano e bruciavano le parole in un bianco pieno; in modalità screen e con un nucleo più sottile la luce si somma senza mai coprire il testo.
- La striscia più bassa partiva sotto il davanzale, con uno spigolo verticale sulla cornice: ora ogni striscia nasce dentro l'apertura della finestra e sale da zero nei primi diciotto pixel.
- Con la prospettiva vista da sopra il centro le lamelle alte mostravano la pancia grigia e la finestra sembrava sporca: ora l'occhio è al centro e il velo scuro è più leggero.
- Restringendo la pillola mentre le vecchie parole sparivano, le loro ultime lettere uscivano per un attimo dalla pillola: ora quando si stringe aspetta che le parole vecchie siano andate.
Librerie
GSAP 3.15.0, Mona 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.
