Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Il titolo con le lettere che si ribaltano
Titolo animato d'apertura, nello stile minimal, per un marchio inventato di ruote da bici in carbonio: ogni lettera entra dall'alto ribaltata di un quarto e girata di lato, con un'ombra che si accorcia mentre arriva e un assestamento di un pixel. Tre titoli si danno il cambio, il puntatore fa ondeggiare le lettere vicine e un tocco le ribalta ancora, a partire da quella toccata. Rifatto da zero dall'apertura di lightweight.info.
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>Raggio wheels</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the opening headline of a carbon wheel maker: every letter tumbles in from above, turned a quarter on its
side, and lands with a one-pixel settle; three headlines take turns, the pointer ruffles the letters nearby
and a tap flips them over once more -->
<main class="pagina" data-pagina>
<section class="apertura" aria-live="polite">
<p class="marchio" data-marchio>Raggio carbon wheels</p>
<h1 class="titolo" data-titolo aria-label=""></h1>
<p class="sotto" data-sotto></p>
<a class="pillola" href="#" data-pillola>
<span class="pillola__testo">Learn more</span>
<svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h9.5M8.5 4l4 4-4 4" /></svg>
</a>
</section>
<nav class="indice" aria-label="Chapters" data-indice>
<span class="indice__voce" data-voce>Climb</span>
<span class="indice__voce" data-voce>Craft</span>
<span class="indice__voce" data-voce>Speed</span>
<span class="indice__riga" aria-hidden="true" data-riga></span>
</nav>
</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/SplitText.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.
23 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 titolo con le lettere che si ribaltano» da Animorio e adattala al mio sitoCosa fa
È l'apertura di Raggio, un marchio inventato di ruote in carbonio, su un fondo argento con una luce morbida al centro. In alto una riga piccola, Raggio carbon wheels, si accende piano. Poi il titolo, grande e in maiuscolo su due righe: ogni lettera arriva dall'alto e da sinistra, ribaltata di novanta gradi all'indietro e girata di quindici di lato, e si raddrizza in un secondo, una dopo l'altra a un decimo di secondo di distanza; la seconda riga parte mezzo secondo dopo la prima. Mentre si ribalta, ogni lettera proietta sotto di sé un'ombra lunga e chiara, che si accorcia fino a sparire quando la lettera arriva, e arrivata scende di un pixel e torna su, come se toccasse la riga. Il sottotitolo sale piano poco dopo, e sotto c'è la pillola Learn more, sottile, con la freccia nel solo colore d'accento. Dopo tre secondi le lettere cadono in avanti e si spengono, e arriva il titolo successivo: Built to climb, Handmade in carbon, Quiet at speed. In basso tre voci, Climb, Craft e Speed, dicono a che punto si è, e una riga sottile color mattone corre da una all'altra allungandosi come un bruco. Col puntatore le lettere vicine ondeggiano appena, inclinandosi verso di lui; un clic o un tocco sul titolo le ribalta ancora una volta su sé stesse, partendo da quella toccata e allargandosi alle altre.
Come funziona
Le lettere con SplitText
Ogni titolo è scritto con una barra dove va a capo: ogni riga diventa uno span, e SplitText la divide in parole e lettere (type words,chars). Dentro ogni lettera mettiamo un secondo span: la lettera esterna la muove la timeline dell'entrata, quella interna l'ondeggiare e il ribaltamento al tocco, così i due transform non si cancellano. Ogni parola ha perspective 1000px: è una scelta nostra, perché sul sito di partenza le lettere ruotano senza prospettiva e si vedono schiacciarsi e raddrizzarsi in piano; con la prospettiva il ribaltamento e l'ombra si leggono in profondità.
Il ribaltamento
Un fromTo per riga: da opacity 0, y -0.6em, x -0.2em, rotateX -FLIP, rotateY -TWIST a tutto zero, in DURATION secondi con power2.out e uno stagger di STAGGER per DURATION. Le righe partono a LINE_GAP per DURATION una dall'altra. Sono i numeri del sito: 90 e 15 gradi, un secondo, un decimo, mezzo secondo.
L'ombra e l'assestamento
La variabile CSS --s va da 1 a 0 insieme alla lettera: il text-shadow del figlio la usa per la distanza, la sfocatura e l'opacità dell'ombra, che così si accorcia mentre la lettera arriva. Verso la fine un secondo tween porta ogni lettera un pixel più giù e indietro (yoyo, 0,11 secondi per verso), sfalsato come l'entrata.
Il cambio di titolo
Il sottotitolo entra un quarto di secondo dopo il titolo, in un secondo e mezzo, come la pausa del sito dopo il titolo. Dopo HOLD secondi (un delayedCall di GSAP, non un setTimeout) le lettere cadono in avanti con rotateX 38 e si spengono in mezzo secondo con uno stagger di 0,018; poi SplitText si ripristina e si costruisce il titolo successivo. La riga dell'indice prima si allunga fino alla voce nuova con power2.in e poi ritira la coda con expo.out.
Il puntatore e il tocco
Ogni lettera interna ha due quickTo, rotation e y. Al movimento del puntatore la vicinanza (1 meno la distanza diviso 1,7 volte il corpo, al quadrato) la inclina fino a 7 gradi verso il puntatore e la alza fino a 0,07 em; fuori dalla pagina torna a zero. Al pointerdown si cerca la lettera più vicina e tutte fanno un giro intero su rotationX, con lo stagger che parte da lei.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
HEADLINE_A | script.js | Built/to climb | Il primo titolo; la barra va a capo. |
HEADLINE_B | script.js | Handmade/in carbon | Il secondo titolo. |
HEADLINE_C | script.js | Quiet/at speed | Il terzo titolo. |
DURATION | script.js | 1 | Quanto dura il ribaltamento di una lettera, in secondi. |
STAGGER | script.js | 0.1 | Il ritardo fra una lettera e la successiva, in secondi. |
LINE_GAP | script.js | 0.5 | Il ritardo fra una riga e la successiva, in secondi. |
FLIP | script.js | 90 | Di quanti gradi è ribaltata la lettera quando parte. |
TWIST | script.js | 15 | Di quanti gradi è girata di lato quando parte. |
HOLD | script.js | 2.8 | Quanti secondi resta fermo ogni titolo. |
RUFFLE | script.js | 1 | Quanto ondeggiano le lettere vicine al puntatore. |
Quando usarla
Come titolo d'apertura di un prodotto tecnico e di qualità (ruote, biciclette, orologi, attrezzatura sportiva), della pagina di un marchio che vuole sembrare preciso e calmo, o come titolo di una sezione che cambia argomento: ogni capitolo entra col suo titolo ribaltato.
Sul telefono
La stessa animazione: il titolo si misura sulla larghezza e sull'altezza, così due righe stanno nella casella; le lettere non ondeggiano senza puntatore, ma un tocco sul titolo le ribalta.
Con il movimento ridotto
Niente ribaltamenti né spostamenti: ogni titolo compare e sparisce in dissolvenza, la riga dell'indice salta alla voce giusta, le lettere non ondeggiano e il tocco non le ribalta.
Trappole
- GSAP scrive un transform in linea su ogni lettera: se l'ondeggiare e il ribaltamento al tocco agissero sullo stesso elemento dell'entrata si cancellerebbero a vicenda. Per questo ogni lettera ha un figlio: fuori la timeline, dentro il puntatore.
- La prospettiva su tutta la riga non arriva alle lettere, perché fra la riga e le lettere ci sono le parole di SplitText: va messa sulle parole.
- SplitText va chiamato dopo che il carattere è arrivato (document.fonts.load), se no le lettere hanno la misura del carattere di riserva e il titolo si allarga di colpo.
- Il ribaltamento al tocco parte da rotationX 0 e arriva a 360: se un secondo tocco arrivasse a metà giro la lettera salterebbe, quindi i tocchi durante un giro si ignorano.
Librerie
GSAP 3.15.0, SplitText 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,2 KB; le librerie: GSAP + SplitText 31 KB.
Collaudo
Provata il 24 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.
