Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La parola nella fessura
Animazione di testo nello stile minimal: una parola enorme viene tagliata a metà da un filo sottile, la metà alta scivola a sinistra e quella bassa a destra, e nella fessura che si apre sale una seconda parola, piccola e spaziata. Poi le metà si richiudono su di lei mentre cresce e prende peso, e diventa la nuova parola grande.
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 word in the slit</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" data-stage>
<!-- the word people read; everything drawn below is only its picture -->
<h1 class="sr" data-read>Slow</h1>
<!-- the rig: one line box of the big word, placed so that the cut runs across the middle of the screen.
The script fills it: the whole word (at rest), the two halves that slide apart, the slit with the next
word, and the two hairlines of the blade -->
<div class="rig" data-rig aria-hidden="true">
<div class="line line--whole" data-whole></div>
<div class="band band--top" data-band="top"><div class="track" data-track="top"></div></div>
<div class="band band--bottom" data-band="bottom"><div class="track" data-track="bottom"></div></div>
<div class="slit" data-slit><div class="line line--small" data-small></div></div>
<div class="blade blade--top" data-blade><i></i></div>
<div class="blade blade--bottom" data-blade><i></i></div>
</div>
<!-- an invisible copy of the word, to measure sizes and the baseline -->
<div class="line line--probe" data-probe aria-hidden="true"></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.
16 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 parola nella fessura» da Animorio e adattala al mio sitoCosa fa
Su una carta color avorio c’è solo una parola, enorme e nera: SLOW. Un filo blu sottilissimo la attraversa da sinistra a destra a metà dell’altezza delle maiuscole, come una lama. Le due metà cedono di un soffio nel verso opposto, poi la metà alta scivola a sinistra e quella bassa a destra, e intanto si allontanano in verticale: fra le due si apre una fessura orizzontale, con i due fili blu sui bordi. Dentro sale una lettera dopo l’altra una seconda parola, DOWN, piccola, leggera, larga e spaziata, nello stesso blu. Mentre la si legge le metà continuano a scivolare piano. Poi tutto riparte: le metà di SLOW escono dai lati dello schermo, le metà di DOWN grande arrivano dai lati opposti, e la parola nella fessura cresce, si stringe, prende peso e perde la spaziatura finché è grande quanto loro; le metà si richiudono su di lei con un piccolo colpo, e resta DOWN, intera e nera. Il filo scorre via verso destra e la parola successiva aspetta il suo taglio: SLOW, DOWN, LOOK, AGAIN, e di nuovo SLOW.
Come funziona
Il taglio giusto
Il taglio passa a metà delle maiuscole, non a metà della riga: la riga ha spazio sopra e sotto le lettere. L’altezza delle maiuscole si legge da un canvas (measureText della H, actualBoundingBoxAscent), la linea di base da un inline-block vuoto messo in fondo alla parola, che si appoggia proprio lì. Il taglio è un numero intero di pixel: così le due metà ferme non lasciano una riga chiara fra loro.
Due finestre, due nastri
Le metà sono due finestre con overflow hidden sulla stessa riga: quella alta va dal bordo al taglio, quella bassa dal taglio in giù. In ognuna scorre un nastro con due copie: la parola di adesso al centro e la successiva fuori dallo schermo, a destra nel nastro alto e a sinistra in quello basso. Spostando il nastro alto a sinistra e quello basso a destra della stessa distanza, la parola nuova arriva al centro intera. A riposo si vede una copia unica della parola, identica pixel per pixel.
La fessura
Fra le finestre c’è una terza copia della riga, ritagliata con clip-path inset alla striscia fra le due metà. Dentro c’è la parola successiva vera, grande, ridotta con scale dal punto del taglio: lettera per lettera è la stessa delle metà, quindi quando la scala torna a 1 combacia. Le lettere salgono con un ritardo sfalsato calcolato a mano (expo.out per ciascuna), perché le parole cambiano e una timeline costruita una volta sola non può puntare a lettere che ancora non ci sono.
Un solo stato, disegnato a ogni fotogramma
Tutta la regia muove quattro numeri: lo scivolamento (0 fermo, 1 aperto, 2 parola nuova al centro), la fessura (0 chiusa, 1 aperta), la crescita e la salita delle lettere. Una funzione sul ticker di GSAP li traduce in transform, clip-path, font-variation-settings e letter-spacing, e scrive solo quello che cambia. Le misure in pixel (quanto scivolare, quanto aprire) si rifanno quando cambia la finestra, e la timeline non se ne accorge.
Molle misurate
Lo scivolamento usa expo.inOut, con un piccolo anticipo all’indietro quando il filo finisce di tagliare. La fessura si apre e si chiude con una molla smorzata scritta come funzione di easing (BOUNCE decide lo smorzamento e la molla finisce esattamente su 1): aprendosi passa la misura di qualche pixel, chiudendosi le metà si urtano e si sovrappongono di un pixel prima di fermarsi. La parola piccola cresce con expo.inOut e intanto passa da larghezza 112, peso 380 e spaziatura 0,16 em ai valori della parola grande.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['Slow', 'down', 'look', 'again'] | Le parole, una dopo l’altra: ognuna aspetta nella fessura e poi diventa quella grande. Parole corte e di lunghezza simile si leggono meglio. |
WEIGHT | script.js | 800 | Il peso della parola grande, da 100 (un capello) a 900 (nerissimo). |
WIDTH | script.js | 75 | La larghezza della parola grande sull’asse wdth del carattere: 62 strettissima, 125 larga. |
SMALL | script.js | 0.3 | Quanto è grande la parola nella fessura rispetto a quella grande. La fessura si apre di conseguenza. |
SHIFT | script.js | 0.16 | Quanto scivolano le metà aprendo la fessura, in parti della larghezza della parola. |
BOUNCE | script.js | 0.35 | Quanto la fessura passa la misura aprendosi e quanto le metà si urtano chiudendosi: 0 si fermano secche, 1 rimbalzano molto. |
HOLD | script.js | 1.0 | Quanti secondi resta aperta la fessura con la parola piccola (la parola grande resta circa la metà). |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
LOOP | script.js | true | Se dopo l’ultima parola torna la prima e si ricomincia. Con false si ferma sull’ultima. |
Quando usarla
Per l’apertura di un sito dove una parola sola deve fare tutto il lavoro: un portfolio, uno studio grafico, una rivista, una campagna o il lancio di un prodotto con un motto da dire a pezzi. Funziona con poche parole corte che si leggono in fila (una frase spezzata, i servizi di uno studio, i nomi di una collezione); il taglio e la fessura chiedono un carattere pesante e grande, con molto spazio intorno.
Sul telefono
La stessa animazione: la parola si misura per riempire quasi tutta la larghezza dello schermo, e le distanze dello scivolamento e della fessura si ricavano dalla sua misura. Girando il telefono tutto si rimisura senza fermarsi.
Con il movimento ridotto
Niente taglio, niente scivolamento e niente crescita: la parola resta ferma qualche secondo, svanisce e al suo posto compare la successiva in dissolvenza, e così via.
Trappole
- Il taglio va a metà delle maiuscole, non a metà della riga: la riga ha spazio sopra per gli accenti e sotto per le discendenti, e a metà riga il taglio cadrebbe fuori posto. Il punto giusto è la linea di base meno metà dell’altezza delle maiuscole.
- Un taglio a mezzo pixel fa sfumare il bordo di tutte e due le metà, e ferme lascerebbero una riga chiara attraverso la parola. Il taglio si arrotonda al pixel, e a riposo si mostra una copia unica della parola invece delle due metà.
- Uno span inline-block perde la crenatura con la lettera accanto, e la parola piccola cresciuta non combacerebbe più con le metà. Gli span delle lettere restano in linea e salgono con position relative e top, e tutte le copie della parola (intera, metà e fessura) sono costruite allo stesso modo.
- La parola successiva, nel nastro, deve restare fuori dallo schermo anche quando le metà sono già scivolate per aprire la fessura: la sua distanza è metà schermo più lo scivolamento più metà della parola più larga, non solo metà schermo.
- Le parole cambiano a ogni giro, quindi le tween non possono puntare alle lettere, che a timeline costruita non esistono ancora: la timeline muove quattro numeri su un oggetto e una funzione sul ticker li disegna. Così una timeline sola va bene per tutte le parole, e un cambio di finestra rimisura i pixel senza toccarla.
- Saltando a un punto della timeline con pause(tempo) i tl.call in mezzo non scattano (GSAP sopprime gli eventi): per guardare un fotogramma lontano la parola resta quella vecchia. Nella demo vera la timeline scorre e il cambio di parola avviene sempre.
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wght e wdth) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
