Il logo dalla pista delle biglie

Intro, SVGGSAPImpegnativaPeso compresso: Demo 10,0 KBGSAP 28 KBGratisScarica lo zip

Intro del logo di un negozio di giocattoli di legno inventato, Kugel, nello stile ricco: su un pannello di compensato una pista delle biglie di faggio scende a zig-zag. Le biglie di vetro aspettano in fila dietro un cancelletto, partono una alla volta, suonano due campanelli d’ottone, corrono sul binario e cadono nella loro botola: per ogni biglia salta fuori dalla base di noce un cubo di legno dipinto con una lettera, finché il nome è scritto. Poi i cubi fanno la ola e i campanelli suonano insieme.

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 marble run logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-stage>
    <p class="marca"><span data-brand>Kugel</span> <span class="marca__dida">Wooden toys</span></p>

    <h1 class="sr" data-title>Kugel</h1>
    <!-- everything is drawn in this svg by script.js: the plywood board, the beech rails, the brass bells, the gate,
         the glass marbles, the track with its little trapdoors, the walnut base and the painted letter blocks -->
    <svg class="disegno" data-svg viewBox="0 0 720 760" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>

    <p class="motto" data-tagline>Rolled, sanded and painted by hand.</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.

34 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 dalla pista delle biglie» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Un pannello di compensato appeso a un muro verde petrolio, con la venatura, un nodo nel legno, i fori del pannello forato e quattro viti d’ottone. Sopra, tre binari di faggio scendono a zig-zag, fermati da staffe d’ottone avvitate, e in fondo c’è una base di noce con cinque fessure e una targhetta d’ottone. In cima le biglie di vetro, ognuna col suo colore e l’occhio di gatto dentro, aspettano in fila dietro un cancelletto di faggio. Il cancelletto si alza, la prima biglia rotola giù accelerando e le altre avanzano di un posto. In fondo al primo binario urta un campanello d’ottone, che dondola e suona, e cade sul secondo, schiacciandosi un attimo e rimbalzando; corre all’indietro, suona il secondo campanello, cade sul terzo binario e poi sul binario della base. Lì corre fino alla sua botola, che si apre: la biglia sparisce nella fessura e dalla base salta fuori un cubo di legno dipinto, con la lettera incisa e gli spigoli consumati, che si assesta dondolando in una nuvola di polvere di legno. Una biglia dopo l’altra il nome del negozio è scritto; i cubi fanno la ola, i campanelli suonano insieme, arriva il motto e dopo una pausa tutto ricomincia. Col puntatore o col dito sopra, un cubo si solleva e dondola.

Come funziona

Un solo svg, in un viewBox fisso

Pannello, binari, campanelli, botole, biglie, cubi e base sono disegnati da script.js in un svg con viewBox 720 per 690 e preserveAspectRatio meet: sul computer e nella casella del telefono la scena si ridimensiona intera senza ricalcolare niente. I colori vengono dalle variabili di :root, così la Palette del Playground ridipinge tutto.

Lo stato in oggetti, il disegno a ogni fotogramma

Ogni biglia, cubo, campanello e botola è un oggetto con i suoi numeri (posizione, rotazione, schiacciamento); la timeline di GSAP anima quei numeri e una funzione sul ticker scrive gli attributi transform a ogni fotogramma. Sui gruppi svg annidati evita i problemi del punto di rotazione.

Rotolare sul binario

Mentre una biglia corre, la sua y si ricava dalla x lungo la retta del binario e l’occhio di gatto gira di distanza diviso raggio: rotola davvero, senza scivolare. Sui binari accelera con power1.in, cadendo scende con power2.in come un peso, e atterrando si schiaccia e fa un piccolo salto.

Una biglia, una lettera

La biglia numero i corre fino alla botola i, che si apre poco prima che arrivi; le prime vanno più lontano, così nessuna passa sopra un cubo già uscito. Il cubo sale da sotto il bordo della base con una maschera, va un poco oltre, si schiaccia toccando e si assesta con elastic.out.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Kugel'`	Il nome del negozio: da 3 a 6 lettere, una biglia per lettera.
`SPEED`	script.js	`1`	2 è il doppio più veloce, 0.5 la metà.
`GAP`	script.js	`0.62`	Quanti secondi fra una biglia e la successiva.
`BOUNCE`	script.js	`1`	Quanto rimbalza una biglia quando atterra su un binario.
`GLASS`	script.js	`0.92`	Quanto è pieno il vetro delle biglie.
`RING`	script.js	`1`	1 fa suonare i campanelli quando le biglie li urtano, 0 no.
`HOLD`	script.js	`3.5`	Quanti secondi resta il logo finito prima di ricominciare.

Provali nel Playground

Quando usarla

Per l’apertura del sito di un negozio di giocattoli di legno, di una ludoteca, di un laboratorio di falegnameria o di un marchio per bambini; come caricamento del marchio o presentazione di una collezione.

Sul telefono

La stessa intro: la scena si rimpicciolisce intera fra il nome in alto e il tasto Replay, con le stesse biglie, gli stessi campanelli e gli stessi cubi.

Con il movimento ridotto

Niente rotola e niente salta: il logo compare già finito, coi cubi fuori dalla base, in dissolvenza; poi il motto e il tasto Replay.

Trappole

Le biglie vanno prima alle botole più lontane: se la prima si fermasse vicino, le altre passerebbero sopra i cubi già usciti.
La rotazione dell’occhio di gatto riparte dall’angolo in cui la biglia si trova all’inizio di ogni corsa: la fila che avanza la fa già girare, e ripartire da un numero salvato prima la farebbe scattare.
Replay compare solo a fine entrata, e la ripartenza da sola aspetta HOLD secondi: un clic a metà ricomincerebbe tutto.

Librerie

GSAP 3.15.0, Fredoka (font variabile) 5.3.0.

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

Collaudo

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