Le storie a cubo
Storie, 3D, Transizioni
NuovaGratis
Tutti i componenti
Il pulsante col coperchio
Un pulsante di deploy che non si può premere per sbaglio: sta sotto un coperchio di vetro incernierato in alto, che si solleva con un clic o tirandolo su con la mano. Premuto, resta giù, conta alla rovescia mentre l'anello a strisce gira, fa il deploy con un arco che si riempie, torna su verde, e il coperchio si richiude da solo con un colpo.
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 button under a cover</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/martian-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the whole device: the plate in its 3D scene, and the flat areas where the hand goes -->
<div class="device" data-device data-autoclic>
<main class="stage">
<!-- the button under a cover: the red button can't be pressed until its glass cover is lifted (a click, or a
drag upwards); pressed, it counts down, deploys, turns green, and the cover slams shut by itself -->
<div class="console" data-console>
<div class="console__head" aria-hidden="true"><span>Deploy</span><span>v2.4.0</span></div>
<div class="well" data-well>
<span class="well__ring" aria-hidden="true" data-ring></span>
<span class="well__hole" aria-hidden="true"></span>
<svg class="well__arc" viewBox="0 0 140 140" aria-hidden="true"><circle cx="70" cy="70" r="65" pathLength="1" data-arc/></svg>
<button class="big" type="button" disabled aria-label="Deploy to production" data-big>
<span class="big__top" data-top>
<span class="big__show" aria-hidden="true" data-show></span>
</span>
</button>
<div class="lid" data-lid>
<button class="lid__cover" type="button" aria-label="Lift the cover" aria-expanded="false" data-cover>
<span class="lid__glass" aria-hidden="true"><span class="lid__shine" data-shine></span></span>
<span class="lid__tab" aria-hidden="true"><span>Lift</span></span>
</button>
</div>
</div>
<p class="console__status" aria-live="polite"><span data-status>Lift the cover to arm</span></p>
</div>
</main>
<!-- where the hand goes: two flat, invisible areas over the cover and the button, kept on them by the script. Over
the 3D of the tilted plate Safari on iPhone can lose the touches: flat areas outside the scene always get them -->
<div class="hits" aria-hidden="true">
<span class="hit hit--big is-off" data-hit-big></span>
<span class="hit hit--lid" data-hit-lid></span>
</div>
</div>
<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.
17 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 col coperchio» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una piastra di metallo scuro inclinata all'indietro come un apparecchio su un tavolo, con le scritte Deploy e v2.4.0 in alto; in mezzo un grande pulsante rosso in un pozzetto, dentro un anello a strisce gialle e nere, sotto un coperchio di vetro rossiccio con la linguetta Lift; sotto, la riga Lift the cover to arm. Col mouse sopra, il coperchio si alza appena. Cliccandolo, o tirandolo su con la mano oltre i 45 gradi, il coperchio si spalanca girando sulla cerniera in alto, va oltre il fermo e ci torna con un rimbalzo, con un riflesso che scorre sul vetro; la riga dice Armed. Press to deploy. Premuto, il pulsante resta giù, l'anello a strisce comincia a girare e sul pulsante salgono i numeri 3, 2 e 1, con la riga Deploying in 3, in 2, in 1; poi una freccia continua a salire mentre un arco bianco si riempie attorno al pulsante (Deploying to production). Finito, il pulsante torna su con un rimbalzo, diventa verde con una spunta che si disegna e la riga dice Live on production; dopo un momento il coperchio si richiude da solo: cade veloce, rimbalza una volta e la piastra sussulta sotto il colpo, e poi il pulsante torna rosso. Premuto di nuovo durante il conto, si ferma e dice Deploy cancelled. Se nessuno preme, dopo qualche secondo il coperchio si richiude da solo e la riga dice Cover closed.
Come funziona
La piastra inclinata
La piastra è girata all'indietro di 22 gradi (rotationX con GSAP) e il palco le dà la profondità (perspective 1000px); piastra, pozzetto e coperchio hanno transform-style preserve-3d, così il coperchio gira nello stesso spazio della piastra e, aperto, si vede di fronte invece che di taglio.
Il coperchio sulla cerniera
Il coperchio è un button che gira con rotateX attorno al suo bordo di sopra (transform-origin 50% 0) fino a LIFT gradi: oltre i 90 si appoggia all'indietro e si vede il suo lato di sotto. La scritta Lift ha backface-visibility hidden, per non leggerla al contrario. Il riflesso sul vetro scorre e si accende seguendo l'angolo.
La mano sul coperchio
La mano non tocca il coperchio vero ma una zona piatta e invisibile sopra di lui, fuori dalla scena 3D, che lo script tiene al suo posto (chiuso, il pozzetto con 12 pixel di margine e la linguetta; aperto, la parte sopra la cerniera); lo stesso per il pulsante. Un clic lo apre o lo chiude; un trascinamento lo segue (1,1 gradi per ogni pixel tirato verso l'alto) e, lasciato, oltre i 45 gradi vola aperto con elastic.out, prima ricade. Se nessuno preme il pulsante per RELOCK secondi, il coperchio si richiude da solo.
Il conto e il deploy
La faccia del pulsante sta 8 pixel sopra il suo fianco; premuto resta 5 pixel più giù, e una timeline mostra COUNT numeri, uno ogni TICK secondi, mentre l'anello gira; poi l'arco SVG si riempie con stroke-dashoffset in 1,3 secondi. Il verde della fine è un secondo strato sopra il rosso che si accende con l'opacità, perché due gradienti non sfumano l'uno nell'altro.
Il colpo, i tasti e l'anteprima
Chiudendosi, il coperchio cade con power3.in, risale di 6 gradi e ricade, e la piastra fa un sussulto di 3 pixel. Con la tastiera il coperchio si apre con Invio e il fuoco passa al pulsante; Escape ferma il conto o richiude il coperchio. Un clic da script (l'anteprima della libreria) solleva il coperchio, e il clic dopo preme il pulsante.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LIFT | script.js | 108 | Di quanti gradi si apre il coperchio. |
COUNT | script.js | 3 | Da che numero parte il conto alla rovescia. |
TICK | script.js | 0.6 | I secondi di ogni numero del conto. |
RELOCK | script.js | 6 | I secondi che il coperchio resta aperto se nessuno preme, prima di richiudersi da solo. |
Quando usarla
Per le azioni importanti e senza ritorno di un pannello: pubblicare, mettere online, lanciare una campagna, spegnere un servizio, svuotare una coda. Anche come pulsante giocoso nella pagina di un prodotto per sviluppatori.
Sul telefono
La piastra è larga 280 pixel, o lo schermo meno 48; il dito tira su il coperchio senza far scorrere la pagina (touch-action none sulla zona del coperchio), e il coperchio si alza da solo solo per il mouse che arriva, non per il dito.
Con il movimento ridotto
Il coperchio si apre e si chiude in un quinto di secondo, senza rimbalzi e senza sussulto; l'anello non gira, i numeri cambiano senza salire e la freccia sta ferma; l'arco si riempie lo stesso, perché dice quanto manca.
Trappole
- Un coperchio girato oltre i 90 gradi, visto di fronte, è una striscia sottile: perché l'apertura si legga la piastra va inclinata, con tutta la catena degli elementi in preserve-3d.
- La scritta sul retro di una cosa girata si legge al contrario: backface-visibility hidden sulla scritta, col suo genitore in preserve-3d.
- Sopra una scena 3D con più livelli in preserve-3d Safari su iPhone può non consegnare i tocchi, e misura male gli elementi girati oltre i 90 gradi: la mano va su zone piatte fuori dalla scena, messe al loro posto partendo da un elemento che misura bene (il pozzetto).
- Un tratto con le estremità tonde, lungo zero, si vede lo stesso come un puntino: l'arco vuoto si nasconde con l'opacità finché non comincia a riempirsi.
- Il transform messo da GSAP cancella quello del CSS: l'inclinazione della piastra si dà con GSAP (rotationX), così l'entrata e il sussulto, fatti con y, non la perdono.
Librerie
GSAP 3.15.0, Martian Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 4 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.
