Il logo che cade nella sua ombra

Intro, TestoGSAP, Solo CSSMediaPeso compresso: Demo 5,8 KBGSAP 28 KBGratisScarica lo zip

Un’intro di marchio nello stile minimal: sulla riga di terra compaiono prima le ombre delle lettere, larghe e chiare come sotto oggetti ancora molto in alto; poi le lettere cadono una dopo l’altra, strette e leggere, e atterrano ognuna nella sua ombra prendendo larghezza e peso, mentre la riga cede sotto il colpo. Il punto cade per ultimo, nell’accento, e le ombre si raccolgono in una riga sotto il 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 logo that falls into its shadow</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures the word, places one letter and one shadow per slot and draws the ground -->
    <div class="palco" data-stage role="img" aria-label="Settle.">
      <svg class="terra" data-ground aria-hidden="true"><path data-ground-path /></svg>
      <div class="ombre" data-shadows aria-hidden="true"></div>
      <span class="riga" data-bar aria-hidden="true"></span>
      <div class="lettere" data-letters aria-hidden="true"></div>
      <!-- a hidden row in the final face, only to measure where every letter sits -->
      <div class="misura" data-measure aria-hidden="true"></div>
    </div>
    <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.

20 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 che cade nella sua ombra» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina bianco caldo, vuota. Dal centro si disegna una riga di terra sottile. Sopra la riga, fuori dallo schermo, sono appese le lettere del marchio «Settle»: prima si vedono le loro ombre, macchie morbide larghe e chiare, come sotto oggetti ancora molto in alto. Una lettera dopo l’altra cade: mentre scende, la sua ombra si stringe e si scurisce sotto di lei, e la lettera, stretta e leggera finché è in volo, atterra esattamente nella sua ombra; si schiaccia di un niente, affonda di un pixel nella riga e si assesta con un piccolo elastico, mentre si allarga e prende peso. La riga di terra cede sotto il colpo come un filo teso e torna dritta, e le lettere già in piedi ondeggiano con lei. Per ultimo cade il punto, rosso, con la sua ombra rossa. Alla fine le ombre si sciolgono e al loro posto una riga sottile si allarga dal centro sotto il nome. In basso compare Replay: le lettere vengono tirate su, l’ultima per prima, le ombre si allargano di nuovo e cadono un’altra volta.

Come funziona

Le misure del nome

Una riga nascosta scrive il nome con la larghezza e il peso finali (font-stretch e font-weight di Anybody, carattere variabile con i due assi): da lì si leggono dove sta ogni lettera e quanto spazio occupa. La grandezza del carattere è quella che fa stare il nome nel 66% della larghezza (84% sul telefono) e mai più di un terzo dell’altezza; la linea di base si trova con una scatola alta zero appoggiata sulla riga del testo.

Tutto è un numero

Ogni lettera ha un oggetto con pochi numeri: quanto è in alto (da 1 a 0), quanto è atterrata per larghezza e peso, lo schiacciamento, il pixel di affondo, quanto si vede la sua ombra e quanto cede la riga sotto di lei. GSAP anima solo questi numeri; una funzione sola sul ticker li trasforma in transform, font-stretch, font-weight, opacità e sfocatura. Così un cambio di misura della finestra a metà caduta non rompe niente: si rimisura e il disegno dopo è già giusto.

L’ombra che arriva prima

L’ombra è un’ellisse con un gradiente radiale. La sua forma dipende solo dall’altezza della lettera: in alto è larga 2,2 volte la lettera, chiara e sfocata di 11 pixel; a terra è larga quanto la lettera, scura e quasi netta. L’ombra compare 0,6 secondi prima che la lettera parta, così si vede da sola sulla riga, e durante la caduta (power2.in, come un corpo che accelera) si stringe sotto di lei.

Il colpo

All’arrivo, in 7 centesimi di secondo, la lettera si schiaccia e affonda di un pixel; poi due elastici la rimettono a posto. Intanto la riga di terra prende un avvallamento a campana sotto la lettera, che torna su con elastic.out: la riga è un path ridisegnato con un punto ogni quattro pixel, e le lettere già in piedi si spostano con lei, così sentono il colpo delle vicine.

La riga e Replay

Quando cade il punto, le ombre si sciolgono e una riga piena si allarga dal centro sotto il nome. Replay tira su le lettere all’indietro, l’ultima per prima, ritira la riga di terra e rifà l’entrata da capo. Con il movimento ridotto il marchio compare già al suo posto, con la riga, in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Settle'`	Il nome: le sue lettere cadono una dopo l’altra (fino a 12 lettere).
`STOP`	script.js	`true`	Il punto nell’accento che cade per ultimo.
`DROP_HEIGHT`	script.js	`0.9`	Da quanto in alto cadono le lettere, in altezze dello schermo: più alto, ombre più larghe all’inizio e caduta più lunga.
`STAGGER`	script.js	`0.2`	I secondi fra una lettera e la successiva.
`ORDER`	script.js	`'left'`	L’ordine della caduta: 'left' da sinistra, 'center' dal centro verso i lati, 'edges' dai lati verso il centro.
`SQUASH`	script.js	`0.08`	Quanto si schiaccia una lettera atterrando (0 = resta rigida).
`SETTLE`	script.js	`1`	Di quanti pixel una lettera affonda nella riga prima di assestarsi.
`DIP`	script.js	`4`	Quanto cede la riga di terra sotto un atterraggio, in pixel.
`SPREAD`	script.js	`2.2`	Quanto è larga un’ombra quando la sua lettera è ancora in alto, in volte la lettera.
`NARROW`	script.js	`62`	La larghezza di una lettera che cade (font-stretch, in percento).
`WIDE`	script.js	`116`	La larghezza di una lettera atterrata.
`LIGHT`	script.js	`220`	Il peso di una lettera che cade.
`HEAVY`	script.js	`720`	Il peso di una lettera atterrata.
`--ground`	style.css	`#f3f0e8`	Il fondo.
`--ink`	style.css	`#161513`	Le lettere, la riga di terra e la riga sotto il nome.
`--shade`	style.css	`#161513`	Il colore delle ombre (disegnate tenui).
`--accent`	style.css	`#e2462b`	Il punto che cade per ultimo e la sua ombra.

Provali nel Playground

Quando usarla

Per presentare un marchio con calma e peso: l’apertura del sito di uno studio, di un’agenzia immobiliare o di un marchio di arredamento, una pagina di benvenuto, un caricamento, il finale di un video o di un post. Sta bene dove la pagina è sobria e il nome è corto.

Sul telefono

La stessa animazione con le misure adattate: il nome prende più larghezza dello schermo, la riga di terra resta dentro i bordi e Replay si tocca col dito.

Con il movimento ridotto

Niente cade: il marchio compare già al suo posto sulla riga, con la riga sotto il nome, in dissolvenza. Replay lo fa svanire e ricomparire.

Trappole

Le lettere cambiano larghezza mentre atterrano: in una riga normale spingerebbero le vicine. Ogni lettera sta da sola, centrata sul suo posto misurato con la larghezza finale (translate di meno 50%), così si allarga in modo simmetrico e arriva esattamente dove deve.
Con l’origine della trasformazione al centro della scatola, lo schiacciamento sollevava la lettera dalla riga: l’origine è sulla linea di base, misurata con una scatola alta zero.
Le ombre raccolte in una riga, fatte con le stesse ellissi appiattite, lasciavano una fila di perline: alla fine le ombre si sciolgono e una riga piena a parte si allarga dal centro.

Librerie

GSAP 3.15.0, Anybody (font variabile) 5.3.0.

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

Collaudo

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