Il logo dal gioco del quindici

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

Un’intro di logo nello stile minimal: le lettere del marchio sono le tessere di un gioco del quindici, mescolate, in una cornice sottile. Scivolano una alla volta nella casella vuota, con un pixel di troppo e il ritorno, finché il nome si legge; allora il pezzo mancante, un quadrato rosso, si gonfia nella casella vuota, le tessere perdono il bordo e si stringono in un marchio su due righe. Ogni volta un rompicapo diverso.

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 sliding puzzle logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <!-- the stage: the script draws the frame and the tiles, then slides them until the name reads -->
    <svg class="palco" data-stage role="img" aria-label="HALFWAY" xmlns="http://www.w3.org/2000/svg">
      <g data-board>
        <rect class="cornice" data-frame />
        <g data-tiles></g>
        <rect class="tassello" data-piece />
      </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.

16 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 gioco del quindici» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianco caldo, vuota, una cornice sottile dagli angoli arrotondati si disegna tutto intorno, e dentro cadono, fila per fila, sette tessere chiare col bordo di un pixel: sono le lettere di HALFWAY, il marchio inventato, ma mescolate, e una casella resta vuota. Poi le tessere scivolano una alla volta nella casella vuota, lente le prime, più svelte a metà e di nuovo lente le ultime: mentre scivola la lettera si fa più leggera e più stretta, arriva un pixel oltre la sua casella e una molla la riporta indietro, più pesante per un attimo; la tessera contro cui si ferma sente il colpo e trema. Le mosse sono quelle vere di un gioco del quindici. Quando il nome si legge, HALF sopra e WAY sotto, il pezzo mancante, un quadrato rosso, cresce dal centro della casella vuota, un poco più grande del dovuto, si assesta, e la fila intera sente la spinta. Poi la cornice e i bordi delle tessere si dissolvono, le lettere si stringono fino a diventare un marchio composto su due righe, con il quadrato rosso alla fine come un punto, e prendono il loro peso. Il logo resta fermo; in basso compare un piccolo «Replay». Un clic fa un rompicapo nuovo.

Come funziona

Un rompicapo vero

Il gioco si mescola partendo dal nome già composto: la casella vuota fa MOVES passi a caso, mai tornando subito indietro, e l’elenco delle caselle che ha toccato è la soluzione letta al contrario. Così le mosse sono quelle che una mano farebbe davvero, il rompicapo si risolve sempre e a ogni Replay è diverso.

Una timeline sola

Tutta l’intro è una timeline GSAP costruita prima di partire: per ogni mossa si sa quale tessera va dove, quindi ogni scivolata è un tween al suo posto (con le etichette solve, piece, close e rest). Il ritmo cambia lungo il rompicapo con una piccola parabola sulla durata: lente le prime e le ultime mosse, svelte quelle in mezzo. Le posizioni le scrive una funzione sola, dopo ogni fotogramma.

Il pixel di troppo e il colpo

Ogni tessera va con power3.inOut a un punto SETTLE pixel oltre la casella e torna con elastic.out(1, 0.35). Intanto la lettera, un testo SVG in Bricolage Grotesque, cambia gli assi variabili: wght scende a 470 e wdth stringe mentre scivola, poi sale oltre il suo peso all’arrivo e torna. La tessera che sta subito dopo nella stessa direzione, se c’è, si sposta di un pixel e torna: sembra che abbia sentito l’urto.

Dal rompicapo al marchio

Alla fine il nome si ricompone come testo vero: le larghezze delle lettere si misurano su una canvas con lo stesso carattere, le righe si allineano a sinistra con TRACK e LEADING, e ogni tessera va dove la sua lettera starebbe in una parola composta. Il quadrato rosso si rimpicciolisce all’altezza di una maiuscola e si posa alla fine della seconda riga, un pixel più basso e poi al suo posto. Bordi e cornice spariscono con fill-opacity e stroke-opacity.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'HALFWAY'`	Il logo: le sue lettere riempiono le tessere fila per fila, l’ultima casella è il quadrato rosso.
`ROWS`	script.js	`2`	Quante file di tessere (e di righe nel marchio finito).
`MOVES`	script.js	`12`	Quante scivolate servono per risolvere il rompicapo.
`SLIDE`	script.js	`0.32`	I secondi di una scivolata a metà del rompicapo (le prime e le ultime sono più lente).
`SETTLE`	script.js	`1.2`	Di quanti pixel una tessera supera la sua casella prima che la molla la riporti indietro.
`GAP`	script.js	`0.08`	Lo spazio fra le tessere, in grandezze di tessera.
`TRACK`	script.js	`0.06`	La spaziatura delle lettere nel marchio finito, in em.
`LEADING`	script.js	`1.3`	La distanza fra le righe del marchio finito, in altezze di maiuscola.
`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 di un sito che gioca: uno studio di design o di giochi, un marchio con un nome in due parole, un’agenzia che vuole dire «il pezzo che mancava», un portfolio, la pagina d’attesa di un lancio. Sta bene con nomi corti, da cinque a undici lettere.

Sul telefono

Lo stesso rompicapo con le stesse mosse, con le tessere più piccole perché la cornice stia nella larghezza dello schermo. Un tocco lo fa ripartire.

Con il movimento ridotto

Niente scivola: il marchio finito, con il quadrato rosso, compare in dissolvenza.

Trappole

Una timeline costruita in anticipo con tween che si sovrappongono sulla stessa tessera (l’assestamento di una mossa e il colpo della mossa dopo) funziona solo se i tween partono in ordine di tempo: GSAP disegna i figli nell’ordine in cui partono e l’ultimo vince.
Una passeggiata a caso della casella vuota su una fila sola arriva in fondo e non ha più vicini se non quello da cui viene: in quel caso si torna indietro, altrimenti il passo dopo è undefined e la timeline si rompe.
Le tessere quadrate larghe quanto la maiuscola più larga lasciano troppo spazio intorno alle lettere strette: il marchio finale non stringe solo le fessure ma ricompone la parola con le larghezze vere delle lettere.

Librerie

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

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