Il pulsante elastico
Pulsanti, Hover, Testo
NuovaGratis
Tutti i componenti
Il campo del nome da prenotare
Su nero, l’iscrizione a un sito di pagine personali dove prenoti l’indirizzo della tua pagina, orrin.page/ e il tuo nome. Ogni cambio del nome è una trasformazione lettera per lettera: le lettere in comune scivolano al loro posto nuovo, le altre cadono via o salgono strette e leggere. Una maiuscola si vede diventare minuscola, uno spazio un trattino; un nome preso viene barrato e arrivano tre nomi liberi, uno libero diventa lime, e prenotato il pulsante diventa Copy link.
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 name to claim</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 sign-up of a page for makers: you claim the address of your page. The letters are drawn over a real
field, and every change is a morph: the letters both words share slide to their new place, the others drop
out or rise in. Checking and claiming are pretended: see check() and post() in the script -->
<form class="claim" action="#" novalidate aria-labelledby="claim-title" data-claim data-autoclic>
<h2 class="claim__title" id="claim-title">Claim your page</h2>
<div class="claim__box" data-box>
<label class="claim__field" for="claim-handle" data-field>
<span class="claim__prefix" data-prefix>orrin.page/</span>
<span class="claim__slot" data-slot>
<input class="claim__input" id="claim-handle" name="handle" type="text" autocomplete="username" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="go" maxlength="30" aria-label="Page name, after orrin.page/" aria-describedby="claim-status" aria-invalid="false" data-input>
<span class="claim__glyphs" aria-hidden="true" data-glyphs></span>
<span class="claim__hint" aria-hidden="true" data-hint>yourname</span>
<span class="claim__strike" aria-hidden="true" data-strike></span>
<span class="claim__sweep" aria-hidden="true" data-sweep><span></span></span>
<span class="claim__caret" aria-hidden="true" data-caret></span>
</span>
</label>
<button class="go" type="submit" data-go>
<span class="go__bg" aria-hidden="true"></span>
<span class="go__label" aria-hidden="true" data-go-glyphs></span>
<span class="sr" data-go-text>Claim</span>
</button>
<span class="claim__line" aria-hidden="true" data-line></span>
</div>
<div class="claim__under">
<p class="claim__status" id="claim-status" data-status><span class="status__line">Letters, numbers and hyphens, 3 to 24 of them.</span></p>
<div class="claim__ideas" data-ideas></div>
</div>
<p class="sr" role="status" aria-live="polite" data-live></p>
</form>
</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.
32 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 campo del nome da prenotare» da Animorio e adattala al mio sitoCosa fa
Su una pagina nera, sotto la piccola scritta Claim your page, un campo scuro dagli angoli tondi con dentro orrin.page/ in grigio e, dove andrà il nome, yourname in un grigio più scuro; a destra il pulsante chiaro Claim. Sotto: Letters, numbers and hyphens, 3 to 24 of them. Scrivendo, ogni lettera sale da sotto stretta e sottile e prende larghezza e peso posandosi; una maiuscola compare com’è e subito cade via mentre al suo posto sale la minuscola, uno spazio diventa un trattino, un punto esclamativo cade e basta. Un attimo dopo l’ultimo tasto una breve linea lime corre avanti e indietro sotto il nome e sotto si legge Checking orrin.page/nora…. Se il nome è preso, una linea grigia lo barra da sinistra a destra, le lettere si spengono e arrivano tre pillole con nomi liberi, nora-studio, hello-nora, nora-makes, con la parte nuova in grigio. Toccandone una, nora resta ferma e -studio sale lettera dopo lettera; libero, il nome e il pulsante diventano lime e sotto si legge che è libero. Premendo Claim il pulsante si trasforma in Claiming, poi in Copy link: le lettere del nome prendono peso una dopo l’altra facendosi posto, tutto l’indirizzo diventa bianco e una linea lime lo sottolinea. Copy link si trasforma in Copied e torna; Change riporta al nome libero, da cambiare.
Come funziona
Un campo vero sotto lettere disegnate
Il nome è un input vero, con le sue parole trasparenti: il cursore, la selezione, l’incolla e la tastiera restano quelli del browser. Sopra, ogni lettera è una scatola larga quanto la lettera a riposo, messa al suo posto con le larghezze misurate su un canvas nello stesso carattere (measureText delle parti iniziali del nome, con la crenatura). Se il nome è più lungo del campo, le lettere seguono lo scorrimento dell’input.
La trasformazione lettera per lettera
Fra la parola di prima e quella nuova si cerca la sottosequenza comune più lunga (una tabella di programmazione dinamica): le lettere in comune scivolano al posto nuovo con back.out, le altre cadono di RISE pixel stringendosi sull’asse wdth di Mona Sans e perdendo peso, quelle nuove salgono da sotto, strette e leggere, e prendono wdth 100 e il loro peso, sfalsate di STAGGER. Lo stesso motore fa le parole del pulsante, che prende la nuova larghezza sullo stesso rimbalzo.
Quello che hai scritto, poi quello che un indirizzo può tenere
A ogni tasto si mostra prima il testo com’è stato scritto e 12 centesimi di secondo dopo quello normalizzato (minuscole, spazi e punti in trattini, il resto tolto), rimettendo il cursore nel punto giusto: la maiuscola si vede cadere e la minuscola salire. Lunghezza, trattini e nomi riservati si controllano subito; il resto QUIET secondi dopo l’ultimo tasto con check(), una promessa da sostituire con una richiesta vera, e una risposta vecchia viene ignorata.
Preso, libero, prenotato
Preso: una linea barra il nome (scaleX da sinistra), il campo ha aria-invalid e sotto arrivano tre nomi liberi costruiti dal tuo, con le lettere in comune in chiaro; scegliendone uno, le lettere che hai già restano ferme. Libero: nome e pulsante in lime. Premendo il pulsante mentre il nome è ancora da controllare, lo si controlla subito e si prenota se è libero. Prenotato (post() finge la richiesta), il peso sale a CLAIMED lettera per lettera con le posizioni rimisurate, e una linea lime disegna sotto l’indirizzo intero.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MORPH | script.js | 0.5 | I secondi che una lettera impiega a scivolare al posto nuovo. |
RISE | script.js | 10 | Da quanto sotto sale una lettera nuova, in pixel. |
STAGGER | script.js | 0.03 | I secondi fra una lettera nuova e la successiva. |
QUIET | script.js | 0.45 | I secondi di silenzio dopo l’ultimo tasto prima di controllare il nome. |
CHECK | script.js | 0.6 | Quanto dura il controllo finto di un nome, in secondi. |
WAIT | script.js | 0.7 | Quanto dura la prenotazione finta, in secondi. |
CLAIMED | script.js | 700 | Il peso che prendono le lettere quando il nome è tuo. |
TAKEN | script.js | ['nora', 'mira', 'sam', 'alex', 'studio', 'hello', 'design', 'photo', 'anna', 'luca', 'maker', 'shop'] | I nomi già presi in questa demo. |
Quando usarla
Nell’iscrizione a un servizio dove ognuno ha il suo indirizzo: pagine personali, portfolio, negozi su una piattaforma, profili, link in bio. Va bene anche come primo passo di una landing page, dove scegliere il nome è il gesto che fa iscrivere. La trasformazione dice cosa succede al nome mentre lo scrivi, senza messaggi di errore per una maiuscola o uno spazio.
Sul telefono
Il campo prende la larghezza dello schermo (358 pixel su un telefono di 390), alto 60 pixel, con le lettere a 17 pixel (l’input è comunque a più di 16, quindi Safari non ingrandisce); il pulsante resta dentro il campo. Il tasto Invio della tastiera dice Go e prenota. Un nome più lungo dello spazio scorre e le lettere disegnate scorrono con lui. Le pillole dei nomi liberi vanno a capo se serve e sono alte 34 pixel.
Con il movimento ridotto
Le lettere non scivolano, non cadono e non salgono: compaiono e spariscono in dissolvenza, già al loro posto. La linea del controllo non corre, la barra del nome preso e quella sotto il nome prenotato compaiono subito; i messaggi cambiano in dissolvenza.
Trappole
- Il colore delle lettere del nome (lime se libero, bianco se prenotato) era scritto per tutte le lettere del modulo, e prendeva anche quelle del pulsante: lime su lime e bianco su bianco, il pulsante restava vuoto. Ora vale solo dentro il campo.
- La maiuscola si correggeva 16 centesimi di secondo dopo il tasto, ma un tasto nuovo annullava la correzione in attesa: scrivendo a quel ritmo la N restava maiuscola fino all’ultima lettera. Ora la correzione arriva dopo 12 centesimi e ogni tasto corregge tutto il nome.
- Ritirando la barra di un nome preso, la sua larghezza veniva rimisurata sul nome nuovo, più lungo, e per un attimo la barra si allungava oltre la parola. Ora si misura solo quando compare.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
