Il logo dal metro pieghevole

Intro, SVGGSAPMediaPeso compresso: Demo 5,1 KBGSAP 28 KBGratisScarica lo zip

Un’intro di logo nello stile minimal: un metro pieghevole da falegname, disegnato con linee sottili vermiglie, cade chiuso sulla pagina e si apre stecca dopo stecca, ognuna che si ribalta sopra la precedente come un bruco che cammina, fino a stendersi sotto tutto il nome; poi le lettere si alzano dal metro una dopo l’altra. Nel Playground ci metti il tuo nome.

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 folding rule logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <!-- the stage: the script draws the folding rule, unfolds it under the name and raises the letters from it -->
    <svg class="palco" data-stage role="img" aria-label="tenon" xmlns="http://www.w3.org/2000/svg">
      <g data-word></g>
      <g data-rule></g>
    </svg>
    <button class="ancora" type="button" data-replay>Replay</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.

13 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 dal metro pieghevole» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianco caldo, vuota, cade dall’alto un metro pieghevole chiuso: una sola stecca disegnata con un contorno sottile vermiglio, le tacche dei centimetri lungo il bordo e un numero vicino alla fine. Tocca la sua riga, la passa di un pixel e si assesta inclinandosi appena. Poi si apre: la prima cerniera gira e il resto del metro, ancora chiuso, si ribalta sopra la prima stecca; la cerniera dopo parte prima che l’altra abbia finito, così il metro cammina verso destra come un bruco, con le stecche che passano in alto e i numeri che girano sottosopra e tornano dritti. Ogni cerniera si blocca un filo oltre il dritto e torna indietro con una molla. Quando il metro è steso sotto tutto il nome, le lettere di «tenon», il marchio inventato di una falegnameria, si alzano dal metro una dopo l’altra, da sinistra, leggere e strette mentre crescono, poi più pesanti, un pixel più alte del dovuto e di nuovo giuste; il metro sente l’ultima con un piccolo fremito. Il logo resta fermo sul suo metro e in basso compare un piccolo «Replay».

Come funziona

Una catena di stecche

Il metro è una catena: la prima stecca è ferma, ogni altra gira di un angolo (phi) sopra quella prima. Una funzione sola, dopo ogni fotogramma, somma gli angoli dalla prima all’ultima e mette ogni stecca all’estremo della precedente, con translate e rotate. Chiuso, ogni cerniera è girata di mezzo giro all’indietro e le stecche stanno una sopra l’altra; aperto, tutti gli angoli sono zero.

Il ribaltamento

Le cerniere vanno da -π a zero, tutte dallo stesso lato, così il resto del metro passa sempre sopra la riga e non la attraversa. Ogni cerniera parte STEP secondi dopo la precedente e dura TURN secondi: si sovrappongono, e il metro si apre come un bruco che cammina invece che a scatti. Ogni stecca ha il fondo del colore della pagina, quindi quelle sopra coprono quelle sotto come oggetti veri.

Il pixel di troppo

Ogni cerniera arriva a SETTLE gradi oltre il dritto con power2.inOut e torna a zero con elastic.out(1, 0.35). Anche la caduta del metro chiuso passa la sua riga di un pixel e si assesta con una piccola inclinazione, e le lettere crescono fino al 103,5 per cento della loro altezza prima di tornare.

Le lettere che si alzano

Ogni lettera è un testo SVG in Instrument Sans, con scale(1 k) sulla sua linea di base: k va da zero a uno. Mentre cresce cambia gli assi variabili, wght da 320 a 660 e wdth da 78 a 100, poi scende al suo peso di riposo. La grandezza del nome e la lunghezza del metro si calcolano dalla larghezza vera dell’inchiostro, misurata su una canvas.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'tenon'`	Il logo: il metro si apre lungo quanto il nome.
`STICKS`	script.js	`6`	Quante stecche ha il metro.
`UNIT`	script.js	`20`	I centimetri di ogni stecca, per i numeri stampati sul metro.
`STEP`	script.js	`0.3`	I secondi fra una cerniera e la successiva.
`TURN`	script.js	`0.62`	I secondi che una cerniera impiega ad aprirsi.
`SETTLE`	script.js	`1.2`	Di quanti gradi una cerniera supera il dritto prima di tornare indietro.
`SPEED`	script.js	`1`	La velocità di tutta l’intro: 2 è il doppio, 0.5 la metà.
`REPLAY`	script.js	`true`	Il piccolo tasto Replay che compare alla fine (un clic ovunque sulla pagina fa ripartire comunque l’intro).

Provali nel Playground

Quando usarla

Per l’apertura del sito di una falegnameria, di un architetto o di uno studio d’interni, di un negozio di attrezzi o di bricolage, di un marchio di mobili; anche per la pagina di un progetto su misura. Sta bene con nomi corti e minuscoli.

Sul telefono

Lo stesso metro con le stesse cerniere, più piccolo, perché il nome prenda quasi tutta la larghezza dello schermo. Un tocco lo fa ripartire.

Con il movimento ridotto

Niente si apre: il metro compare già steso in dissolvenza e il nome sopra di lui, poco dopo.

Trappole

Con le cerniere che si aprono alternando il verso, come in un metro vero piegato a zig zag, metà delle stecche passa sotto la riga e attraversa le lettere: tutte le cerniere vanno da -π a zero, dallo stesso lato.
Le stecche disegnate solo col contorno, chiuse una sopra l’altra, mostrano tutte le tacche insieme in un groviglio: ogni stecca ha il fondo del colore della pagina, e quella sopra copre le altre.
GSAP non disegna un SVG ruotato attorno a un punto che cambia a ogni fotogramma: la catena si scrive a mano con translate e rotate sul gruppo di ogni stecca, dopo ogni fotogramma della timeline.

Librerie

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

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

Collaudo

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