Il menu che si apre dal pulsante
Menu, Transizioni, Testo
Gratis
Tutti i componenti
La ricerca che finisce la parola
Nello stile minimal: la ricerca di un diario personale che finisce la parola mentre scrivi. Il resto dell’argomento aspetta dopo il cursore, nello stesso carattere ma sottile e stretto, e ogni lettera scritta sopra si inchiostra prendendo peso e larghezza su una molla. La riga del campo si stringe sotto la parola scritta e una linea tratteggiata misura quello che resta; Tab la completa, le frecce scelgono un altro argomento e la fine della parola rotola al nuovo.
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 search that finishes the word</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the search of a personal journal. Typing, the field finishes the word: the rest of the best topic waits
after the caret in hairline, condensed letters, and every letter typed over it inks in. The thin line of the
field closes in under the word written, and a dotted line measures what is left to write. Tab, the right
arrow or a tap on the grey letters complete it; the arrows choose another topic; Enter searches.
The letters and the rows are made by the script from the list at the top of script.js -->
<div class="finish" data-finish data-autoclic>
<div class="finish__field" data-field>
<svg class="finish__lens" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.5 4.75a5.75 5.75 0 1 0 0 11.5a5.75 5.75 0 1 0 0-11.5zM14.75 14.75l4.75 4.75"/></svg>
<div class="finish__wrap" data-wrap>
<div class="finish__shake" data-shake>
<span class="finish__holder" aria-hidden="true" data-holder>Search the journal</span>
<div class="finish__track" aria-hidden="true" data-track>
<span class="finish__text" data-text></span>
<span class="finish__caret" data-caret></span>
</div>
</div>
<input class="finish__input" id="finish-input" type="text" inputmode="search" enterkeyhint="search" role="combobox" aria-label="Search the journal" aria-autocomplete="both" aria-expanded="false" aria-controls="finish-list" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" maxlength="20" data-input>
</div>
<button class="finish__key" type="button" tabindex="-1" aria-label="Complete the word" data-key>
<span class="key__tab" aria-hidden="true">tab</span>
<svg class="key__arrow" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11.5M11 5.5l4.5 4.5L11 14.5"/></svg>
</button>
<span class="finish__rule" aria-hidden="true">
<span class="rule__ink" data-ink></span>
<span class="rule__dots" data-dots></span>
<span class="rule__tick" data-tick></span>
</span>
</div>
<div class="finish__room" data-room>
<span class="finish__band" aria-hidden="true" data-band></span>
<ul class="finish__list" id="finish-list" role="listbox" aria-label="Topics" data-list></ul>
<p class="finish__note" data-note></p>
</div>
<p class="sr" role="status" aria-live="polite" data-said></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.
85 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 «La ricerca che finisce la parola» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un campo di ricerca fatto solo di una lente, di una scritta grande e leggera, Search the journal, e di una riga sottile; sotto, Try Photography, Bread or Walking. Col fuoco nel campo la riga diventa blu per tutta la larghezza. Alla prima lettera la riga blu si stringe su una molla fino a stare proprio sotto la lettera scritta, e dopo il cursore compare il resto dell’argomento più letto che comincia così: per p, hotography, in grigio, sottilissimo e stretto, che si apre da una fessura lettera per lettera. Sotto la parte grigia corre una linea tratteggiata che finisce con una piccola tacca, come una quota: è quello che resta da scrivere. Sotto il campo salgono gli argomenti che cominciano con quelle lettere, coi più letti prima e quanti articoli ha ognuno; quello scelto ha una fascia grigia. Se la lettera scritta è quella che il campo aspettava, la lettera grigia si inchiostra: prende peso e larghezza con un piccolo eccesso e il ritorno, e quelle dopo si spostano per farle posto. Se va da un’altra parte, la fine grigia cade e svanisce e quella del nuovo argomento si apre al suo posto. Le frecce in giù e in su, o il puntatore sulla lista, scelgono un altro argomento e la fine nel campo rotola: quella vecchia esce in alto, la nuova entra da sotto. Tab, la freccia a destra, il tasto tab disegnato a destra del campo o un tocco sulle lettere grigie completano la parola, e le lettere si inchiostrano una dopo l’altra mentre la riga blu le insegue. Invio cerca: sotto si legge per esempio 9 essays on Pottery e il campo fa un piccolo sobbalzo. Cancellando, le lettere scritte tornano grigie e sottili se l’argomento le contiene ancora. Se niente comincia così la riga diventa grigia e sotto si legge Nothing on con le lettere scritte; Invio fa scuotere la parola. Esc chiude la lista, poi svuota il campo e la riga blu torna larga. Con niente scritto, il puntatore su uno degli argomenti proposti lo fa comparire nel campo in grigio, come una parola da finire.
Come funziona
Il campo vero sotto le lettere disegnate
L’input c’è ed è vero, con role combobox, aria-autocomplete both, aria-expanded e aria-activedescendant, ma il suo testo e il suo cursore sono trasparenti: tiene la tastiera, la selezione, l’incolla e gli screen reader. Le lettere che si vedono sono span disegnati dallo script, una per carattere e con la crenatura spenta, nello stesso carattere e alla stessa misura dell’input, così un clic cade sul punto giusto. Il cursore è un segmento blu messo dopo la lettera giusta, misurata con getBoundingClientRect.
Le lettere che restano, quelle che vanno e quelle che arrivano
A ogni cambiamento syncLetters() mette in fila le lettere scritte e poi la fine dell’argomento scelto, e la confronta con gli span che ci sono già: finché il carattere è lo stesso (senza badare alle maiuscole) lo span resta e cambia solo stato, inchiostrato o grigio. Il resto se ne va: gli span vengono tolti dalla riga dove stanno, rimessi in posizione assoluta allo stesso punto e fatti cadere e svanire, così le lettere rimaste si richiudono subito. Le nuove si aprono da una fessura, dall’asse wdth a 25 a quello del grigio.
Inchiostrare con gli assi del carattere
Roboto Flex ha gli assi wght da 100 a 1000 e wdth da 25 a 151: le lettere da scrivere stanno a GHOST (peso 130, larghezza 70), quelle scritte a INKED (470 e 100). GSAP porta i due assi con una curva a molla smorzata scritta come funzione, che passa la meta di pochi punti e torna, e a ogni fotogramma riscrive font-variation-settings. Il colore passa dal grigio al nero con una transizione CSS, ritardata come il peso quando la parola si completa a onda, una lettera ogni STAGGER secondi.
La riga sotto la parola, su una molla vera
La riga blu ha due capi e la linea tratteggiata un terzo, ognuno su una molla vera (rigidità e smorzamento di SPRING, passo limitato a 1/30 di secondo e diviso in passi da 1/240). A ogni fotogramma il ciclo misura dove finiscono l’ultima lettera scritta e l’ultima grigia, anche a metà della loro animazione, e le molle le inseguono: così la riga si stringe dalla larghezza intera a sotto la prima lettera e poi cresce lettera per lettera. Il ciclo resta acceso solo finché qualcosa si muove, e si riaccende al resize perché le misure sono in pixel.
La lista e la scelta
search() tiene gli argomenti che cominciano con le lettere scritte, coi più letti prima; l’argomento scelto resta lo stesso finché combacia, così cancellando non cambia sotto le dita. Le righe sono in posizione assoluta: quelle che non valgono più svaniscono in 0,12 secondi, le altre aspettano e scivolano al posto nuovo con un piccolo eccesso, le nuove salgono una dopo l’altra. Le frecce o il puntatore spostano la fascia e fanno rotolare la fine nel campo; Tab e la freccia a destra la completano solo se c’è, altrimenti Tab fa il suo lavoro.
Il giro dell’anteprima
Un clic da script (detail 0, quello dell’anteprima della libreria) avvia una timeline di GSAP di circa 9 secondi che scrive senza prendere il fuoco: p, poi o (la fine passa da Photography a Poetry), la freccia in giù su Pottery, t sopra la t grigia, Tab, Invio, e infine Esc riporta tutto a riposo. Mentre il giro è in corso gli altri clic da script si ignorano; un tocco o un tasto veri lo fermano subito.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TOPICS | script.js | [['Photography', 14], ['Poetry', 11], ['Pottery', 9], …] | Gli argomenti del diario e quanti articoli ha ognuno. |
SHOWN | script.js | 5 | Quanti argomenti mostra al massimo la lista. |
UNIT | script.js | ['essay', 'essays'] | La parola dopo il numero, per uno e per più di uno. |
GHOST | script.js | [130, 70] | Il peso e la larghezza delle lettere ancora da scrivere. |
INKED | script.js | [470, 100] | Il peso e la larghezza delle lettere scritte. |
STAGGER | script.js | 0.04 | I secondi fra una lettera e la successiva che si inchiostra quando la parola si completa. |
SETTLE | script.js | 0.55 | I secondi in cui una lettera si inchiostra e si assesta. |
SPRING | script.js | [420, 35] | La molla della riga sotto la parola: rigidità e smorzamento. |
TRIES | script.js | ['Photography', 'Bread', 'Walking'] | Gli argomenti proposti quando non c’è niente di scritto. |
Quando usarla
Per la ricerca di un blog, di un diario, di una documentazione, di un negozio con categorie dai nomi corti o del campo dei tag di un’app: ovunque le parole da cercare sono poche e conosciute e conviene finirle per chi scrive, come fa la barra degli indirizzi del browser. La funzione search() è la sola da cambiare per chiedere gli argomenti a un server.
Sul telefono
Il campo prende la larghezza dello schermo meno 32 pixel e le parole scendono a 27 pixel, così anche Photography sta comoda; il campo dice alla tastiera di mostrare il tasto per cercare. Sul telefono non c’è il tasto Tab: al suo posto, a destra del campo, c’è un tondo con una freccia disegnata, e anche un tocco sulle lettere grigie completa la parola. Le righe restano alte 46 pixel per il dito e un tocco ne sceglie una e la cerca. Assi, molle e rotolamenti sono gli stessi del computer.
Con il movimento ridotto
Niente molle, cadute né rotolamenti: la riga blu salta subito sotto la parola, la fine grigia compare e sparisce in dissolvenza già al suo posto, le righe della lista appaiono e svaniscono senza muoversi e la fascia salta da una riga all’altra. Le lettere si inchiostrano cambiando peso e larghezza in un quinto di secondo, senza onda né eccesso, e il campo non sobbalza e non scuote la testa.
Trappole
- In un input non si può dare un peso diverso a una parte del testo: le lettere grigie non possono stare dentro il campo. Il testo dell’input è trasparente e le lettere che si vedono sono span sopra di lui, nello stesso carattere, alla stessa misura e con la crenatura spenta da tutte e due le parti, così il clic e la selezione cadono dove si vede. Il cursore nativo, che non sa delle lettere ancora in movimento, è spento e ne disegniamo uno noi.
- Togliendo dalla riga le lettere che se ne vanno, quelle dopo scivolavano a sinistra mentre ancora svanivano e si accavallavano con le nuove. Ora le posizioni di tutte si misurano prima di toccarne una, poi ognuna viene messa in posizione assoluta al suo punto e svanisce lì in 0,2 secondi; le nuove aspettano un decimo di secondo.
- Con la scritta di prova che svaniva in 0,2 secondi, la prima lettera grigia nasceva sopra Search the journal ancora visibile e si leggeva un pasticcio: ora la scritta se ne va in 0,06 secondi appena c’è qualcosa nel campo.
- Una riga che saliva a chiudere un buco passava sopra quella che stava svanendo: ora chi se ne va svanisce in 0,12 secondi e chi resta parte dopo 0,12.
- La riga sotto la parola seguiva la parola solo alla fine dell’animazione e restava indietro: ora il ciclo misura le lettere a ogni fotogramma mentre prendono peso e larghezza, e la molla insegue il punto vero.
- Il Tab completava sempre e non si usciva più dal campo con la tastiera: ora lo intercettiamo solo quando c’è una fine grigia da completare.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile, assi wght e wdth) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 18 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.
