Il logo dalle lancette

Intro, SVG, TestoGSAPMediaPeso compresso: Demo 9,1 KBGSAP 28 KBGratisScarica lo zip

Un’intro di logo in stile minimal: tre linee sottili girano come lancette attorno a tre perni diversi, ognuna alla sua velocità, rallentano e si fermano una dopo l’altra con uno scatto elastico, incastrate nella lettera del monogramma; poi il nome arriva accanto lettera per lettera, ogni lettera si allarga e prende peso, e il monogramma si riempie. Nel Playground ci metti il tuo nome, scegli la lettera 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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The clock-hand logo</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="scena">
    <!-- the stage: the script measures it, spins three hands around three pivots and locks them into a monogram -->
    <svg class="palco" data-stage role="img" aria-label="navio" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="mark-box"><rect data-box /></clipPath>
        <clipPath id="mark-inset"><rect data-box-in /></clipPath>
        <clipPath id="name-box"><rect data-name-box /></clipPath>
      </defs>
      <g data-mark>
        <!-- the thin circles each hand sweeps, and the cross on each pivot -->
        <g data-orbits></g>
        <g data-pivots></g>
        <!-- the three hands, then the same three strokes filled and cut square by the box -->
        <g data-hands></g>
        <g data-fill clip-path="url(#mark-box)"></g>
      </g>
      <!-- the name, one letter at a time, or the picture -->
      <g data-name></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.

15 valori da cambiare

Apri il Playground

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 lancette» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco caldo, vuoto, compaiono tre piccole croci sottili, una dopo l’altra, che girano su se stesse e si fermano: sono i tre perni. Da ognuno esce una linea sottile che comincia subito a girare come la lancetta di un orologio, ognuna alla sua velocità e nel suo verso, e mentre gira disegna intorno al perno un cerchio grigio chiarissimo: i tre cerchi si incrociano come in un disegno tecnico. Le lancette rallentano e si fermano una alla volta: ognuna supera il suo posto di qualche grado e torna indietro con uno scatto elastico, la sua croce si ripiega, il suo cerchio si riavvolge dentro la punta, e le lancette già ferme sentono il colpo con un fremito di un grado. L’ultima, blu, è la lancetta dei secondi: quando si ferma, le tre linee incastrate sono la N del marchio inventato, navio. Il monogramma scivola di lato e si stringe al suo posto, il nome arriva accanto una lettera dopo l’altra (ogni lettera entra stretta e leggera, un poco più in basso, poi si allarga, prende peso e si assesta) e intanto le linee si gonfiano in una N piena, tagliata dritta, con la diagonale blu. Mentre il logo è in mostra un’onda di peso attraversa il nome da sinistra a destra. Dopo qualche secondo il nome se ne va, il monogramma torna di linee sottili e le lancette ripartono, girando via dentro i perni; tutto ricomincia. Un clic la fa ripartire. La lettera del monogramma è la prima del nome (A, F, H, I, K, N o Z; le altre diventano un triangolo), e al posto della parola si può mettere un’immagine, che si scopre accanto al monogramma.

Come funziona

Le lettere fatte di tre tratti

Ogni monogramma è un elenco di tre tratti, scritti in altezze di maiuscola: da dove a dove va ogni tratto e in che punto sta il suo perno (0 un capo, 0.5 il centro). La N ha le aste col perno a un capo, una in basso e una in alto, e la diagonale col perno in mezzo, come un’elica: tre centri diversi. Le lettere che si scrivono con tre tratti dritti sono A, F, H, I, K, N e Z; per le altre c’è un triangolo. L’ultimo tratto è la lancetta dei secondi, l’unica di colore.

Una lancetta è una linea che gira

Ogni lancetta è una linea orizzontale che passa per il perno, dentro un gruppo girato con rotate(angolo, x, y). L’angolo parte da quello finale meno un giro e mezzo, due o due e mezzo, a seconda della lancetta, e arriva qualche grado oltre il posto giusto con power3.out, che parte veloce e rallenta come una molla che si scarica; poi un elastic.out(1, 0.32) la riporta a posto: è lo scatto. Una sola funzione, dopo ogni fotogramma, scrive angolo, lunghezza e fremito di tutte le lancette partendo da pochi numeri.

Il cerchio che segue la punta

Il cerchio grigio è un tracciato di più giri attorno al perno, che parte dalla punta del braccio lungo e gira nello stesso verso (scale(1, -1) per le lancette che girano al contrario). Con stroke-dasharray se ne mostra solo una finestra: la testa sta sulla punta finché ha fatto un giro intero, poi resta un cerchio pieno; allo scatto la coda corre dietro alla testa e il cerchio si riavvolge nella punta ferma.

Da tre linee a una lettera piena

