Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo dalle righe sottili
Un’intro di logo in stile minimal: righe orizzontali sottilissime entrano da sinistra e da destra, ognuna alla sua velocità, si fermano sfalsate, si allineano, si spezzano nei pezzi delle lettere e si gonfiano fino a diventare il marchio pieno; una riga rossa arriva fuori registro e torna al suo posto con l’ultimo scatto di un pixel. Nel Playground ci metti il tuo nome o carichi il tuo logo.
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 hairline-rules logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures the logo, slices it into thin rules and slides them in -->
<svg class="palco" data-stage role="img" aria-label="Ostrel" xmlns="http://www.w3.org/2000/svg">
<defs data-defs></defs>
<g data-world>
<!-- the solid logo, seen through one clip made of all the rows -->
<g data-solid></g>
<!-- the late row: its own slice of the logo, out of register until the last click -->
<g data-late></g>
<!-- the rules: one group per row, each with the pieces it breaks into -->
<g data-rules></g>
</g>
</svg>
<p class="nota">Click or tap to see it again</p>
</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.
13 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 dalle righe sottili» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo, vuoto, entrano righe nere sottilissime, una dopo l’altra, una da sinistra e una da destra: ognuna corre alla sua velocità, rallenta e si ferma un poco fuori posto, così il blocco ha i bordi sfrangiati come un paragrafo allineato a sinistra e a destra insieme. Ogni riga, fermandosi, va avanti di un pixel e torna indietro. L’ultima ad arrivare è rossa ed è la più lenta. Poi le righe si mettono a filo, tutte lunghe uguali, e si stringono in altezza: un pixel di troppo e un piccolo elastico. Ora ogni riga si spezza nei pezzi delle lettere che attraversa, dalla riga di mezzo verso l’esterno: i tratti fra una lettera e l’altra si ritirano dentro le lettere, e il marchio inventato, Ostrel, compare disegnato a tratteggio. La riga rossa si spezza per ultima. Poi le righe si gonfiano, dall’alto in basso, finché si toccano e le lettere sono piene; solo la fascia rossa resta spostata di qualche pixel, come una stampa fuori registro. All’ultimo scatta al suo posto, il logo intero fa un sussulto di un pixel e il rosso diventa nero. Mentre il logo è in mostra, una volta, una fessura sottilissima lo attraversa e si richiude. Dopo qualche secondo le lettere tornano righe, dal basso in alto, le righe si riallungano ed escono ai lati; tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: viene tagliata nelle stesse righe.
Come funziona
Una sola misura
Il palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel. Il logo si misura su una canvas con lo stesso carattere, Archivo a peso 800 (measureText, con actualBoundingBoxLeft, Right, Ascent e Descent per la scatola vera dell’inchiostro), e si sceglie la grandezza perché stia largo sul computer e un po’ più stretto sul telefono, mai più alto di 240 pixel: oltre, le righe smettono di sembrare sottili. La scatola si divide in ROWS fasce uguali, con una riga al centro di ognuna, spessa circa un terzo della fascia.
Dove c’è inchiostro
Il logo si disegna una volta su una canvas due o tre volte più fitta dello schermo e si legge con getImageData lungo la linea di mezzo di ogni fascia: dove l’opacità supera la metà c’è inchiostro. I tratti vicini meno di un pixel e poco si uniscono, quelli più corti di mezzo pixel si buttano. Ogni riga diventa un gruppo di rettangoli, uno per pezzo, che all’inizio sono tutti uguali e lunghi quanto la riga intera: sovrapposti, sembrano una riga sola.
Entrare, fermarsi, mettersi a filo
Ogni riga ha un lato (pari da sinistra, dispari da destra), una durata a caso fra 0,7 e 1,35 secondi e un punto dove si ferma, un poco prima del centro dalla sua parte. Entra con expo.out, che corre e poi plana, va un pixel e mezzo oltre e un elastic.out la riporta indietro. Poi tutte vanno a x = 0 con power3.inOut, con lo stesso pixel di troppo, mentre la distanza fra le righe si chiude e la loro lunghezza diventa la stessa per tutte.
Le righe si spezzano e si gonfiano
I rettangoli di ogni riga vanno ciascuno al suo pezzo (attr x e width): power3.inOut fino a un pixel più stretti, poi elastic.out, dalla riga di mezzo verso l’esterno. Per gonfiarle si passa alle lettere vere: il logo è disegnato una volta sola, visto attraverso un clipPath fatto di un rettangolo per fascia. Nello stesso fotogramma si spengono le righe e si accende il logo ritagliato in fasce sottili quanto le righe, poi ogni rettangolo del clip cresce fino alla fascia intera (mezzo pixel dentro la vicina, così non resta nessuna riga chiara).
La riga fuori registro e il tuo logo
La riga rossa ha un clip e una copia del logo tutti suoi, in rosso e spostati di LATE pixel. All’ultimo la copia va a −1 e torna a zero con un elastico, il riempimento sfuma nel nero, il gruppo intero scende di un pixel e risale; poi la fascia entra nel clip delle altre e la copia si spegne. Tutta l’entrata è una timeline sola, con le etichette start, justify, break, fill, reveal, rest e leave, e timeScale per la velocità. Se IMAGE ha un indirizzo, al posto della parola c’è l’immagine: la canvas legge la sua trasparenza, e le righe nere sfumano nei suoi colori invece di sparire di colpo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Ostrel' | Il logo scritto: le righe si spezzano nelle sue lettere. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola. |
ROWS | script.js | 20 | In quante righe si taglia il logo. Con un logo piccolo (un nome lungo, il telefono) le righe sono di meno, mai più vicine di quattro pixel e mezzo, così restano righe. |
RAGGED | script.js | 1 | Quanto si fermano sfalsate le righe prima di mettersi a filo. Con 0 arrivano già allineate. |
LATE | script.js | 3 | Di quanti pixel la riga rossa resta fuori registro prima dell’ultimo scatto. Con 0 non c’è la riga rossa. |
SPEED | script.js | 1 | La velocità di tutto: 2 è il doppio, 0.5 la metà. |
REST | script.js | 4 | Quanti secondi il logo resta in mostra prima che le righe se ne vadano. |
LOOP | script.js | true | Se il logo torna righe, le righe escono e tutto ricomincia. Con false il logo resta, e ogni tanto una fessura sottile lo attraversa. |
Quando usarla
Per presentare un logo con un gesto preciso, da tipografia: l’apertura del sito di uno studio di grafica o di architettura, di una rivista, di un marchio di moda o di design, di un portfolio, l’anteprima per un cliente, un caricamento, un post per i social. Sta bene dove il resto della pagina è sobrio. Funziona con un marchio scritto e con un’immagine.
Sul telefono
La stessa animazione con le misure adattate: il logo è più stretto e le righe sono di meno, così restano righe sottili e non diventano una macchia grigia. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: il logo a tratteggio compare in dissolvenza, poi sopra compare il logo pieno. Se l’animazione ricomincia, anche il logo se ne va in dissolvenza.
Trappole
- Un nome lungo o lo schermo del telefono fanno un logo basso, e venti righe a tre pixel l’una diventavano una fascia grigia senza lettere: le righe sono al massimo una ogni quattro pixel e mezzo, quindi meno di ROWS quando serve.
- Il passaggio dalle righe (rettangoli) alle lettere vere (il logo ritagliato in fasce) si fa nello stesso fotogramma e con la stessa altezza: i pezzi si leggono sulla linea di mezzo di ogni fascia, così la differenza è solo nella punta inclinata dei tratti curvi, e le fasce cominciano subito a gonfiarsi.
- La riga rossa ha un clip suo: se la sua fascia fosse anche nel clip delle altre, sotto il rosso spostato si vedrebbe un filo di nero al posto giusto. Entra nel clip comune solo quando è tornata a zero ed è diventata nera, e solo allora la copia rossa si spegne.
- Un’immagine presa da un altro sito non si può leggere sulla canvas (getImageData dà errore): allora ogni riga diventa un pezzo solo, largo quanto l’immagine. Le immagini caricate dal Playground sono indirizzi data: e si leggono.
- Un’immagine ha i suoi colori: spegnere di colpo le righe nere la faceva cambiare colore in un fotogramma, quindi con un’immagine le righe sfumano in mezzo secondo mentre le fasce si gonfiano.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,6 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.
