Il menu a sipario
Menu, Fisica, WebGL, Transizioni
NuovaGratis
Tutti i componenti
Il caricamento della galassia
Il render di una scena in un’app 3D, e l’avanzamento è una galassia a spirale che si forma: quattordicimila stelle e settecento nuvole di polvere colorata partono come una nube senza forma e, man mano che il lavoro va avanti, scendono a spirale sulle loro orbite, si mettono in due bracci che si avvolgono sempre di più, la polvere rosa, viola e blu li disegna e il nucleo si accende. Sotto, la fase del render e la percentuale, che si allarga e si fa più pesante sugli assi del carattere. Pausa ferma la galassia, un nodo di calcolo perso la blocca e la sfa in rosso finché Retry non la ricompone con una molla; finito, la galassia si avvolge, si stringe in un punto e ne esce come l’anello con la spunta del render fatto. Tutto in WebGL, con un ripiego su canvas.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>The galaxy loader</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/saira@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the galaxy loader: a 3D app rendering a scene, and the progress is a spiral galaxy taking shape. Thousands of
stars and a few hundred clouds of coloured dust start as a loose, shapeless cloud; as the render goes on they
spiral in and settle onto their orbits, the arms wind up, the dust lines them and the core lights up. Under it
the phase and the percentage. Pause, a lost render node, and at the end the galaxy is pulled into one point
and comes out as the tick of the finished render. The galaxy is painted by script.js, in WebGL, or on a 2D
canvas when WebGL is missing -->
<section class="gx" aria-label="Scene render" data-galaxy>
<div class="gx__sky" role="progressbar" aria-label="Render progress" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Ready to render" data-sky>
<canvas class="gx__paint" aria-hidden="true" data-paint></canvas>
</div>
<div class="gx__readout">
<div class="gx__words">
<p class="gx__title">
<svg class="gx__tick" viewBox="0 0 24 24" aria-hidden="true" data-tick><path d="M5.5 12.6l4.2 4.2 8.8-9.4" pathLength="1"/></svg>
<span class="gx__swap" data-title>Ready to render</span>
</p>
<p class="gx__meta"><span class="gx__swap" data-meta>Orangery · 3840 × 2160 · 512 samples</span></p>
</div>
<p class="gx__pct" aria-hidden="true" data-pct>0%</p>
</div>
<div class="gx__buttons">
<button class="pill" type="button" data-go data-autoclic><span class="pill__label" data-label>Render scene</span></button>
<button class="pill is-quiet" type="button" hidden data-again><span class="pill__label">Render again</span></button>
</div>
<p class="sr" role="status" aria-live="polite" data-live></p>
</section>
</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.
56 valori da cambiare
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 caricamento della galassia» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da solo al centro, un cielo senza bordi con dentro una nube di stelle grigio azzurre e di nuvolette rosa, viola e blu, sparse a grumi come una nebulosa, ferma. Sotto, a sinistra, la riga Ready to render con i dati della scena (Orangery · 3840 × 2160 · 512 samples), a destra 0% sottile e stretto, e in mezzo il pulsante Render scene. Puntandolo, la nube gira un poco su sé stessa; il cielo si inclina verso il puntatore (col dito, tenendolo premuto) e torna a posto con una molla. Premuto, comincia il render: le stelle dal centro scendono per prime a spirale sulle loro orbite, poi quelle più lontane; le orbite si allineano in due bracci che si avvolgono sempre di più mentre il lavoro va avanti, la polvere li segue, le stelle giovani azzurre ci corrono dentro e il nucleo si accende di una luce calda. La galassia è inclinata come vista di sbieco e gira: le stelle vicine al centro più in fretta di quelle fuori, i bracci più piano delle stelle. Sotto, la riga dice Rendering your scene e la fase (Loading assets, Building geometry, Tracing light, Denoising, Compositing), e la percentuale cresce allargandosi e ingrassando sugli assi del carattere. Pause la rallenta finché si ferma e la spegne un poco: Render paused; Resume la rimette in moto. Se il nodo di calcolo si perde la galassia si blocca, i bracci si sfanno verso fuori, le stelle diventano rosse e il nucleo si abbassa: Render node lost, Progress kept · retry to go on. Retry la ricompone con una molla e il lavoro riprende da dove era. A cento la galassia accelera, si avvolge ancora, si stringe nel nucleo fino a un punto che fa un lampo, e dal punto le stelle volano in un anello che si disegna in giro e poi in una spunta, dal viola al color pesca, con un piccolo rimbalzo: Scene rendered con una spunta verde che si disegna, Saved to Renders · 3840 × 2160, i pulsanti Open render e Render again, che riporta le stelle nella nube e ricomincia.
Come funziona
I bracci che nascono da soli
La galassia segue la teoria delle onde di densità: ogni stella corre su un’ellisse di semiasse a e schiacciamento e(a), e ogni ellisse è girata di a × TWIST rispetto a quella dentro di lei. Dove le ellissi vicine si stringono, un quarto di giro dietro al loro asse lungo, la densità sale e compaiono due bracci a spirale senza disegnarli. Le stelle vecchie avanzano sull’ellisse a 0,32/(0,16 + a) radianti al secondo (dentro più in fretta), l’intero disegno delle ellissi gira a 0,12: le stelle attraversano i bracci, i bracci restano.
Polvere e stelle giovani sui bracci
Il raggio di un’ellisse a un angolo ψ dal suo asse lungo è circa a(1 − e sin²ψ); derivando rispetto ad a si trova che le ellissi sono più vicine dove sin 2ψ = −1, cioè a ψ = −π/4 e 3π/4. Lì nascono la polvere e un terzo delle stelle (le giovani, azzurre), con un po’ di dispersione che cresce verso fuori, e restano ferme nel sistema delle ellissi: girano col disegno, così i bracci sono sempre segnati dal colore. Un velo di 170 nuvole grandi e tenui di luce vecchia riempie il disco fra un braccio e l’altro.
Tutto nel vertex shader
Ogni particella sono dodici numeri in un buffer fisso: orbita, un numero a caso, il posto nella nube, il ritardo nella spunta, il posto nella spunta, la misura e il tipo. A ogni fotogramma il vertex shader calcola, per ognuna, l’orbita, quanto si è sistemata (una soglia che dipende dal raggio e dal caso: dentro prima), la spirale con cui arriva dalla nube, lo sfaldarsi dell’errore, il crollo nel nucleo, l’inclinazione della galassia con una prospettiva leggera e il posto nella spunta. Le stelle sono punti morbidi sommati in luce; il nucleo è un triangolo che copre il canvas con tre gaussiane schiacciate quanto l’inclinazione.
Dal punto alla spunta
Finito il lavoro, il tempo della galassia accelera fino a cinque volte e i bracci si avvolgono di altri 2,2 radianti; il crollo porta ogni stella nel centro girandola, prima quelle interne. Nel punto c’è un lampo, e la spunta si forma nello shader con una molla scritta a mano, 1 − e^(−5,5t)·cos(8,5t), che passa il segno e torna: prima l’anello, che si disegna in giro, poi la spunta dal lato corto, perché ogni stella ha il suo ritardo lungo la linea. Le stelle della spunta sono più tenui di quelle dell’anello, che sono meno fitte, così nessuna parte brucia in bianco.
Lavoro, pausa, errore
Il lavoro avanza con una velocità che cambia un poco (tre seni sovrapposti) e la galassia lo insegue con 1 − e^(−3,2·dt), così non scatta. GSAP porta le grandezze degli stati: la pausa toglie la rotazione e il colore, l’errore porta err a 1 (le stelle si allontanano di un fattore che cambia per ognuna e si tingono di --lost) e Retry lo riporta a 0 con elastic.out, che per un attimo stringe la galassia più del giusto. La percentuale segue font-stretch da 72 a 112% e il peso da 300 a 620.
Ripiego, movimento ridotto e demo
Se WebGL non c’è (o si perde) un canvas nuovo prende il posto del vecchio e le stesse formule girano in JavaScript su 3600 stelle e 430 nuvole, disegnate in luce sommata. Col movimento ridotto niente si sposta: la nube, la galassia ferma e la spunta sono tre strati che si dissolvono l’uno nell’altro. Il clic da script dell’anteprima (detail 0) fa il giro intero, render, nodo perso, Retry, pausa, Resume, spunta e ritorno alla nube, con GSAP; i clic da script durante il giro si ignorano. Quando niente si muove il ciclo si toglie dal ticker.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 6 | Quanto dura il render della demo, in secondi, senza le pause e la spunta alla fine (uno vero segue il lavoro del server). |
STARS | script.js | 14000 | Quante stelle ha la galassia; sul canvas senza WebGL al massimo 3600. |
DUST | script.js | 720 | Quante nuvole di polvere colorata segnano i bracci. |
TWIST | script.js | 5.2 | Quanto si avvolgono i bracci: più alto, più giri fa la spirale e più stretti sono. |
TILT | script.js | 60 | Quanto è inclinata la galassia, in gradi: 0 la si vede di fronte, 80 quasi di taglio. |
SPIN | script.js | 1 | Quanto in fretta gira mentre lavora. |
FAIL_EVERY | script.js | 2 | Un render su quanti, fatto a mano, perde il nodo di calcolo: 0 mai. |
FAIL_AT | script.js | 0.46 | A che punto del render si perde il nodo, da 0 a 1. |
TOUR | script.js | [0.5, 0.86] | Nel giro dell’anteprima della libreria: dove si perde il nodo e dove si mette in pausa, da 0 a 1. |
PHASES | script.js | [[0, 'Loading assets'], [0.12, 'Building geometry'], …] | Le fasi del render scritte sotto la galassia: da che punto comincia ognuna e come si chiama. |
LABELS | script.js | { pause: 'Pause', resume: 'Resume', retry: 'Retry', saving: 'Saving…', done: 'Open render', opened: 'Opened' } | Le scritte del pulsante in ogni stato; quella a riposo, Render scene, si cambia in index.html. |
WORDS | script.js | { busy: 'Rendering your scene', paused: 'Render paused', … } | Le righe sotto la galassia mentre lavora, in pausa, con l’errore e alla fine; quelle a riposo si cambiano in index.html. |
Quando usarla
Per un’attesa di qualche secondo o di qualche minuto in un prodotto che genera qualcosa: il render di una scena, l’esportazione di un video, un’immagine o un modello generati, una grande importazione, la compilazione di un progetto. La galassia dice a che punto si è anche senza leggere il numero (prima il nucleo, poi i bracci, poi il disco intero), e la spunta finale è un traguardo che si vede. Va bene in un’app creativa, scientifica o spaziale, su fondo scuro; per un’attesa brevissima o in un’interfaccia sobria da gestionale è troppo.
Sul telefono
Il componente è largo 380 pixel e sul telefono prende la larghezza dello schermo meno 16 pixel per lato (358 a 390): il cielo scala insieme, il canvas è dipinto alla densità vera dello schermo (fino a due volte) e la galassia, il nucleo e la spunta si misurano dal canvas, quindi restano nitidi e al centro a ogni misura, anche mentre la finestra cambia altezza a metà render. Le stesse stelle e gli stessi stati del computer. Col dito, tenuto premuto sul cielo, la galassia si inclina come sotto il mouse (il cielo lascia passare lo scorrimento verticale); il tocco su Render scene smuove la nube come il passaggio del mouse.
Con il movimento ridotto
Niente si sposta: la galassia non gira, la nube non si smuove, il cielo non si inclina. La nube, la galassia ferma (già con i suoi bracci) e la spunta sono tre strati: man mano che il lavoro va avanti ogni stella si dissolve dalla nube al suo posto nella galassia, e alla fine la galassia si dissolve nella spunta. Errore e pausa cambiano solo colore e luce; le parole cambiano con una dissolvenza e la spunta del testo compare senza disegnarsi.
Trappole
- Il fragment shader non partiva: la stessa uniform uDust era highp nel vertex shader e mediump nel fragment, e WebGL rifiuta il programma. Ora è dichiarata mediump in tutti e due.
- La prima prova faceva passare ogni stella dalla nube all’orbita per angolo, prendendo la differenza fra i due angoli: quando l’orbita, girando, passava sopra l’angolo della nube la differenza saltava di un giro intero e la stella faceva un salto. Ora la stella va in linea retta e una rotazione in più, che vale zero all’inizio e alla fine, le fa fare la spirale.
- Un canvas su cui si è chiesto WebGL non dà più il contesto 2D: per il ripiego (anche quando il contesto si perde) se ne crea uno nuovo che prende il posto del vecchio.
- Con la nube grande quanto la galassia i suoi bordi a destra e a sinistra venivano tagliati dalla dissolvenza sul bordo del canvas, e la nube sembrava un rettangolo: ora è più raccolta, a grumi, e le stelle oltre il raggio 0,84 rientrano piano.
- Nella spunta finita la parte corta e quella lunga erano bianche e piatte: con seimila stelle su una linea corta la luce sommata bruciava. Le stelle vanno per il 58% nell’anello e le loro luci nella spunta sono meno della metà, così si vede la sfumatura dal viola al pesca.
- La galassia si formava troppo tardi (a metà render c’era solo il nucleo): le soglie con cui ogni stella si sistema e l’avvolgimento dei bracci ora partono prima, e i bracci si leggono già verso un terzo.
- Il titolo diventava rosso prima di cambiare parola (per un attimo «Rendering your scene» in rosso): il colore ora è un attributo della riga, messo insieme alle parole nuove.
- Col tempo limitato a 1/30 di secondo per fotogramma, su un computer lento il render della demo dura di più: è voluto (niente salti), ma il giro dell’anteprima va contato a 60 fotogrammi al secondo.
Librerie
GSAP 3.15.0, Saira (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 18 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 17 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.
