Il campo della password
Moduli, Testo, SVG
NuovaGratis
Tutti i componenti
Il pulsante del sismografo
Nello stile minimal: il Notify me della lista d’attesa di un lancio, una pillola sottile d’inchiostro su bianco. Premuto, le parole escono dalla pillola e una penna ci scrive dentro un terremoto come un sismografo: la carta scorre sotto la penna ferma, una piccola prima onda, quella grande che si spegne piano, poi la riga si distende e sparisce, e al suo posto atterrano le parole nuove, prima larghe e leggere, poi strette e pesanti. Premuto di nuovo si esce dalla lista con una piccola scossa di assestamento.
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 seismograph button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the seismograph button: the Notify me of a launch waitlist, a thin ink pill on white. Pressed, the words lift
away and a pen writes a tremor across the pill, the way a seismograph writes a quake: the paper runs under the
pen, a small first wave, the big one, and the slow fade back to a flat line. The line settles and the new words
land in its place, heavier. Pressed again, you leave the list with a small aftershock -->
<div class="quake" data-quake>
<button class="quake__btn" type="button" aria-pressed="false" data-btn data-autoclic>
<svg class="quake__paper" aria-hidden="true" data-paper>
<path class="quake__base" data-base></path>
<path class="quake__trace" data-trace></path>
<path class="quake__pen" data-pen></path>
</svg>
<span class="quake__words">
<span class="quake__word" data-word="rest">Notify me</span>
<span class="quake__word quake__word--done" data-word="done" aria-hidden="true">You’re on the list</span>
</span>
</button>
<p class="quake__note" data-note>Launch day, 12 November</p>
<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.
15 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 sismografo» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola sottile, alta 60 pixel, col solo contorno d’inchiostro e dentro la scritta Notify me in Archivo; sotto, piccola e grigia, la riga Launch day, 12 November. Passandoci sopra la scritta si allarga e prende peso su una molla. Premuta, la pillola cede un poco e torna con un rimbalzo; la scritta si stringe e sale fuori dal bordo, e dentro la pillola si disegna da sinistra una riga grigia sottile con, verso destra, la penna: un trattino d’inchiostro verticale. Poi la carta scorre verso sinistra sotto la penna e la riga vermiglia scrive un terremoto: un’onda piccola, poi quella grande che riempie quasi tutta l’altezza della pillola e si spegne piano, sempre più bassa. Finito, tutta la riga si distende piatta e svanisce, e al suo posto sale You’re on the list, prima larga e leggera, poi si stringe e diventa pesante, scendendo di un pixel troppo e tornando su. La riga sotto diventa We’ll write on launch day. Premuta di nuovo, la scritta scende fuori, la penna scrive una piccola scossa di assestamento e torna Notify me.
Come funziona
La carta che scorre sotto una penna ferma
La penna sta fissa al 78 per cento della larghezza della pillola. Ogni pixel di carta a sinistra della penna ci è passato sotto un po’ di tempo fa: (posizione della penna meno x) diviso la velocità della carta. Il suo punto è quindi l’altezza della penna in quel momento. Così il tracciato non si salva da nessuna parte: a ogni fotogramma lo script riscrive il tracciato SVG, un punto ogni due pixel, da una sola funzione del tempo, e la riga sembra scorrere verso sinistra.
La forma del terremoto
L’altezza è un inviluppo per un’oscillazione. L’inviluppo è una piccola prima onda (un mezzo seno nel primo mezzo secondo) e poi quella grande, che sale in fretta e si spegne con un esponenziale; l’oscillazione è la somma di due seni di frequenza diversa, 7,5 e 12,7 volte al secondo, così non sembra mai un’onda pulita. QUAKE è l’altezza in pixel della scossa più forte.
La riga che si distende
Il moltiplicatore amp porta tutte le altezze a zero insieme: con una curva InOut tutto il tracciato si abbassa sulla riga piatta come una corda che si calma, poi carta, riga e penna svaniscono insieme.
Le parole che atterrano
Archivo ha gli assi di larghezza e di peso. La scritta di riposo esce stringendosi; quella nuova parte larga 112 e peso 320, sale da sotto fino a un pixel più in alto del suo posto e torna giù, mentre larghezza e peso vanno a 96 e 620. GSAP muove due piccoli oggetti e lo script scrive font-stretch e font-weight a ogni passo.
Accessibile
È un button vero con aria-pressed, che dice se sei nella lista; una riga aria-live annuncia il nuovo stato; il fuoco da tastiera ha l’anello solo quando si usa la tastiera. Durante la scossa i clic si ignorano, così due pressioni veloci non si accavallano. Col movimento ridotto le parole si scambiano in dissolvenza, senza tracciato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Notify me | Le parole a riposo. |
DONE | script.js | You’re on the list | Le parole quando sei nella lista. |
NOTE | script.js | Launch day, 12 November | La riga piccola sotto la pillola. |
NOTE_DONE | script.js | We’ll write on launch day | La riga piccola quando sei nella lista. |
SPEED | script.js | 150 | Quanto corre la carta sotto la penna, in pixel al secondo: più alta, onde più larghe. |
QUAKE | script.js | 24 | L’altezza dell’onda più grande, in pixel. |
LENGTH | script.js | 1.6 | I secondi in cui la penna scrive il terremoto. |
SETTLE | script.js | 0.45 | I secondi in cui la riga si distende piatta. |
AFTER | script.js | 4 | L’altezza della piccola scossa quando si esce dalla lista. |
Quando usarla
Per un pulsante d’iscrizione che deve sembrare un evento: la lista d’attesa di un lancio, l’avviso di un drop, un Notify me di un prodotto esaurito.
Sul telefono
La pillola si stringe fino a 32 pixel dai bordi e il tracciato si ricalcola sulla larghezza vera. Il tocco preme la pillola come il clic; l’allargarsi delle parole al passaggio c’è solo col mouse.
Con il movimento ridotto
Niente tracciato, niente rimbalzi: le parole si scambiano con una dissolvenza e la riga sotto cambia.
Trappole
- Salvare il tracciato punto per punto e farlo scorrere costa e si spezza a ogni ridimensionamento: calcolarlo da una funzione del tempo lo rende sempre giusto, a qualunque larghezza.
- Due clic veloci accavallano la scossa e l’assestamento: durante la timeline i clic si ignorano.
- Il pulsante ha overflow hidden e gli angoli tondi: le parole che escono e la riga restano dentro la pillola.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 22 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.
