Il logo nel telemetro

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

Intro di un marchio nello stile minimal, presa da una vecchia macchina fotografica a telemetro: quattro angoli sottili fanno da mirino, sotto c’è la scala delle distanze della ghiera e al centro del nome, in una piccola finestra, la seconda immagine del telemetro, rossa e spostata di lato. La ghiera gira dall’infinito ai due metri, la seconda immagine scivola fino a coincidere col nome, un pixel oltre e indietro, e il nome va a fuoco: prende peso, si stringe e gli angoli lo abbracciano. Trascinandolo di lato torna sfocato.

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 in the rangefinder</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">Nadir <span>Optical studio</span></p>

    <!-- the viewfinder: four corners, the name and, in the middle, the rangefinder patch with the second image -->
    <div class="mirino" data-finder>
      <span class="angolo angolo--a" data-corner></span>
      <span class="angolo angolo--b" data-corner></span>
      <span class="angolo angolo--c" data-corner></span>
      <span class="angolo angolo--d" data-corner></span>

      <h1 class="nome" data-name aria-label="Nadir">
        <span class="nome__base" data-base aria-hidden="true">Nadir</span>
        <span class="finestra" data-patch aria-hidden="true">
          <span class="nome__fantasma" data-ghost>Nadir</span>
        </span>
      </h1>
    </div>

    <!-- the distance scale of the focusing ring, sliding under a fixed index -->
    <div class="ghiera" data-ring aria-hidden="true">
      <div class="ghiera__nastro" data-tape></div>
      <span class="ghiera__indice" data-index></span>
    </div>

    <p class="motto" data-tagline>Sharp, at last.</p>

    <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.

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

Collega Animorio a Claude Code

Cosa fa

Una pagina bianco caldo. Quattro angoli sottili spuntano uno dopo l’altro con un piccolo scatto e fanno il mirino; sotto si accende la scala delle distanze della ghiera, 0.7, 1, 1.5, 2, 3, 5, 10 e infinito, con le sue tacche, e una riga vermiglia fissa fa da indice. Il nome, Nadir, compare pallido e leggero; nel mezzo, dentro una finestrella rettangolare, c’è la seconda immagine del telemetro, lo stesso nome in vermiglio, spostata molto di lato. Poi la ghiera gira: la scala scorre dall’infinito ai due metri e la seconda immagine scivola verso il nome, rallentando, va un pixel oltre e torna indietro su una molla. In quell’istante il nome è a fuoco: diventa pieno, prende peso e si stringe con un piccolo rimbalzo, la seconda immagine e la finestrella si spengono, l’indice dà un colpo e gli angoli si stringono attorno al nome. Arrivano il motto e il tasto Replay. Trascinando il nome a destra o a sinistra la seconda immagine si stacca di nuovo e il nome si sfoca e si alleggerisce; lasciandolo torna a fuoco con una molla.

Come funziona

Due copie del nome, una dentro una finestra

Il nome c’è due volte. La prima è il nome vero. La seconda, vermiglia e in multiply, sta dentro uno span con overflow hidden grande un terzo del nome e alto quanto le maiuscole, al centro: è la finestra del telemetro. Dentro la finestra la copia è spostata di quanto la finestra è spostata nel nome, così, senza spostamento, coincide lettera per lettera con quella vera.

Un numero solo per la messa a fuoco

Tutto dipende da f, che va da 0 (fuori fuoco) a 1 (a fuoco). La seconda immagine sta a (1 - f) per SPLIT volte il corpo di lato; la scala della ghiera scorre in modo che l’indice legga infinito a 0 e il segno scelto, i due metri, a 1. Una timeline porta f un pixel oltre 1 con power3.inOut e lo riporta a 1 con elastic.out: la seconda immagine attraversa il nome di un pixel e torna.

Il fuoco si sente nel carattere

Archivo variabile: fuori fuoco il nome è largo e leggero (wdth 112, wght 280) e pallido; a fuoco diventa pieno, stretto e pesante (wdth 88, wght 760) con back.out, che lo fa rimbalzare appena. La finestra viene rimisurata a ogni fotogramma, perché il nome cambia larghezza mentre si stringe.

Fuori fuoco col dito

Finita l’entrata, trascinando il nome lo spostamento orizzontale diventa la distanza dal fuoco: la seconda immagine si stacca dalla parte del dito, il nome si alleggerisce e si sfoca. Al rilascio f torna a 1 con elastic.out e il peso con back.out. Col movimento ridotto il nome compare già a fuoco, in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Nadir'`	Il nome: corto, cinque o sei lettere.
`TARGET`	script.js	`3`	Su quale segno della ghiera va a fuoco (3 è i due metri).
`SPLIT`	script.js	`0.42`	Quanto è lontana all’inizio la seconda immagine, in parte del corpo.
`FOCUS_TIME`	script.js	`1.7`	In quanti secondi la ghiera gira fino al fuoco.
`SNAP`	script.js	`1`	Di quanti pixel la seconda immagine va oltre il nome prima di fermarsi.
`LIGHT`	script.js	`280`	Il peso del nome fuori fuoco.
`HEAVY`	script.js	`760`	Il peso del nome a fuoco.
`WIDE`	script.js	`112`	La larghezza (asse wdth) fuori fuoco.
`NARROW`	script.js	`88`	La larghezza a fuoco.
`HUG`	script.js	`6`	Di quanti pixel gli angoli si stringono quando il nome è a fuoco.
`SPEED`	script.js	`1`	2 è il doppio più veloce, 0.5 la metà.

Provali nel Playground

Quando usarla

Per l’apertura del sito di un fotografo, di uno studio fotografico o di un negozio di ottica, il caricamento di un marchio di una parola, la presentazione di un obiettivo o di una macchina fotografica.

Sul telefono

La stessa animazione: il nome è più piccolo, la scala della ghiera più corta e il nome si sfoca trascinandolo col dito.

Con il movimento ridotto

Niente scivola: il marchio compare già a fuoco, con gli angoli e la ghiera, in dissolvenza; poi il tasto Replay.

Trappole

Il nome cambia larghezza mentre si stringe: la finestra del telemetro, misurata una volta sola, finiva fuori centro. Si rimisura a ogni fotogramma.
GSAP mette il suo transform sulla copia dentro la finestra: la finestra e la copia sono due elementi diversi, uno per il CSS e uno per GSAP.
Il tasto Replay compare solo a entrata finita: un clic a metà (anche quello del pilota automatico dell’anteprima) ricomincerebbe tutto.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

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