Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
I saluti che caricano
Un caricamento che saluta in nove lingue, una parola alla volta, mentre un contatore sale a scatti; a cento la parola si accende, la tenda si alza col bordo che si incurva e sotto la pagina sale riga per riga.
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>Greetings while it loads</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-tifinagh@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the curtain: one greeting at a time and a counter; at a hundred it lifts -->
<div class="curtain" data-curtain aria-hidden="true">
<div class="curtain__inner" data-inner>
<p class="curtain__say" data-say><span class="curtain__word" data-word>Bonjour.</span></p>
<p class="curtain__count"><span data-count>00</span><small>%</small></p>
<p class="curtain__label">Preparing the experience</p>
</div>
</div>
<main class="page">
<header class="top">
<p class="brand">Mirage</p>
<p class="top__line">Digital studio</p>
</header>
<h1 class="title">
<span class="title__line"><span data-line>We build for people</span></span>
<span class="title__line"><span data-line>who say hello</span></span>
<span class="title__line"><span data-line>in nine languages.</span></span>
</h1>
<p class="text" data-rise>Interfaces, apps and brands that feel at home wherever they land.</p>
<div class="actions" data-rise>
<button class="replay" type="button" data-replay data-autoclic>
<span class="replay__text" data-text="Replay the curtain">Replay the curtain</span>
<svg class="replay__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4.5 12a7.5 7.5 0 1 0 2.2-5.3" /><path d="M4.5 4.5v4.2h4.2" /></svg>
</button>
</div>
</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/CustomEase.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.
39 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 «I saluti che caricano» da Animorio e adattala al mio sitoCosa fa
La pagina arriva coperta da una tenda verde scurissimo. Al centro, una parola alla volta: Bonjour., ⴰⵣⵓⵍ in tamazight, Hola., Ciao., مرحبا, やあ, Hallå., Olá. e per ultima Hello., la lingua della pagina. Le parole latine sono in un carattere con le grazie, le altre in un carattere fatto per la loro scrittura; ognuna prende il posto della precedente salendo di pochi pixel da una leggera sfocatura, e intanto respira piano. Sotto, un contatore a due cifre con un piccolo % sale a scatti, con brevi soste, e sotto ancora c’è Preparing the experience. A cento la parola si accende, tutto resta fermo mezzo secondo e la tenda vola in alto: il suo bordo di sotto si incurva con la velocità, le parole restano un po’ indietro e la pagina sotto sale riga per riga. Il bottone Replay fa ricadere la tenda e ricomincia.
Come funziona
Le parole
Le parole stanno in un elenco e cambiano ogni 0,3 secondi, chiamate dalla timeline: così il bottone per rivederle ferma tutto con un solo kill. Un’espressione regolare, /[A-Za-zÀ-ÿ]/, sceglie il carattere: con lettere latine l’Instrument Serif, se no Noto Sans Tifinagh, Geeza Pro, Hiragino, e l’arabo prende dir="rtl". La riga ha un’altezza fissa di 1,3 em, così il contatore non si sposta mai. Ogni parola nuova sale del 16% da una sfocatura di 5 px in 0,26 secondi di expo.out.
Il respiro e il contatore
Mentre aspetta, la parola respira: opacità fra 0,72 e 0,9, mezzo respiro ogni 0,45 secondi con sine.inOut, avanti e indietro; a cento sale a 1. Il contatore va a scatti verso cinque soste diseguali, 26, 37, 61, 83 e 100: ogni scatto occupa il 72% del suo quinto di tempo con power2.out e il resto è sosta. Mostra due cifre e resta a 99 finché il valore non arriva a 99,5.
La tenda
Dopo mezzo secondo di sosta la tenda sale del 100% della sua altezza in 1,1 secondi, su una curva ripida all’inizio e alla fine, cubic-bezier(0.76, 0, 0.24, 1), creata con CustomEase. Intanto il suo contenuto scende del 35%: rispetto allo schermo sale più piano, e le parole sembrano restare indietro senza mai passare il bordo.
Il bordo che si incurva
Sotto la tenda c’è mezza ellisse dello stesso colore, alta 12 vh e schiacciata a zero con scaleY. Durante la salita una variabile CSS, --bow, va da 0 a 1 e torna a 0 con due tratti di sine.inOut: il picco cade a metà, quando la tenda va più forte, e il bordo si piega in giù come un telo tirato.
La pagina e il bottone
Le tre righe del titolo aspettano ognuna nella sua maschera, spostate del 130% perché non spuntino le lettere più alte, e salgono con expo.out, a 0,08 secondi l’una dall’altra, quando la tenda è a metà strada. Il bottone è una pillola elastica: col puntatore sopra la scritta si allarga con l’asse della larghezza del Mona Sans, dal 100% al 125%, e il fondo si gonfia con cubic-bezier(0.34, 1.9, 0.45, 1); il posto della scritta larga è già tenuto da una copia invisibile alta zero, quindi intorno non si muove niente.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | 9 | I saluti, in ordine: l’ultimo resta acceso quando la tenda si alza. |
EACH | script.js | 0.3 | Quanti secondi resta ogni saluto; il contatore arriva a cento in questo tempo per il numero delle parole. |
STOPS | script.js | 26, 37, 61, 83, 100 | Dove il contatore si ferma fra uno scatto e l’altro. |
BREATH | script.js | 0.72, 0.9 | Fra quali opacità respira la parola mentre aspetta. |
HOLD, LIFT | script.js | 0.5, 1.1 | La sosta a cento e la salita della tenda, in secondi. |
LAG | script.js | 35 | Quanto restano indietro le parole mentre la tenda sale, in percento dello schermo. |
Quando usarla
Per il caricamento di un sito che parla a più paesi, o di uno studio che vuole presentarsi prima ancora di mostrare il lavoro. Qui il contatore segue un tempo fisso: in un sito vero va legato a quello che si carica davvero, con una durata minima.
Sul telefono
Le parole scendono a 64 px e il titolo della pagina a 46; la curva della tenda resta alta il 12% dello schermo, e su uno schermo stretto sembra più tonda.
Con il movimento ridotto
Nessun movimento: resta solo Hello., il contatore sale a cento in 0,8 secondi e la tenda sparisce in dissolvenza; le righe della pagina sono già al loro posto e il resto compare piano. Il bottone ripete lo stesso.
Trappole
- Parole in scritture diverse hanno altezze diverse: senza una riga ad altezza fissa il contatore sotto salta a ogni cambio.
- Il carattere del tamazight arriva quando serve la prima volta, cioè a caricamento iniziato: la tenda aspetta i suoi caratteri, al massimo un secondo, se no una parola compare in quadratini o nel carattere sbagliato.
- Con una line-height sotto 1 le lettere alte escono dalla loro riga: nascoste nella maschera con uno spostamento del 110% ne spuntano le punte. Serve almeno il 130%.
- Il bottone per rivedere fa ricadere la tenda prima di rimettere giù la pagina: se le righe tornassero nelle maschere subito, si vedrebbero sparire.
Librerie
GSAP 3.15.0, CustomEase (GSAP) 3.15.0, Instrument Serif 5.3.0, Noto Sans Tifinagh 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,3 KB; le librerie: GSAP + CustomEase 31 KB.
Collaudo
Provata il 28 settembre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
