Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
L’arco con la chiave di volta
Scorri dentro l’anteprima
Uno studio di scalpellini costruisce il suo nome come un arco, nello stile minimal: scendendo, fra due pilastri sale una centina tratteggiata, poi i conci arrivano a due a due dai lati, ognuno con una lettera che viaggia sottile e prende peso quando si posa. La chiave di volta vermiglia entra per ultima e l’arco sente il colpo; poi la centina cade, l’arco si assesta di un pixel e resta in piedi da solo.
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 arch and its keystone</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up firm of stonemasons, Masonry, builds its own name as an arch. Scrolling, a dashed wooden centring goes
up between two piers, then the stones come in from all around, two at a time from the sides, each one carrying a
letter that is thin while it travels and takes weight as it lands. The keystone goes in last, in vermilion, and
the whole arch feels the blow; then the centring comes out and the arch stands on its own -->
<main>
<section class="apertura">
<p class="piccolo">Masonry, stone arches</p>
<h1 class="titolo">Nothing stands<br>until the last stone.</h1>
<p class="piccolo piccolo--tenue">Scroll to build it.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco" data-palco>
<header class="testa">
<p class="marchio">Masonry</p>
<p class="piccolo piccolo--tenue">Built by hand, dry joints</p>
</header>
<h2 class="nascosto">An arch of seven stones that spell Masonry</h2>
<svg class="tavola" data-tavola aria-hidden="true"></svg>
<p class="didascalia" aria-hidden="true">
<span class="didascalia__riga" data-dida>The centring goes up.</span>
<span class="didascalia__riga" data-dida>Stones from both sides, in pairs.</span>
<span class="didascalia__riga" data-dida>The keystone goes in last.</span>
<span class="didascalia__riga" data-dida>The centring comes out. It stands.</span>
</p>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Then it stands<br>for a few centuries.</h2>
</section>
</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/ScrollTrigger.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.
25 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 «L’arco con la chiave di volta» da Animorio e adattala al mio sitoCosa fa
Uno studio di scalpellini inventato, Masonry, su un bianco caldo con l’inchiostro nero, linee sottili e un solo vermiglio. Dopo l’apertura lo schermo si ferma e, scendendo, la linea di terra si disegna dal centro verso i lati, due pilastri a contorno salgono e fra loro si monta una centina di legno tratteggiata: il mezzo cerchio passa sopra da sinistra a destra, la trave si apre e cinque ritti scendono fino a terra. Poi arrivano i conci, sette spicchi di pietra a contorno sottile con una lettera grande ciascuno, girata lungo l’arco: entrano a due a due, uno da sinistra e uno da destra, scivolando lungo la loro linea di giunto da fuori dell’arco e accelerando come una pietra calata. Mentre viaggiano la lettera è sottile e stretta; quando il concio si posa batte un capello, rimbalza appena e la lettera prende peso e larghezza. Per ultima scende la chiave di volta, piena di vermiglio con la O chiara: al suo colpo tutti gli altri conci si scostano di un pixel e tornano, sempre meno verso i pilastri. L’arco scrive MASONRY. Poi la centina si abbassa e sparisce, l’arco cala di un pixel e si ferma, e fra i pilastri una quota vermiglia si apre dal centro e misura la luce: 4,20 m. In basso una didascalia cambia frase a ogni fase. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
L’arco disegnato dallo script
Terra, pilastri, centina e conci stanno in un SVG con il viewBox uguale ai pixel del palco fissato (position: sticky, alto 100lvh). Ogni concio è un path: un arco esterno, una linea di giunto, un arco interno, l’altra linea di giunto, con un giunto di due pixel e mezzo tolto dagli angoli. La lettera sta al centro dello spicchio, girata di 90 gradi meno l’angolo del concio, così la sua testa guarda sempre fuori dall’arco.
Ogni concio arriva lungo il suo giunto
Lo spostamento di un concio è la direzione del suo raggio moltiplicata per quanto manca all’arrivo (TRAVEL volte il raggio esterno), quindi quelli bassi entrano quasi di lato e la chiave scende dritta. La timeline, legata allo scorrimento con scrub SCRUB, li porta a due a due con power2.in, come una pietra calata che accelera; il secondo della coppia parte un attimo dopo.
Il colpo e il peso
Ogni concio ha tre numeri: p (il viaggio), c (il colpo) e w (il peso della lettera). All’arrivo c sale in un decimo e torna con elastic.out: il concio va fuori di due pixel e rientra. Intanto w porta la lettera da THIN a BOLD e da 78 a 112 di larghezza con un back.out. Quando arriva la chiave, lo stesso colpo passa a tutti gli altri conci con una forza che cala con la distanza e un piccolo ritardo, come un’onda.
La centina che se ne va
La centina si disegna riscrivendo i suoi path a ogni fotogramma: il mezzo cerchio arriva fino a un angolo che cresce, la trave si apre dal centro, i ritti si allungano verso terra uno dopo l’altro. Alla fine scende di diciotto pixel e svanisce, e tutto l’arco cala di un pixel e mezzo con un elastic.out: si sente che adesso si regge da solo.
Quota, didascalie e misure
La quota è un path solo (la linea e le due tacche) che si apre dal centro fino alle facce interne dei pilastri, con la scritta SPAN che compare quando è quasi aperta. Le didascalie in basso escono in alto da una finestra con overflow hidden allargandosi con l’asse wdth di Archivo. Tutte le misure si ricalcolano a ogni refresh di ScrollTrigger e a ogni resize.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'MASONRY' | Una lettera per concio (fino a 13): con un numero dispari la chiave di volta sta in mezzo. |
DEPTH | script.js | 0.32 | Quanto sono profondi i conci, come parte del raggio esterno dell’arco. |
TRAVEL | script.js | 0.45 | Da quanto lontano arriva ogni concio, come parte del raggio esterno. |
THIN | script.js | 200 | Il peso della lettera mentre il concio viaggia. |
BOLD | script.js | 720 | Il peso che prende quando il concio si posa. |
SPAN | script.js | '4.20 m' | La scritta della quota. |
SCRUB | script.js | 0.6 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per lo studio di un architetto, un’impresa edile, un restauratore o chiunque costruisca qualcosa pezzo per pezzo: una pagina «chi siamo» o «come lavoriamo» dove il nome si monta mentre si legge. Funziona con qualunque parola corta, meglio con un numero dispari di lettere.
Sul telefono
Uguale, con misure adattate: l’arco prende quasi tutta la larghezza, i conci sono meno profondi e le lettere più piccole, i colpi di un pixel e poco più. La didascalia resta in basso.
Con il movimento ridotto
Niente viaggi né rimbalzi: i conci compaiono al loro posto in dissolvenza, a due a due, con le lettere già piene; la centina si disegna e sparisce in dissolvenza, le didascalie si danno il cambio sfumando e la quota si apre.
Trappole
- Con una corsa lunga (più di metà del raggio) i conci alti entravano da sopra l’intestazione e si vedevano tagliati dal bordo: TRAVEL è a 0,45.
- Senza dominant-baseline central la lettera ruota intorno alla sua linea di base invece che al suo centro, e girata sui fianchi dell’arco esce dal concio verso l’interno.
- Un giunto tolto come angolo fisso viene largo fuori e stretto dentro: va tolto in pixel, con un angolo diverso per l’arco esterno e per quello interno, così resta largo uguale.
- Il colpo della chiave riusa il valore c dei conci, che hanno già il loro colpo d’arrivo nella timeline: i nuovi tween vogliono immediateRender: false, altrimenti GSAP scrive subito il loro valore di partenza e scorrendo indietro i conci saltano.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,7 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 19 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.