Quando l’ultima lancetta è ferma, al posto delle tre linee compaiono gli stessi tre tratti in un altro gruppo, con la stessa misura: lo scambio non si vede. Poi il loro spessore cresce; i capi che stanno sul bordo della lettera si allungano e un clipPath grande quanto la lettera più mezzo spessore li taglia dritti, così la N esce piena e squadrata, con gli angoli netti. Il tratto blu sta sotto quelli neri e ha un ritaglio più piccolo di un pixel, perché sui bordi in comune non resti un filo blu.

Il nome, la regia e il tuo logo

Il nome è in Archivo, un carattere variabile con larghezza e peso: ogni lettera è un text centrato sul suo posto, misurato su una canvas, e font-variation-settings la fa entrare a larghezza 62 e peso 200 fino a 100 e 600, con un elastico sulla larghezza. Con un nome lungo il logo intero è piccolo: allora mentre le lancette girano il monogramma è disegnato più grande, con le linee assottigliate della stessa misura, e si stringe al suo posto quando arriva il nome. Tutta l’entrata è una timeline sola, con le etichette start, spin, locked, reveal, name, rest e leave. Se IMAGE ha un indirizzo, l’immagine prende il posto del nome e si scopre con un ritaglio che si allarga; nel Playground c’è il tasto per caricare un file.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'navio'`	Il nome del marchio, scritto accanto al monogramma. La sua prima lettera è anche la lettera del monogramma, se MONOGRAM è vuoto.
`IMAGE`	script.js	`''`	Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto del nome accanto al monogramma.
`MONOGRAM`	script.js	`''`	La lettera in cui si incastrano le tre lancette: A, F, H, I, K, N o Z. Vuoto vuol dire la prima lettera del nome; ogni altra lettera diventa un triangolo.
`TURNS`	script.js	`1.5`	Quanti giri fa la prima lancetta prima di fermarsi; le altre ne fanno mezzo in più ciascuna.
`SETTLE`	script.js	`5`	Di quanti gradi una lancetta supera il suo posto prima di tornare indietro con lo scatto (0 = si ferma secca).
`WEIGHT`	script.js	`1`	Quanto si riempie il monogramma alla fine (0 = resta un disegno di linee sottili).
`SPEED`	script.js	`1`	La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà.
`REST`	script.js	`4`	Quanti secondi il logo resta in mostra prima che le lancette ripartano.
`LOOP`	script.js	`true`	Se le lancette ripartono e il logo si ricompone. Con false il logo resta, e ogni tanto un’onda di peso attraversa il nome.

Provali nel Playground

Quando usarla

Per presentare un marchio che ha un monogramma: l’apertura del sito di un orologiaio, di uno studio di architettura o di ingegneria, di un marchio di design, di un portfolio, un caricamento, l’anteprima per un cliente, un post per i social. Le lancette e i cerchi parlano di precisione e di tempo; sta bene dove il resto della pagina è sobrio. Funziona con un nome scritto e con un’immagine.

Sul telefono

La stessa animazione con le misure adattate: il logo è più piccolo e i cerchi delle lancette restano dentro lo schermo; con un nome lungo il monogramma gira grande al centro e si stringe quando arriva il nome. Un tocco la fa ripartire.

Con il movimento ridotto

Niente gira e niente si sposta: il monogramma compare in dissolvenza già fatto di linee sottili, poi sfuma nella lettera piena e il nome compare accanto. Se l’animazione ricomincia, anche il logo se ne va in dissolvenza.

Trappole

Il tratto blu sotto quelli neri lasciava un filo blu lungo gli spigoli che hanno in comune (l’antialiasing dei due bordi uno sull’altro): il tratto blu ha un ritaglio tutto suo, più piccolo di un pixel per lato.
Tre linee spesse con i capi tondi o dritti non fanno una lettera pulita: agli angoli della N restano tacche e punte. I capi sul bordo della lettera si allungano e un unico clipPath, grande quanto la lettera più mezzo spessore, li taglia tutti dritti.
Con un nome lungo il logo intero diventa piccolo e le lancette giravano minuscole al centro del palco: durante il giro il monogramma è ingrandito con una scala sul gruppo, e lancette, croci e cerchi hanno lo spessore diviso per la stessa scala, così restano sottili; si stringe al suo posto solo dopo lo scambio con la lettera piena.
Il nome arrivava mentre il monogramma ingrandito si stava ancora stringendo, e con un nome lungo la prima lettera lo toccava: le lettere partono un poco più tardi quando la scala di partenza è grande.
Il cerchio disegnato con un dasharray semplice comincia sempre dal punto a destra e gira in senso orario: il tracciato parte dalla punta del braccio lungo e, per le lancette che girano al contrario, è specchiato.

Librerie

GSAP 3.15.0, Archivo (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 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.