Il logo che si stringe dall’orizzonte

Intro, TestoGSAPMediaPeso compresso: Demo 5,4 KBGSAP 28 KBGratisScarica lo zip

Intro di un marchio nello stile minimal, fatta solo di tipografia: una riga sottile si disegna attraverso la pagina, l’orizzonte, e dalla riga crescono le lettere del nome, lontanissime, larghe e leggere. Poi si stringono: le più esterne partono prima, ognuna si restringe sull’asse della larghezza e prende peso mentre viaggia, arriva un capello oltre il suo posto e si assesta con un piccolo cenno, mentre l’orizzonte si accorcia sotto il nome e diventa vermiglio.

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 that tightens from the horizon</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" data-stage>
    <p class="marca" data-entra><span>Halden</span> <span>Studio for quiet interiors</span></p>

    <h1 class="sr">Halden</h1>

    <!-- the horizon: one hairline across the page; the letters grow out of it far apart, very wide and light, then pull
         together, narrower and heavier, until they are the logo; the line shrinks under the name -->
    <div class="logo" data-logo aria-hidden="true">
      <div class="parola" data-word></div>
      <span class="orizzonte" data-line></span>
    </div>

    <p class="motto" data-tagline>Rooms with room to breathe.</p>

    <button class="pillola" type="button" data-replay>
      <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.

22 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 che si stringe dall’orizzonte» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina bianco caldo, col nome dello studio in alto a sinistra. Dal centro si disegna una riga sottile che attraversa tutta la pagina: l’orizzonte. Dalla riga crescono le sei lettere di Halden, prima quelle in mezzo e poi le esterne, ognuna un capello più alta del dovuto e poi giusta, lontanissime l’una dall’altra, larghissime e leggere, ognuna con un’ombra morbida sulla riga. Dopo un respiro si stringono: partono prima le lettere ai lati, ognuna mentre viaggia si fa più stretta sull’asse wdth e più pesante, arriva un capello oltre il suo posto, torna indietro, fa un piccolo cenno schiacciandosi di un pixel e la sua ombra si scurisce. Intanto l’orizzonte si accorcia fino alla larghezza del nome e diventa vermiglio. Arrivano il motto e il tasto Replay. Dopo, le lettere vicine al puntatore (o al dito che scorre) si allargano un poco, come se respirassero; dopo una pausa l’entrata ricomincia da sola.

Come funziona

Due misure per ogni lettera

I posti finali si misurano una volta sola con gli assi finali (wdth 92, wght 640), in una riga nascosta: per ogni lettera la distanza del suo centro dal centro del nome. I posti di partenza sono passi uguali su quasi tutta la larghezza della pagina. Una casella vuota sulla linea di base dice dove stanno in piedi le lettere, e lì si mettono l’orizzonte e le ombre.

Un numero solo per spostamento, larghezza e peso

Ogni lettera ha un numero, s, che va da 0 a 1: la sua posizione, la larghezza e il peso dipendono tutti e tre da lui, così la lettera si stringe proprio mentre si avvicina e non urta mai le vicine. GSAP anima solo i numeri; un solo giro di disegno a ogni fotogramma li scrive sulla lettera esterna (lo spostamento) e su quella interna (gli assi e lo schiacciamento).

Un capello oltre, e indietro

s arriva a 1,006 con power3.inOut e torna a 1 con sine.inOut: su qualche centinaio di pixel di viaggio è un pixel o due di troppo, l’assestamento. Nello stesso istante la lettera si schiaccia di un pixel e torna con elastic.out, e l’ombra sulla riga si scurisce.

L’orizzonte che si accorcia

La riga ha due numeri: quanto è disegnata e quanto è stretta. La sua scala è il primo per una media fra tutta la pagina e la larghezza del nome, pesata dal secondo; così si ricalcola giusta anche se la finestra cambia misura a metà. Alla fine passa al vermiglio, l’unico colore.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Halden'`	Il nome: corto, da quattro a otto lettere.
`SPREAD`	script.js	`0.86`	Quanta parte della larghezza coprono le lettere prima di stringersi.
`GROW_GAP`	script.js	`0.09`	Secondi fra una lettera che cresce dalla riga e la successiva.
`TIGHTEN`	script.js	`1.25`	In quanti secondi le lettere si stringono.
`WIDE`	script.js	`125`	La larghezza (asse wdth) mentre sono lontane.
`NARROW`	script.js	`92`	La larghezza del logo finito.
`LIGHT`	script.js	`180`	Il peso mentre sono lontane.
`HEAVY`	script.js	`640`	Il peso del logo finito.
`BREATHE`	script.js	`12`	Di quanto si allargano le lettere vicine al puntatore, alla fine.
`HOLD`	script.js	`3.2`	Quanti secondi resta il logo finito prima che l’entrata ricominci.
`SPEED`	script.js	`1`	2 è il doppio più veloce, 0.5 la metà.

Provali nel Playground

Quando usarla

Per l’apertura o il caricamento del sito di uno studio d’interni, di un architetto, di un marchio di arredamento o di moda, di chiunque abbia un marchio di una parola e voglia un’entrata calma e precisa.

Sul telefono

La stessa animazione: il nome è più piccolo e le lettere partono distese su quasi tutta la larghezza dello schermo; alla fine si allargano sotto il dito che scorre.

Con il movimento ridotto

Niente cresce né viaggia: il logo compare già stretto, con l’orizzonte vermiglio sotto, in dissolvenza; poi il motto e il tasto Replay.

Trappole

La lettera cambia larghezza mentre si muove: se il suo centro andasse per conto suo urterebbe le vicine. Posizione, larghezza e peso dipendono dallo stesso numero, e il posto finale è misurato con gli assi finali.
GSAP mette il suo transform in linea e cancella quello della classe: la lettera esterna è centrata con xPercent da GSAP, quella interna porta lo schiacciamento scritto a mano, e le due non si toccano.
Le misure dipendono dal carattere: si rifanno quando i caratteri sono caricati (document.fonts.ready) e a ogni cambio di misura della finestra, anche a metà dell’entrata.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

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