Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
La stella che diventa nuvola
Una stella gialla cade dall’alto e atterra rimbalzando come un elastico, e mentre rimbalza ancora diventa una nuvola bianca. Poi davanti alla nuvola spunta il sole dello studio, che si gonfia e si assesta in quattro tempi, e una riga di testo comincia a girare intorno a tutta la pagina.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The star that turns into a cloud</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/bagel-fat-one@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the opening of a small studio: a yellow star drops from above, bouncing, and while it is still bouncing it turns
into a cloud; then the studio's sun pops up in front of it and a line of text starts to run around the page -->
<main class="palco" data-palco>
<h1 class="sr">Little Weather, a design and code studio of two</h1>
<svg class="anello" data-anello aria-hidden="true" focusable="false">
<defs><path id="giro" data-giro d="M0 0"/></defs>
<text class="anello__testo" data-misura visibility="hidden"></text>
<text class="anello__testo" data-testo>
<textPath href="#giro" data-copia></textPath>
<textPath href="#giro" data-copia></textPath>
</text>
</svg>
<div class="scena" data-scena>
<div class="caduta" data-caduta>
<svg class="disegno" viewBox="0 0 1000 760" aria-hidden="true" focusable="false">
<!-- the shape the star turns into: never drawn, MorphSVG reads it -->
<path class="nascosta" data-nuvola d="M338 505A53 53 0 0 1 318 404A70 70 0 0 1 410 326A92 92 0 0 1 540 262A84 84 0 0 1 668 318A62 62 0 0 1 716 420A44 44 0 0 1 700 505Q519 514 338 505Z"/>
<path class="forma" data-forma d="M500.0 222.0 L530.3 278.8 L588.2 250.6 L579.3 314.4 L642.7 325.6 L598.0 372.0 L642.7 418.4 L579.3 429.6 L588.2 493.4 L530.3 465.2 L500.0 522.0 L469.7 465.2 L411.8 493.4 L420.7 429.6 L357.3 418.4 L402.0 372.0 L357.3 325.6 L420.7 314.4 L411.8 250.6 L469.7 278.8Z"/>
<g class="sole" data-sole>
<circle cx="606" cy="452" r="112"/>
<text class="sole__parola" x="606" y="440" text-anchor="middle">LITTLE</text>
<text class="sole__parola" x="606" y="492" text-anchor="middle">WEATHER</text>
</g>
</svg>
</div>
<svg class="scintille" data-scintille viewBox="0 0 1000 760" aria-hidden="true" focusable="false">
<g transform="translate(212 236)"><path data-scintilla d="M0 -26C3 -6 6 -3 26 0C6 3 3 6 0 26C-3 6 -6 3 -26 0C-6 -3 -3 -6 0 -26Z"/></g>
<g transform="translate(812 214) scale(0.7)"><path data-scintilla d="M0 -26C3 -6 6 -3 26 0C6 3 3 6 0 26C-3 6 -6 3 -26 0C-6 -3 -3 -6 0 -26Z"/></g>
<g transform="translate(262 608) scale(0.55)"><path data-scintilla d="M0 -26C3 -6 6 -3 26 0C6 3 3 6 0 26C-3 6 -6 3 -26 0C-6 -3 -3 -6 0 -26Z"/></g>
</svg>
</div>
<button class="ancora" type="button" data-ancora hidden>
<span class="ancora__fondo" aria-hidden="true"></span>
<span class="ancora__testo">Play it again</span>
</button>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MorphSVGPlugin.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.
28 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 «La stella che diventa nuvola» da Animorio e adattala al mio sitoCosa fa
L’apertura di uno studio inventato di due persone, Little Weather, su un cielo blu. Una stella gialla a dieci punte parte da sopra lo schermo e cade al centro in tre secondi con una curva elastica: arriva, va un poco oltre, torna su e oscilla sempre meno. A otto decimi di secondo, mentre oscilla ancora, la stella cambia forma: in un secondo le punte si arrotondano e si gonfiano in una nuvola, e il giallo diventa bianco. Finito il cambio, davanti alla nuvola spunta un sole col nome dello studio: cresce fino a un po’ più del dovuto, si ritira, si gonfia di nuovo e si ferma. Allora compaiono tre stelline che girano piano e, tutto intorno alla pagina, su una cornice dagli angoli tondi, una riga di testo maiuscolo che scorre di continuo: sotto si legge dritta, sul lato destro sale, in alto si legge capovolta. Alla fine compare il tasto «Play it again», che fa ripartire tutto dall’inizio.
Come funziona
La caduta elastica
La stella sta in un contenitore che parte FROM centesimi dello schermo più in alto del suo posto e scende in FALL secondi con la curva elastic.out di GSAP. I due numeri di BOUNCE sono quelli della curva: quanto va oltre il punto d’arrivo e quanto sono rapide le oscillazioni (1 e 0,3 sono quelli normali di GSAP).
La forma che cambia a metà rimbalzo
La nuvola è un secondo tracciato nello stesso SVG, mai disegnato: MorphSVG trasforma il tracciato della stella in quello della nuvola, con map: 'size' perché le parti si accoppino per grandezza. La stella ha venti angoli, la nuvola è fatta di archi: il plugin trasforma tutto in curve e aggiunge punti dove ne mancano. Nello stesso tween il riempimento passa dal giallo al bianco. Il cambio parte a MORPH_AT secondi, quando la caduta non è ancora finita: la forma nuova arriva rimbalzando.
Il sole in quattro tempi
Il sole parte da scala zero e passa per le misure di POP, ognuna nel suo tempo di POP_TIME, con una curva morbida: si gonfia oltre la misura giusta, si ritira, si rigonfia e si posa. È un rimbalzo fatto a mano, tween dopo tween: si può decidere quanto va oltre ogni volta.
Il testo che gira intorno
La cornice è un rettangolo dagli angoli tondi disegnato dallo script con le misure della pagina, che parte dal centro del lato basso e va verso destra: così sotto il testo si legge dritto e in alto capovolto. La riga si ripete finché è lunga quanto la cornice, e le lettere si allargano di un niente perché finisca proprio dove comincia. Due copie della riga stanno sullo stesso tracciato, una un giro intero dietro l’altra, e un numero che cresce col tempo le sposta insieme: un giro ogni AROUND secondi.
Ancora una volta
Tutta l’apertura è una timeline GSAP in pausa; quando il testo è comparso, si mostra il tasto «Play it again», che la fa ripartire da zero. Gli spazi intorno alle barre della riga sono spazi che non si comprimono, altrimenti fra la fine di una ripetizione e l’inizio della successiva lo spazio sparirebbe.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FALL | script.js | 3 | I secondi della caduta, rimbalzo compreso (come nel sito). |
FROM | script.js | 70 | Da quanto in alto parte la stella, in centesimi dello schermo (nel sito 70). |
BOUNCE | script.js | [1, 0.3] | La curva elastica: quanto va oltre e quanto sono rapide le oscillazioni. |
MORPH_AT | script.js | 0.8 | Quando la stella comincia a diventare nuvola, in secondi (nel sito 0,8). |
MORPH | script.js | 1 | Quanto dura il cambio di forma. |
POP | script.js | [1.15, 0.96, 1.06, 1] | Le misure per cui passa il sole quando spunta (quelle del sito). |
POP_TIME | script.js | [0.55, 0.2, 0.2, 0.18] | Quanto dura ognuno di quei passi, in secondi. |
FADE | script.js | 1 | Quanto ci mettono a comparire il testo e le stelline. |
AROUND | script.js | 20 | I secondi di un giro intero del testo (nel sito 20). |
WORDS | script.js | 'Little Weather / design and code / a studio of two / Lisbon' | La riga che gira intorno alla pagina. |
TWINKLE | script.js | 24 | I secondi che una stellina impiega per fare un giro su sé stessa. |
Quando usarla
Per l’apertura di uno studio piccolo, di un portfolio o di un marchio con un simbolo semplice: la forma che cade e si trasforma racconta il marchio in tre secondi, e il testo intorno resta come cornice mentre si guarda la pagina.
Sul telefono
Uguale: la nuvola occupa quasi tutta la larghezza e la cornice del testo si allunga in verticale con lo schermo, con la scritta più piccola.
Con il movimento ridotto
Niente caduta e niente cambio di forma: la nuvola e il sole sono già al loro posto, il testo intorno compare con una dissolvenza e resta fermo.
Trappole
- Il cambio di forma parte mentre la caduta continua: va messo in un tween separato su un elemento diverso da quello che cade, altrimenti il transform della caduta e quello del morph si pestano.
- Gli spazi in fondo a un testo SVG non si vedono e non si misurano: la riga ripetuta sembrerebbe più corta di uno spazio a ogni giro. Per questo gli spazi intorno alle barre sono spazi che non si comprimono, e la lunghezza di una ripetizione si misura come differenza fra due ripetizioni e una.
- Le due copie del testo devono essere lunghe esattamente quanto la cornice: se la riga è più lunga, la fine di una copia finisce sopra l’inizio dell’altra.
- Il sole si ingrandisce dal suo centro solo se il punto d’origine è fissato prima del primo tween: in un SVG GSAP lo calcola sul riquadro dell’elemento.
Librerie
GSAP 3.15.0, MorphSVG (GSAP) 3.15.0, Bagel Fat One 5.3.0, Fredoka (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,3 KB; le librerie: GSAP + MorphSVG 37 KB.
Collaudo
Provata il 6 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.
