Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo battuto in morse
Un’intro di logo in stile minimal: una penna rossa sottile batte il nome in codice morse, al ritmo vero del codice, su una riga sottile; appena il codice di una lettera è finito, la lettera sale dalla riga sopra i suoi punti e le sue linee, leggera e stretta. Poi la parola si chiude, le lettere prendono peso e larghezza con una molla e il codice resta sotto il nome come una firma. 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 Morse-keyed logo</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="scena">
<!-- the stage: the script measures it, keys the name in Morse on a thin tape and raises the letters out of it -->
<svg class="palco" data-stage role="img" aria-label="tellum" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- the letters live above the tape: they rise out of it and sink back into it -->
<clipPath id="above-tape"><rect data-letter-clip /></clipPath>
<!-- the tape rolls up into the pen from its left end -->
<clipPath id="tape-roll"><rect data-tape-clip /></clipPath>
</defs>
<g data-world>
<!-- a hidden line of text, only to measure the letters with their variable axes -->
<text class="misura" data-measure visibility="hidden" aria-hidden="true"></text>
<!-- the tape: a hairline and the dots and dashes of the code -->
<g clip-path="url(#tape-roll)" data-tape>
<rect class="riga" data-line />
<g data-marks></g>
</g>
<!-- the letters, one text each -->
<g clip-path="url(#above-tape)" data-letters></g>
<!-- the pen that keys the code -->
<rect class="penna" data-pen />
</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.
14 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 battuto in morse» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo, vuoto, cade una piccola penna rossa, una tacca verticale sottile che arriva un filo più alta e si assesta. Parte e corre a passo costante, lasciandosi dietro una riga nera sottilissima, e batte il nome del marchio inventato, tellum, in codice morse, con il ritmo vero del codice: un punto vale un tempo, una linea tre, uno spazio fra i segni, tre fra le lettere. Dove il tasto è giù la riga si ingrossa in un punto o in una linea, che nasce un poco più alta e si posa, e la penna affonda di un pixel. Appena il codice di una lettera è finito, quella lettera sale dalla riga proprio sopra i suoi segni, sottile e stretta come il codice: esce veloce, va un pixel oltre, si allunga salendo e si schiaccia appena quando si ferma, e i suoi segni sotto sentono il colpo. Battuto tutto il nome, la parola si chiude: dal centro verso i lati le lettere scivolano al loro posto portandosi dietro il loro codice, superano il punto di un pixel e una molla le riporta indietro, e intanto prendono peso e larghezza (i due assi del carattere variabile) fino a diventare il logo pieno. Il codice resta sotto il nome, stretto alla sua larghezza, con la penna in fondo. Mentre il logo è in mostra la penna si alza, torna all’inizio e rilegge il codice: i segni saltano sotto di lei e ogni lettera fa un piccolo cenno quando il suo codice è letto. Poi le lettere si assottigliano e affondano di nuovo nella riga, il nastro si arrotola dentro la penna e tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: il nome viene battuto lo stesso e alla fine dalla riga sale l’immagine.
Come funziona
Il codice in tempi
Il nome diventa una fila di segni misurati in tempi, come nel morse vero: un punto uno, una linea tre, un tempo fra i segni della stessa lettera, tre fra le lettere, sette fra le parole. Ogni lettera si ricorda dove comincia e dove finisce il suo codice. Le lettere accentate si battono come la lettera semplice (normalize('NFD') e via i segni sopra). Un tempo dura circa tre secondi diviso tutti i tempi del nome, con un tetto: un nome lungo non si batte mai in più di quattro secondi e poco più.
Misurare con gli assi
La canvas sa misurare il peso ma non la larghezza di un carattere variabile, quindi le lettere si misurano su una riga di testo SVG nascosta, con lo stesso carattere (Anybody) e gli stessi assi: getStartPositionOfChar e getSubStringLength danno il centro di ogni lettera nella parola chiusa, con la crenatura vera, e getComputedTextLength la larghezza di ogni lettera stretta e leggera mentre sale. Da qui la scala del nastro: abbastanza largo perché ogni lettera stia sopra il suo codice senza toccare le vicine, mai più largo dello schermo.
La penna e il tasto
La penna corre con ease 'none', a velocità costante come un nastro di telegrafo, e la riga dietro di lei è lo stesso tween. Ogni segno si allarga mentre la penna gli passa sopra, e nasce alto 1,8 volte per poi posarsi con un elastico. Se la penna affonda o no non è un tween: lo decide a ogni fotogramma la funzione che disegna tutto, guardando se la penna sta sopra un segno. Così il tasto scatta giù e su esatto, a qualunque velocità.
La parola che si chiude
Ogni lettera ha la sua x nel nastro largo e la sua x nella parola chiusa: dal centro verso i lati, con 45 millesimi di ritardo l’una dall’altra, ci va con power3.inOut verso un punto un pixel oltre (SETTLE), poi elastic.out la riporta. Peso e larghezza (font-variation-settings, 'wght' e 'wdth') salgono con la stessa curva ma un decimo di secondo dopo: così una lettera non cresce mai prima di avere spazio, e le vicine non si toccano. All’arrivo un piccolo schiacciamento, e i segni della lettera la seguono nella stessa onda.
La regia e il tuo logo
Tutta l’entrata è una timeline sola, con le etichette start, key, close, reveal, rest e leave, e timeScale per la velocità. Le lettere stanno in un gruppo ritagliato da un clipPath che finisce appena sopra la riga: salgono da dietro la riga e ci rientrano alla fine. Il nastro ha un suo clipPath che si stringe da sinistra verso la penna, per arrotolarlo. Se IMAGE ha un indirizzo, il nome si batte lo stesso e alla fine dalla riga sale l’immagine; nel Playground accanto al campo c’è il tasto per caricare un file, che entra nel codice come indirizzo data:.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'tellum' | Il logo scritto: viene battuto in morse e le sue lettere salgono dal codice. Lettere, cifre e la punteggiatura comune hanno il loro codice; gli accenti si battono come la lettera semplice. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, sale dalla riga al posto delle lettere; il nome viene battuto lo stesso. |
WEIGHT | script.js | 580 | Quanto pesano le lettere quando la parola si è chiusa: 100 è un filo, 900 è nerissimo. Salgono sempre sottili. |
SETTLE | script.js | 1 | Di quanti pixel le lettere superano il loro posto prima che la molla le riporti indietro (0 = si fermano secche). |
CODE | script.js | true | Se il codice resta sotto il logo come una riga sottile di punti e linee. Con false il nastro si arrotola dentro la penna e resta solo il nome. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
REST | script.js | 4.5 | Quanti secondi il logo resta in mostra prima di affondare nella riga. Da 3,4 secondi in su c’è il tempo perché la penna rilegga il codice. |
LOOP | script.js | true | Se il logo affonda nella riga e il nome si batte di nuovo. Con false il logo resta, e ogni tanto la penna rilegge il codice. |
Quando usarla
Per presentare un logo con un gesto preciso e un poco segreto: l’apertura del sito di un marchio di comunicazione, di un’agenzia, di una radio o di un podcast, di uno studio di grafica, di un prodotto che parla di messaggi e connessioni, 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 nome è più piccolo, il nastro più stretto e i segni più corti, così il codice largo ci sta ancora nello schermo. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: la riga col codice compare già stretta sotto il nome in dissolvenza, poi compare il logo. Se l’animazione ricomincia, tutto se ne va in dissolvenza.
Trappole
- La canvas non sa misurare l’asse della larghezza (fontStretch accetta solo qualche parola, non 62%): le lettere strette risultavano larghe come quelle normali. Si misurano su una riga di testo SVG nascosta, con font-variation-settings, e le posizioni vengono da getStartPositionOfChar, che tiene conto anche della crenatura.
- Con peso e larghezza che crescevano insieme allo scivolamento, a metà strada le lettere ingrossate si toccavano: gli assi partono un decimo di secondo dopo con la stessa curva, così crescono sempre meno di quanto si sono avvicinate.
- La penna che affonda a ogni segno, fatta con due tween per segno, si incastrava: il tween di risalita di un punto era ancora vivo quando il punto dopo la spingeva giù, e alla fine vinceva lui. Ora lo decide la funzione che disegna, guardando se la penna è sopra un segno; e il salto dei segni quando arriva la loro lettera è una proprietà a parte, sommata all’altezza, per non litigare con l’assestamento.
- Il nastro che si arrotola partiva da un ritaglio a sinistra fuori dallo schermo e per un terzo del tempo non succedeva niente: il ritaglio parte dall’inizio della riga con fromTo, ma con immediateRender: false, altrimenti tagliava il nastro largo già durante la battuta.
- Un nome lungo come «Northwind Supply Co.» al ritmo di un nome corto si batteva in dieci secondi: il tempo di un segno ha un tetto, e un nome lungo si batte sempre in poco più di quattro secondi.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
