Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Gli anelli del tronco
Scorri dentro l’anteprima
La storia di una falegnameria raccontata dalla quercia piantata l’anno in cui ha aperto, nello stile minimal: scendendo, la sezione del tronco cresce un anello all’anno sotto la corteccia, larghi negli anni buoni e stretti in quelli secchi, mentre l’anno conta. Gli anni importanti sono anelli vermigli, segnati su un righello sottile che va dal midollo alla corteccia, e cambiano la nota sotto l’anno.
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 rings of the trunk</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the story of a made-up furniture workshop, Alder, told by the oak planted the year it opened. Scrolling, the
cross-section of the trunk grows one ring a year under its bark, from the pith outwards, while the year counts;
the years that mattered are drawn in vermilion and written on a thin radial ruler -->
<main>
<section class="apertura">
<p class="piccolo">Alder, furniture workshop</p>
<h1 class="titolo">The oak in our yard<br>keeps the books.</h1>
<p class="piccolo piccolo--tenue">Scroll to count the rings.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco" data-palco>
<header class="testa">
<p class="marchio">Alder</p>
<p class="piccolo piccolo--tenue">One ring a year</p>
</header>
<svg class="tronco" data-tronco aria-hidden="true"></svg>
<div class="conto">
<p class="anno" data-anno>1962</p>
<p class="nota" data-note aria-live="polite"></p>
</div>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Every table we make<br>is a few of these rings.</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.
24 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 «Gli anelli del tronco» da Animorio e adattala al mio sitoCosa fa
La storia di una falegnameria inventata, Alder, su un bianco caldo con l’inchiostro nero in linee sottili e un solo vermiglio. Dopo l’apertura lo schermo si ferma: a destra il midollo di una quercia, un anellino nero con la corteccia appena intorno; a sinistra l’anno, 1962, grande in un serif variabile, e sotto la prima nota. Scendendo il tronco cresce verso l’esterno un anno alla volta: ogni anello si disegna in giro partendo dal righello, proprio sotto la corteccia, e la corteccia si allarga con lui. Gli anelli sono larghi nei decenni buoni e stretti in quelli secchi, sempre più fitti man mano che l’albero invecchia, e nessuno è un cerchio perfetto: tutti hanno la stessa forma un po’ storta di una quercia vera. L’anno conta con le cifre a larghezza fissa; quando arriva un anno importante (1975, 1991, 2008) il suo anello è vermiglio e più spesso, sul righello che va dal midollo alla corteccia compaiono una tacca e l’anno, la cifra grande prende peso per un momento e la nota cambia in una finestra: la vecchia esce in alto, la nuova sale da sotto. A 2026 la corteccia va un capello oltre l’ultimo anello e si assesta con un piccolo elastico, e l’anno resta pieno. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
Un albero col suo seme
Le larghezze degli anelli nascono da un piccolo generatore di numeri casuali con un seme (SEED): lo stesso seme fa sempre lo stesso albero. Ogni larghezza è un clima lento (due onde di sinusoidi, i decenni buoni e quelli secchi) per il rumore dell’anno, e cala con l’età come negli alberi veri. Le somme progressive danno il raggio di ogni anello, da quello del midollo fino a 1.
Una forma storta per tutti
Ogni anello è un path di 144 punti: il raggio per 1 più tre sinusoidi (una, due e tre onde per giro) che tutti gli anelli condividono, più un’ondina sua. La prima sposta il centro, come il midollo fuori asse di un tronco vero; le altre lo schiacciano. WOBBLE dice quanto. I path partono dall’angolo del righello, così ogni anello si disegna da lì.
Un anello all’anno
La timeline, legata allo scorrimento con scrub SCRUB, porta un numero y da 0 al numero di anni. Ogni anello ha pathLength 1 e stroke-dasharray 1 1: il suo stroke-dashoffset va da 1 a 0 mentre y passa per il suo anno, e lo disegna in giro. La corteccia è un path solo alla misura piena, scalato a ogni fotogramma fino all’anello che si sta disegnando, con vector-effect non-scaling-stroke perché il tratto resti sottile.
Gli anni importanti
NOTES ha le note per anno: gli anni fra il primo e l’ultimo diventano anelli vermigli, con una tacca e l’anno sul righello. Le etichette hanno un contorno del colore della carta dipinto sotto (paint-order: stroke), così si leggono sopra gli anelli. La cifra grande prende peso per tre anni dopo ogni nota, e la nota nuova sale da sotto una finestra con overflow hidden mentre la vecchia esce in alto.
L’assestamento e le misure
All’ultimo anno un secondo valore della timeline allarga la corteccia dell’1,2 per cento e la lascia tornare con elastic.out, mentre l’anno prende ancora un po’ di peso con un back.out. Centro, raggio e posto dell’anno si ricalcolano a ogni refresh di ScrollTrigger e a ogni resize.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FROM | script.js | 1962 | L’anno in cui l’albero è stato piantato: il midollo. |
TO | script.js | 2026 | Quest’anno: l’anello sotto la corteccia. |
NOTES | script.js | { 1962: …, 1975: …, 1991: …, 2008: …, 2026: … } | Le note, per anno: gli anni fra il primo e l’ultimo diventano anelli vermigli sul righello. |
WOBBLE | script.js | 0.07 | Quanto gli anelli sono lontani da un cerchio perfetto. |
SEED | script.js | 7 | Cambialo per un altro albero (anelli larghi e stretti in altri anni). |
SCRUB | script.js | 0.6 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per la pagina «la nostra storia» di una bottega, una falegnameria, una cantina, un vivaio o qualunque attività con qualche decennio alle spalle: gli anni passano davvero sotto gli occhi e quelli importanti restano segnati. Va bene anche per un anniversario.
Sul telefono
Uguale, con misure adattate: il tronco sta al centro in alto, l’anno e la nota sotto, gli anelli hanno un tratto più fino perché sono più fitti.
Con il movimento ridotto
Il tronco non cresce davanti agli occhi: un quadro fermo per ogni nota (1962, 1975, 1991, 2008, 2026) con tutti gli anelli fino a quell’anno, che si danno il cambio con una dissolvenza; le note cambiano sfumando e alla fine non c’è l’elastico.
Trappole
- Il raggio della corteccia si legge in un punto qualunque fra due anni (y non è intero): le somme delle larghezze vanno interpolate fra i due anelli, altrimenti l’indice con la virgola dà undefined e il disegno diventa NaN.
- L’ultima nota entrava mezzo anno dopo l’ultimo anno, cioè mai: ogni nota arriva al suo posto entro il suo anno e la vecchia esce appena prima.
- Le etichette degli anni sul righello si perdevano fra gli anelli: con un contorno del colore della carta dipinto sotto (paint-order: stroke) si leggono.
- Senza vector-effect non-scaling-stroke la corteccia, scalata, partiva con un tratto quasi invisibile e finiva grossa.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Newsreader (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.
