Il logo sulle righe guida

Intro, TestoGSAPMediaPeso compresso: Demo 6,2 KBGSAP 28 KBGratisScarica lo zip

Intro di un marchio nello stile minimal, nel linguaggio di chi disegna caratteri: si tracciano le cinque righe guida (ascendente, maiuscole, altezza della x, linea di base, discendente) e le lettere del nome crescono dalla linea di base, larghe e leggere, fino ad agganciarsi ognuna alle sue righe, che sentono il colpo. Alla fine resta solo la linea di base, nel colore d’accento.

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 logo on the guide lines</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: five guide lines of a type designer, then the letters of the name snapping onto them -->
    <svg class="palco" data-stage role="img" aria-label="Halyard" xmlns="http://www.w3.org/2000/svg">
      <g data-guides></g>
      <g data-labels></g>
      <g data-letters></g>
    </svg>
    <button class="pillola" type="button" data-replay data-autoclic>
      <span class="pillola__scritta" data-testo="Replay">Replay</span>
    </button>
  </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.

25 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 sulle righe guida» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina bianco caldo, vuota. Da sinistra si tracciano una dopo l’altra cinque righe sottilissime, con una frenata morbida: sono le righe guida di chi disegna caratteri, e accanto a ognuna compare il suo nome in piccolo, a destra e a sinistra a turno (ascender, cap height, x-height, baseline, descender), così le due righe in alto, vicinissime, non si confondono. Poi arrivano le lettere del nome, Halyard, in un ordine sparso: ognuna nasce bassa, larga e leggera sulla linea di base e cresce in altezza accelerando mentre si stringe e prende peso, finché le sue estremità toccano le righe giuste: la H l’altezza delle maiuscole, la l e la d l’ascendente, la a e la r l’altezza della x, la y scende fino alla discendente. Arrivata, va un pixel oltre e torna su una molla, e la riga che ha toccato cede appena sotto di lei e vibra prima di tornare dritta. A nome composto le etichette scivolano via verso i margini, le righe sfumano dall’alto e dal basso, e la linea di base, rimasta sola, si accorcia fino alla larghezza del nome e diventa vermiglio. Solo allora in basso compare il tasto Replay, che ridisegna tutto.

Come funziona

Le misure vere del carattere

Le cinque altezze non sono inventate: una canvas con lo stesso carattere, Roboto Flex, misura con measureText l’inchiostro della l (ascendente), della H (maiuscole), della x (altezza della x) e della p (discendente). La canvas non sa cambiare l’asse della larghezza, quindi la larghezza di ogni lettera, a fine corsa, la misura l’SVG stesso con getComputedTextLength su un testo nascosto con le sue font-variation-settings. Il corpo è quello che fa stare il nome in due terzi delle righe e il blocco delle righe in un terzo dell’altezza.

Quale riga tocca ogni lettera

Per ogni lettera lo script misura quanto sale e quanto scende l’inchiostro e lo confronta con le altezze delle righe: la riga in alto è la più vicina fra ascendente, maiuscole e altezza della x; quella in basso è la discendente se la lettera scende sotto la linea di base, altrimenti la linea di base. Così con qualunque nome le aste toccano le righe giuste.

Crescere dalla linea di base

Ogni lettera è un gruppo SVG con translate fino al suo posto sulla linea di base e scale verticale: parte a metà altezza, larga (asse wdth 132) e leggera (wght 260). Un tween con power3.in la porta un pixel oltre la sua altezza, accelerando come qualcosa che scatta; uno con elastic.out la riporta a 1. Intanto un terzo tween la stringe a wdth 90 e la porta a wght 640.

La riga che sente il colpo

Le righe sono path ridisegnati a ogni fotogramma con un punto ogni quattro pixel. Quando una lettera arriva aggiunge un avvallamento a campana, exp di meno x al quadrato, largo quanto la lettera, verso l’alto sulla riga in alto e verso il basso su quella in basso; la sua profondità torna a zero con elastic.out, così la riga vibra e si ferma.

Una regia sola

Tutto quello che si muove è un oggetto di numeri: quanto è disegnata ogni riga, l’etichetta, l’altezza, la larghezza e il peso di ogni lettera, quanto si è accorciata la linea di base. Una timeline GSAP li anima, una funzione sul ticker li trasforma in attributi SVG; al ridimensionamento cambiano solo le misure, quindi la regia continua senza salti. Col movimento ridotto il marchio compare già sulla sua riga, in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Halyard'`	Il nome: una parola con lettere che salgono e scendono fa lavorare tutte e cinque le righe.
`GUIDES`	script.js	`['ascender', 'cap height', 'x-height', 'baseline', 'descender']`	I nomi delle cinque righe, dall’alto in basso.
`DRAW_TIME`	script.js	`1.3`	In quanti secondi si traccia ogni riga.
`LINE_STAGGER`	script.js	`0.2`	I secondi fra una riga e la successiva.
`STAGGER`	script.js	`0.16`	I secondi fra una lettera e la successiva.
`GROW_TIME`	script.js	`0.6`	In quanti secondi una lettera cresce fino alle sue righe.
`SNAP`	script.js	`1`	Di quanti pixel la lettera va oltre la riga prima di assestarsi.
`WOBBLE`	script.js	`2.2`	Di quanti pixel cede la riga dove la lettera la tocca.
`WIDE`	script.js	`132`	La larghezza (asse wdth) con cui nasce una lettera.
`NARROW`	script.js	`90`	La larghezza con cui finisce.
`LIGHT`	script.js	`260`	Il peso con cui nasce una lettera.
`HEAVY`	script.js	`640`	Il peso con cui finisce.
`HOLD`	script.js	`1`	Per quanti secondi il nome resta sulle cinque righe prima che si sgombrino.
`SPEED`	script.js	`1`	2 è il doppio più veloce, 0.5 la metà.

Provali nel Playground

Quando usarla

Per l’apertura del sito di una fonderia di caratteri, di uno studio di grafica o di un’agenzia di branding, il caricamento di un marchio fatto di una parola sola, la presentazione di un carattere nuovo.

Sul telefono

La stessa animazione: le righe vanno da un bordo all’altro, il nome è più piccolo e le etichette stanno sopra o sotto la loro riga, ai capi, invece che nei margini.

Con il movimento ridotto

Niente si muove: il marchio compare in dissolvenza già sulla sua linea di base vermiglio, e poi il tasto Replay, che lo fa svanire e ricomparire.

Trappole

In Instrument Sans l’ascendente della l e l’altezza della H coincidono: le righe erano quattro, non cinque. Con Roboto Flex la l sale sopra la H.
Le lettere che partivano a un decimo dell’altezza sembravano manubri (due macchie e una barra): ora partono a metà altezza e compaiono in dissolvenza.
Le etichette dell’ascendente e delle maiuscole, a pochi pixel l’una dall’altra, si sovrapponevano: stanno da parti opposte, e sul telefono sopra e sotto le righe.
Nella funzione che disegna, una costante chiamata right dentro il ciclo nascondeva quella col bordo destro del nome, usata prima: errore di variabile non ancora definita. Ora si chiama onRight.
Il pilota automatico dell’anteprima premeva Replay a metà entrata e l’animazione ricominciava da capo: il video si fermava a 3,7 secondi. Ora Replay compare solo a nome composto e, finché l’entrata corre, i clic non fanno niente.

Librerie

GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,2 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 21 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.