Il logo dalle due trame

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

Un’intro di logo nello stile minimal, sul vecchio trucco ottico della griglia a barriera: righe nere scendono in un campo uniforme che nasconde il nome, sfasato di mezza riga dentro le lettere; una seconda trama scorre sopra con un bordo vermiglio, il nome lampeggia sempre più piano e si ferma pieno quando le due trame sono a registro. Poi le righe si assottigliano e spariscono. 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 two gratings 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" data-scene>
    <!-- the stage: a field of stripes hides the name; a second grating slides over it and the name appears where the
         two line up -->
    <svg class="palco" data-stage role="img" aria-label="VEIL" xmlns="http://www.w3.org/2000/svg">
      <defs data-defs></defs>
      <g data-field></g>
      <g data-sheet-clip><g data-sheet></g></g>
      <g data-solid></g>
      <rect class="bordo" data-edge />
    </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 dalle due trame» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianco caldo, vuota, righe nere verticali crescono dall’alto verso il basso, una dopo l’altra da sinistra a destra, finché formano un campo uniforme a strisce. Il nome, VEIL, il marchio inventato, è lì dentro, ma dentro le lettere le righe sono spostate di mezza riga e si intravede appena. Da destra entra una seconda trama, le stesse righe su un foglio trasparente, con il bordo segnato da una linea vermiglia sottile: dove le due trame si riempiono a vicenda gli spazi il campo diventa nero pieno, e mentre il foglio scorre il nome lampeggia, scuro sulle righe e poi a righe sul nero, velocissimo all’inizio. Il foglio rallenta, il lampeggio si fa lento, supera il suo posto di un pixel e torna: il nome si ferma nero pieno in mezzo alle righe. Allora tutte le righe si assottigliano fino a diventare fili, dal centro verso i bordi, e spariscono; la linea vermiglia si spegne. Resta il nome, largo e pesante, fermo; in basso compare un piccolo «Replay».

Come funziona

Il trucco della griglia a barriera

Le righe sono larghe mezzo passo, quindi coprono metà del campo. Fuori dalle lettere stanno sui mezzi passi pari, dentro sui dispari: lo stesso nome fa da maschera SVG due volte, bianco su nero per le righe di dentro e nero su bianco per quelle di fuori. La seconda trama ha le righe sui mezzi passi pari: quando è a registro, fuori dalle lettere le due trame coincidono (righe), dentro si completano (nero pieno), e il nome si legge.

Il lampeggio

Il foglio è un gruppo SVG tagliato da un clipPath grande quanto il campo, spostato con translate. Ogni passo di spostamento il nome passa da pieno a vuoto e torna: lampeggia tanto più in fretta quanto più veloce scorre. Lo scorrimento è un tween con power3.out lungo SLIDE secondi verso un punto SETTLE pixel oltre il registro, poi elastic.out(1, 0.35) lo riporta a zero: il lampeggio rallenta, esita e si ferma.

Le righe una per una

Ogni riga è un rettangolo suo, non un pattern: così può crescere dall’alto con il suo ritardo (da sinistra a destra) e, alla fine, assottigliarsi verso il suo centro con il suo ritardo, dal mezzo del nome ai bordi. Il passo delle righe è PITCH volte la grandezza delle lettere, arrotondato a un pixel intero perché le due trame combacino senza bave.

Dalle righe al nome

Quando le trame sono a registro il nome dentro è già nero pieno: in quell’istante compare sopra lo stesso nome come testo vero, identico, e le righe possono sparire senza che il nome cambi. Il carattere è Archivo con gli assi wdth e wght al massimo: aste grosse che contengono molte righe, così il lampeggio si legge anche sul telefono.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'VEIL'`	Il logo, nascosto nelle righe.
`PITCH`	script.js	`0.036`	La distanza da una riga all’altra, in grandezze di lettera (più piccola = righe più fini).
`SLIDE`	script.js	`2.9`	I secondi che la seconda trama impiega a scorrere al suo posto.
`SETTLE`	script.js	`1`	Di quanti pixel la trama supera il suo posto prima di tornare indietro.
`WIDTH`	script.js	`125`	Quanto sono larghe le lettere: da 62 (strette) a 125 (larghe).
`WEIGHT`	script.js	`900`	Quanto sono pesanti le lettere: le lettere pesanti tengono più righe.
`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 un festival di cinema o di fotografia, di uno studio di grafica o di ottica, di un marchio di moda o di occhiali, di una mostra sulle illusioni; per un nome corto e forte, in maiuscolo. Sta bene dove il resto della pagina è in bianco e nero.

Sul telefono

La stessa trama e lo stesso lampeggio. Il passo delle righe non scende mai sotto i quattro pixel, quindi sul telefono, col nome più piccolo, le righe sono un poco più grosse rispetto alle lettere. Un tocco nasconde di nuovo il nome nelle righe.

Con il movimento ridotto

Niente righe e niente lampeggi, che a chi chiede meno movimento possono dare fastidio: il nome compare in dissolvenza.

Trappole

Con un passo non intero le righe delle due trame cadono su mezzi pixel diversi e a registro restano fili chiari fra l’una e l’altra: il passo si arrotonda a un pixel intero e il campo parte da una x intera.
La larghezza del nome non si può misurare su una canvas, che non sa impostare l’asse wdth: si misura sul testo SVG stesso con getComputedTextLength, dopo aver caricato il carattere.
Con un pattern SVG le righe non possono avere ognuna il suo ritardo: sono rettangoli veri, un centinaio per trama, che GSAP muove senza fatica.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,0 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.