Il logo dalle orbite allineate

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

Un’intro di logo nello stile minimal, come un piccolo planetario: la prima lettera del nome è il sole, vermiglio, e le altre girano intorno a lei su orbite ellittiche sottili, le più vicine più veloci. Rallentano e si allineano una dopo l’altra sulla riga a destra del sole, prendendo peso: le orbite si stendono e spariscono, e il nome allineato scivola al centro. 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 aligned orbits logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/unbounded@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <!-- the stage: the first letter is the sun, the others orbit it on thin ellipses until they line up into the name -->
    <svg class="palco" data-stage role="img" aria-label="oriel" xmlns="http://www.w3.org/2000/svg">
      <g data-system>
        <g data-orbits></g>
        <g data-back></g>
        <text class="sole" data-sun></text>
        <g data-front></g>
      </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 dalle orbite allineate» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianco caldo, vuota, la o di «oriel», il marchio inventato, si gonfia al centro in vermiglio, un poco più grande del dovuto, e si assesta: è il sole. Intorno a lei si disegnano quattro orbite ellittiche sottili, viste un poco dall’alto, una per ogni altra lettera, larghe quanto la distanza di quella lettera dalla o nel nome finito. Le lettere compaiono sulle loro orbite e partono: la r, la più vicina, gira tre volte, la l, la più lontana, una sola; dietro al sole passano più piccole e più chiare, davanti più grandi, e si incrociano fra loro. Leggere mentre corrono, rallentano e si fermano una dopo l’altra sulla riga a destra del sole, ognuna un pixel oltre il suo posto e indietro, e lì prendono peso; appena una lettera è a casa la sua orbita si stende piatta e sparisce. Quando tutte sono allineate il nome, intero, scivola al centro della pagina e resta fermo; in basso compare un piccolo «Replay».

Come funziona

Le orbite dal nome finito

Il nome si misura su una canvas con lo stesso carattere, Unbounded: il centro di ogni lettera è la larghezza delle lettere prima più metà della sua. Il raggio di ogni orbita è la distanza fra il centro di quella lettera e il centro della prima. Così, quando ogni lettera arriva all’angolo zero della sua orbita, il nome è composto da solo, con la sua spaziatura vera.

La prospettiva

Le orbite sono ellissi SVG con l’asse verticale pari al raggio per TILT. La posizione di una lettera è il centro più il raggio per coseno e il raggio per TILT per seno dell’angolo; il seno dice anche se è davanti o dietro al sole: dietro la lettera è più piccola (DEPTH) e più chiara, e passa nel gruppo disegnato prima del sole, davanti in quello disegnato dopo.

Il viaggio e l’arrivo

Ogni lettera parte da un angolo negativo di qualche giro più una fase diversa (l’angolo aureo, così non partono in fila) e va con power2.inOut a un angolo che supera lo zero di SETTLE pixel misurati sull’orbita, poi torna a zero con elastic.out(1, 0.35). Le più vicine fanno più giri nello stesso tempo, quindi corrono di più, come nei sistemi veri. Arrivando, l’asse wght sale da 300 a 740 e scende a 600.

Il finale

Appena una lettera è a casa la sua orbita si schiaccia (l’asse verticale va a zero) e sfuma: sembra stendersi sulla riga del nome. Alla fine tutto il sistema scivola a sinistra di quanto serve perché il nome stia al centro della pagina. Tutta l’intro è una timeline sola e un’unica funzione ridisegna lettere, orbite e sole dopo ogni fotogramma.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'oriel'`	Il logo: la prima lettera è il sole, le altre le girano intorno.
`TURNS`	script.js	`3`	Quanti giri fa la lettera più vicina al sole (le più lontane ne fanno meno).
`TILT`	script.js	`0.3`	Quanto sono schiacciate le orbite: 1 = viste dall’alto, 0.1 = quasi di taglio.
`DEPTH`	script.js	`0.14`	Quanto una lettera è più grande davanti al sole che dietro.
`SETTLE`	script.js	`1.5`	Di quanti pixel una lettera supera il suo posto 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 un planetario, di un osservatorio o di un festival di scienza, di uno studio che lavora con lo spazio e il tempo, di un marchio il cui nome comincia con una lettera tonda; anche per un portfolio. Sta bene con nomi corti, da quattro a sette lettere.

Sul telefono

Lo stesso sistema con le stesse orbite, più piccolo, perché l’orbita più larga stia nella larghezza dello schermo. Un tocco rimanda le lettere in giro.

Con il movimento ridotto

Niente gira: il nome compare già allineato al centro, in dissolvenza, senza orbite.

Trappole

Orbite centrate in mezzo al nome non metterebbero le lettere in ordine di lettura: sono centrate sulla prima lettera, così i raggi crescenti sono già l’ordine della parola, e alla fine tutto il sistema scivola al centro.
Una lettera che passa dietro al sole ma è disegnata dopo di lui lo copre: ogni lettera cambia gruppo, prima o dopo il sole, a seconda del segno del seno, e si sposta solo quando il segno cambia.
Un overshoot uguale in gradi per tutte le orbite è un pixel su quella piccola e venti su quella grande: si misura in pixel e si divide per il raggio.

Librerie

GSAP 3.15.0, Unbounded (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.