Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
La sigla che si apre in parole
Una sigla di tre lettere nello stile minimal: una dopo l’altra le maiuscole si aprono, il resto della parola esce da una fessura rossa alla loro destra e spinge la parola dopo, che lo segue su una molla. Letto il nome intero, le parole rientrano e torna la sigla.
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 acronym that spells itself out</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- one line on a hairline: the script builds a word for every name in WORDS, the initial in front and the rest
of the word folded away behind it, in a slot that opens to its right -->
<div class="line" data-line aria-hidden="true">
<i class="rule" data-rule></i>
</div>
<h1 class="sr-only" data-name>Half Open Window</h1>
</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 «La sigla che si apre in parole» da Animorio e adattala al mio sitoCosa fa
Su una carta color avorio si disegna dal centro una riga sottilissima, sotto spuntano tre tacche e dalla riga salgono tre maiuscole nere e larghe: HOW, il nome di uno studio. Dopo un attimo la H si apre: accanto a lei compare una fessura rossa, la lettera si stringe un poco per fare posto e dalla fessura esce il resto della parola, «alf», leggero e strettissimo; ogni lettera, appena fuori, si allarga alla sua misura con un piccolo assestamento. La parola che cresce spinge la O, che la segue su una molla: resta indietro, si piega un filo all’indietro come chi viene spinto, poi arriva al suo posto e lo passa di un pixel. Poi si apre la O in «Open», poi la W in «Window», e il nome intero «Half Open Window» resta da leggere, con le iniziali ancora nere e pesanti. Siccome il nome è più lungo della pagina, la riga si allontana piano mentre cresce, sempre al centro. Poi le parole rientrano nelle loro fessure, da destra: le lettere si stringono mentre spariscono, la parola dopo viene tirata indietro dalla molla e ogni maiuscola si chiude con un piccolo scatto. Torna la sigla, le maiuscole scendono dentro la riga, la riga si ritira e tutto ricomincia.
Come funziona
Una parola in tre pezzi
Per ogni parola di WORDS lo script fa un blocco con tre pezzi uno sopra l’altro: la maiuscola, una fessura (uno span con overflow: hidden, largo zero a riposo) e dentro la fessura il resto della parola, attaccato al suo bordo destro. Quando la fessura si allarga, la parola esce da dietro la maiuscola come un metro da un astuccio: per prime si vedono le ultime lettere. La fessura rossa è una riga di due pixel sul bordo, che si alza quando la parola si muove e si abbassa quando è ferma.
Lettere che si allargano appena fuori
Il carattere è Anybody, variabile negli assi wdth (da 50 a 150) e wght (da 100 a 900). Ogni lettera ha un numero k da 0 a 1: a 0 è larga SQUEEZE e sottile, a 1 è larga 100 e pesa WORD_WEIGHT. Le lettere arrivano a 1 dall’ultima alla prima, con una molla smorzata scritta come funzione di easing (SPRING decide lo smorzamento e la molla finisce esattamente su 1), quindi passano la loro misura di un soffio e ci tornano. Anche la maiuscola si muove sull’asse wdth: si stringe di 18 quando la parola parte e si allarga di 12 quando si chiude.
Le misure vere, a ogni fotogramma
Su una funzione del ticker di GSAP lo script scrive prima gli assi di tutte le lettere, poi legge le larghezze vere della maiuscola e del resto della parola (getBoundingClientRect), poi scrive le posizioni: così la pagina si ricalcola una volta sola per fotogramma. Le larghezze lette vanno divise per lo zoom della riga e, se la parola è piegata, scontate di tan(angolo) per l’altezza della lettera.
La spinta a molla
Le posizioni si calcolano dall’inizio della riga: la prima parola sta ferma, ogni altra insegue la fine di quella prima più uno spazio (stretto fra le maiuscole, normale fra le parole intere) con una molla vera, simulata in quattro passi per fotogramma. Se arriva più vicina di 0,06 em viene spinta e prende la velocità di chi la spinge, poi la molla la porta al suo posto con un pixel di troppo. Quanto resta indietro decide anche di quanto si piega (skewX dalla linea di base). Solo alla fine la riga intera si sposta per restare al centro, e lo zoom la rimpicciolisce se non ci sta.
La regia
Una timeline GSAP con repeat: -1 muove solo numeri: la riga, le tacche, le maiuscole che salgono (tagliate alla linea di base da un clip-path), l’apertura di ogni parola STAGGER secondi dopo l’altra, HOLD secondi col nome intero, la chiusura da destra, le maiuscole che scendono. SPEED è il timeScale della timeline e moltiplica anche il tempo della molla, così tutto accelera insieme.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['Half', 'Open', 'Window'] | Il nome, parola per parola: le prime lettere fanno la sigla. Da due a quattro parole. |
INITIAL_WEIGHT | script.js | 800 | Il peso delle maiuscole, da 100 (un capello) a 900 (nerissimo). |
WORD_WEIGHT | script.js | 330 | Il peso a cui si ferma il resto di ogni parola. Più è lontano da quello delle maiuscole, più la sigla si vede dentro il nome. |
SQUEEZE | script.js | 50 | Quanto sono strette le lettere quando escono dalla fessura, sull’asse wdth: 50 è il minimo del carattere, 100 la larghezza normale. |
SPRING | script.js | 0.5 | Quanto è elastico tutto: 0 scivola e si ferma secco, 1 spinge forte e oscilla prima di posarsi. |
STAGGER | script.js | 0.55 | Quanti secondi passano fra una parola che si apre e la successiva. |
HOLD | script.js | 2.2 | Quanti secondi resta il nome intero prima di richiudersi nella sigla. |
SPEED | script.js | 1 | La velocità di tutta l’animazione, molle comprese: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per il marchio di chi si presenta con una sigla: un’agenzia, uno studio di architettura o di grafica, uno studio legale, un festival, una fondazione. Funziona come intro del logo all’apertura del sito, in testa a una pagina «chi siamo» o in fondo, accanto ai contatti, dove spiega in pochi secondi cosa vogliono dire le lettere.
Sul telefono
La stessa animazione: la sigla è più grande rispetto allo schermo e la riga si allontana di più per far stare il nome intero su una riga, da bordo a bordo meno i margini.
Con il movimento ridotto
Niente esce, si allarga né si spinge: la sigla compare in dissolvenza già al suo posto, svanisce, al suo posto compare il nome intero, già composto, e poi di nuovo la sigla. La riga e le tacche ci sono già.
Trappole
- Con le molle calcolate attorno al centro della riga, quando una parola si chiudeva la prima parola andava a destra per ricentrare la riga e finiva addosso alla seconda, rimasta indietro. Le molle vanno calcolate dall’inizio della riga, con la prima parola ferma, e la riga si ricentra dopo, tutta insieme.
- getBoundingClientRect misura anche le trasformazioni: con la riga rimpicciolita le larghezze lette sono più piccole del vero, e con la parola piegata più grandi (il riquadro di una lettera inclinata è più largo). Si divide per lo zoom e si toglie tan(angolo) per l’altezza della lettera; offsetWidth non sente le trasformazioni ma arrotonda al pixel, e la parola avanzerebbe a scatti.
- Il clip-path che taglia le maiuscole alla linea di base serve solo mentre salgono e scendono: lasciato acceso, tagliava la gamba della p di «Open».
- Nella spinta le lettere di due parole si toccavano e il nome diventava «HalfOW»: la spinta parte a 0,06 em di distanza, e lo spazio stretto della sigla è un po’ più largo (0,07 em), così la sigla a riposo non spinge.
- Il canvas non conosce l’asse wdth, ma l’altezza delle maiuscole non cambia con la larghezza: per centrare la riga in altezza basta misurare la H sul canvas al peso giusto.
Librerie
GSAP 3.15.0, Anybody (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
