Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo dal campionario dei pesi
Un’intro di logo nello stile minimal: il nome arriva scritto nove volte, dal peso 100 al 900, come in un campionario di caratteri; una linea sottile vermiglia scende a scatti e sceglie un peso, le altre righe si chiudono su quella come un ventaglio e la riga scelta cresce fino al logo. Nel Playground ci metti il tuo nome e scegli il peso.
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 weight specimen logo</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" role="img" aria-label="ostra" data-stage>
<!-- the specimen: one row of the name for every weight, built by the script -->
<div class="rows" data-rows aria-hidden="true"></div>
<!-- the thin selector that picks the weight and stays under the logo -->
<span class="sel" data-sel aria-hidden="true"></span>
</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.
11 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 logo dal campionario dei pesi» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero arrivano dall’alto in basso, una dopo l’altra, nove righe con il nome del marchio, «ostra»: la prima sottilissima, peso 100, l’ultima nerissima, peso 900, come nella pagina di un campionario di caratteri; a sinistra di ogni riga c’è il suo peso in piccoli numeri grigi. Una linea sottile vermiglia compare sotto la prima riga e scende a scatti, una riga alla volta, fino al peso scelto, il 700: lo passa di un niente e torna indietro con una molla, e il numero 700 si accende di vermiglio. Allora le altre righe si chiudono su quella scelta, prima le più vicine e poi le più lontane, accelerando: mentre viaggiano prendono il suo peso, si schiacciano e svaniscono, come un ventaglio che si chiude; i numeri se ne vanno e la linea si stringe fino a stare sotto il nome. La riga scelta sente il colpo, si schiaccia e torna, poi cresce fino al centro dello schermo e diventa il logo, un pelo più grande del dovuto e poi giusta, e si allarga un poco sull’asse della larghezza. Il logo resta fermo con la sua linea sotto per qualche secondo; poi si stringe e svanisce, la linea si ritira e il campionario ricomincia.
Come funziona
Un carattere con tutti i pesi
Roboto Flex è variabile su peso (100 a 1000), larghezza e grandezza ottica: le nove righe sono lo stesso testo con font-variation-settings diversi. La grandezza delle righe si sceglie perché nove stiano nei due terzi dell’altezza e la più larga, al 900, nella larghezza con i numeri accanto; quella del logo perché il nome allargato stia nel 56% della larghezza (80% sul telefono).
Numeri, non pixel
La timeline di GSAP muove per ogni riga l’entrata e la chiusura (da 0 a 1), per la linea la riga su cui sta (anche a metà) e quanto è diventata la linea del logo, per il logo la crescita. Una funzione sul ticker li trasforma in posizioni, pesi e grandezze leggendo le misure del momento: se la finestra cambia misura a metà, tutto resta al suo posto.
La linea a scatti
La discesa della linea è una fila di tween brevi (70 millesimi, power2.out) uno per riga, con 15 millesimi di fermo fra l’uno e l’altro: sembra un selettore che scatta. Sul peso scelto va otto centesimi di riga oltre e torna con un elastic.out.
Il ventaglio che si chiude
Ogni riga si chiude con un power3.in partendo tanto più tardi quanto più è lontana dalla scelta (60 millesimi per riga): mentre viaggia il suo peso va verso quello scelto, la scala in altezza scende fino al 15% e l’opacità segue il cubo della strada fatta, così le righe svaniscono solo arrivando.
La crescita
La riga scelta cresce con un expo.inOut fino all’1,2% in più e torna giusta con un elastic.out; intanto la grandezza ottica passa da 48 a 144, la spaziatura si stringe e l’asse della larghezza sale di WIDEN punti con un power3.out che parte a metà crescita.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'ostra' | Il nome del marchio (fino a 12 lettere). |
WEIGHT | script.js | 700 | Il peso scelto per il logo, da 100 a 900: la linea si ferma sulla riga più vicina. |
LABELS | script.js | true | I numeri dei pesi accanto alle righe del campionario. |
WIDEN | script.js | 14 | Quanto il logo si allarga alla fine, sull’asse della larghezza (0 = resta com’è). |
SPEED | script.js | 1 | 2 = due volte più veloce, 0.5 = la metà. |
REST | script.js | 3 | Secondi in cui il logo resta fermo. |
LOOP | script.js | true | Il logo si stringe, sparisce e l’intro ricomincia. |
Quando usarla
Per presentare un marchio fatto solo di lettere con un gesto da tipografo: l’apertura del sito di una fonderia di caratteri, di uno studio di grafica o di branding, un portfolio, il caricamento di un’app di design, la presentazione di un’identità a un cliente.
Sul telefono
La stessa animazione con le misure adattate: le nove righe stanno nei due terzi dell’altezza, i numeri restano leggibili accanto e il logo finale riempie l’80% della larghezza.
Con il movimento ridotto
Niente si muove: il logo compare già al suo peso, con la linea sotto, in dissolvenza.
Trappole
- Il numero del peso scelto restava visibile mentre la riga cresceva e finiva sopra la linea vermiglia: ora svanisce mentre la linea va a mettersi sotto il nome.
- Le righe pesanti sono molto più larghe di quelle leggere: centrate una per una, i numeri allineati sulla riga del momento ballerebbero. I numeri si allineano tutti sulla riga più larga, quella al 900.
- Per ricominciare uguale, senza salti, l’entrata delle righe, la loro chiusura, la linea e la crescita partono da valori scritti (fromTo) e non da quelli che trovano: al secondo giro il campionario riparte vuoto anche se il logo è appena svanito.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,8 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.
