Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il giardino che sboccia
Scorri dentro l’anteprima
La pagina di un negozio di semi: scendendo, dalla terra in fondo a ogni sezione crescono steli che si disegnano e si piegano, le foglie si aprono con un elastico e i boccioli sbocciano un petalo alla volta in papaveri, margherite, tulipani e cosmos, con api e farfalle che volano da un fiore all’altro. Tornando su si richiude tutto.
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 blooming garden</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.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>
<!-- la testata del vivaio inventato -->
<header class="testata">
<p class="marchio">Wildling <span>Seed Co.</span></p>
<nav class="menu" aria-label="Main">
<a href="#poppy">Seeds</a>
<a href="#cosmos">Sowing</a>
<a href="#fine">Shop</a>
</nav>
</header>
<main>
<!-- l'apertura: il titolo e tre semi che cadono nella terra -->
<section class="apertura" data-apertura>
<p class="apertura__etichetta" data-entra>Heirloom flower seeds, packed by hand</p>
<h1 class="apertura__titolo">
<span class="riga"><span data-riga>Grown slow,</span></span>
<span class="riga"><span data-riga>picked <em>wild.</em></span></span>
</h1>
<p class="apertura__testo" data-entra>Four meadow favourites in small batches. Scroll down and watch them come up.</p>
<p class="apertura__cenno" data-cenno data-entra>
Scroll to sow
<svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
</p>
<svg class="apertura__terra" data-terra-apertura aria-hidden="true"></svg>
</section>
<!-- le quattro aiuole: il palco resta fermo e, scorrendo, i fiori crescono e sbocciano -->
<section class="aiuola aiuola--poppy" id="poppy" data-aiuola data-fiore="poppy">
<div class="palco">
<div class="scheda">
<p class="scheda__latino">Papaver rhoeas</p>
<h2 class="scheda__nome">Field Poppy</h2>
<p class="scheda__testo">Paper-thin petals that open at dawn and drop by dusk. Scatter on bare soil and forget about them.</p>
<dl class="scheda__dati">
<div><dt>Sow</dt><dd>March to May</dd></div>
<div><dt>Blooms</dt><dd>June to August</dd></div>
</dl>
</div>
<svg class="giardino" data-giardino aria-hidden="true"></svg>
</div>
</section>
<section class="aiuola aiuola--daisy" id="daisy" data-aiuola data-fiore="daisy">
<div class="palco">
<div class="scheda">
<p class="scheda__latino">Leucanthemum vulgare</p>
<h2 class="scheda__nome">Ox-eye Daisy</h2>
<p class="scheda__testo">The meadow classic. Comes back every year, a little thicker each time.</p>
<dl class="scheda__dati">
<div><dt>Sow</dt><dd>April to June</dd></div>
<div><dt>Blooms</dt><dd>May to September</dd></div>
</dl>
</div>
<svg class="giardino" data-giardino aria-hidden="true"></svg>
</div>
</section>
<section class="aiuola aiuola--tulip" id="tulip" data-aiuola data-fiore="tulip">
<div class="palco">
<div class="scheda">
<p class="scheda__latino">Tulipa sylvestris</p>
<h2 class="scheda__nome">Wild Tulip</h2>
<p class="scheda__testo">A slender cup that opens to the sun and closes again at night.</p>
<dl class="scheda__dati">
<div><dt>Plant</dt><dd>October to November</dd></div>
<div><dt>Blooms</dt><dd>April to May</dd></div>
</dl>
</div>
<svg class="giardino" data-giardino aria-hidden="true"></svg>
</div>
</section>
<section class="aiuola aiuola--cosmos" id="cosmos" data-aiuola data-fiore="cosmos">
<div class="palco">
<div class="scheda">
<p class="scheda__latino">Cosmos bipinnatus</p>
<h2 class="scheda__nome">Cosmos</h2>
<p class="scheda__testo">Feathery leaves, flowers on long wiry stems, and the bees will not leave it alone.</p>
<dl class="scheda__dati">
<div><dt>Sow</dt><dd>April to May</dd></div>
<div><dt>Blooms</dt><dd>July to October</dd></div>
</dl>
</div>
<svg class="giardino" data-giardino aria-hidden="true"></svg>
</div>
</section>
<footer class="fine" id="fine">
<p class="fine__frase">Sow now, <em>bloom by June.</em></p>
<a class="fine__bottone" href="#poppy"><span>Shop the seeds</span></a>
</footer>
</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="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
73 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 giardino che sboccia» da Animorio e adattala al mio sitoCosa fa
La pagina di un vivaio inventato, Wildling Seed Co., su una carta color crema. In apertura un titolo grande, «Grown slow, picked wild.», e in fondo una striscia di terra: tre semi ci cadono dentro rimbalzando e spuntano tre germogli che aprono le due foglioline e poi dondolano al vento. Sotto vengono quattro aiuole, una per fiore: papavero, margherita, tulipano selvatico e cosmos, ognuna col suo colore di fondo, il nome latino, il nome grande, due righe e quando si semina e quando fiorisce. Quando un’aiuola arriva, il palco si ferma e dalla terra in basso crescono gli steli: si disegnano dal basso in alto, ognuno col suo bocciolo verde in punta, poi si piegano da un lato con un piccolo rimbalzo, e lungo lo stelo le foglie si aprono di scatto con un elastico. Poi i boccioli si dividono in due sepali e i petali escono uno alla volta, a ventaglio dall’alto verso i lati, ognuno con la sua molla, finché il cuore del fiore si gonfia nel mezzo. Quasi tutti i fiori sono quelli dell’aiuola, qualcuno è di un’altra. Quando i fiori sono aperti arrivano dai lati le api e le farfalle: volano da un fiore aperto all’altro, si posano un attimo e ripartono, le api sbattendo le ali velocissime, le farfalle più lente. Tutto il giardino ondeggia al vento. Scorrendo indietro i fiori si richiudono, le foglie si ripiegano, gli steli tornano nella terra e gli insetti se ne vanno. Il puntatore sopra un fiore lo spinge: il fiore si gonfia un poco e lo stelo dondola avanti e indietro finché si ferma. La testata sparisce mentre si scende e torna appena si risale.
Come funziona
Il palco fermo
Ogni aiuola è una sezione alta 2,4 schermi con dentro un palco sticky alto 100lvh: in alto il testo, sotto un SVG che prende tutto lo spazio rimasto. Il viewBox dell’SVG è grande quanto l’SVG in pixel, così un’unità è un pixel. In fondo c’è la striscia di terra, un tracciato ondulato con qualche sassolino, disegnata sopra le basi degli steli.
Le piante sono numeri
Ogni pianta è un oggetto con quattro numeri da 0 a 1: g (quanto è cresciuta), b (quanto si è piegata), uno per ogni foglia e o (quanto è aperto il fiore). Una timeline per aiuola li muove, legata allo scorrimento con scrub da quando la sezione arriva al 25% dello schermo a quando il palco si stacca: g con power2.out, b con elastic.out, le foglie con elastic.out nel momento in cui lo stelo le raggiunge, o in 2,8/BLOOM unità. In fondo resta una pausa a fiori aperti. Tornando su la timeline va all’indietro e il giardino si richiude da solo.
Lo stelo che si disegna
A ogni fotogramma un ticker di GSAP rifà lo stelo come curva di Bézier cubica: la base è nella terra, la punta si sposta di lato di STEM_CURVE per b, più il vento (due seni con fasi diverse, per WIND) e la spinta del puntatore. Lo stelo ha pathLength=1, stroke-dasharray 1 2 e stroke-dashoffset 1−g: si disegna dal basso. Per mettere il bocciolo proprio sulla punta del tratto, la curva si misura in sedici pezzi e si cerca il punto a quella frazione di lunghezza; lì vanno anche le foglie, girate secondo la tangente.
I petali uno alla volta
La testa del fiore è un gruppo con traslazione, rotazione (la tangente dello stelo) e scala. Ogni petalo è lo stesso tracciato girato del suo angolo: chiuso punta in su ed è stretto e corto, così spunta colorato dalla cima del bocciolo; aperto è al suo angolo e a grandezza piena. Ogni petalo ha una finestra di o che parte un po’ dopo quella del precedente (prima quelli in alto) e dentro passa per elastic.out, preso con gsap.parseEase: anche con lo scrub ogni petalo arriva con la sua molla. Le due metà del bocciolo si allontanano e restano dietro come sepali; il cuore cresce per ultimo.
Insetti e puntatore
Api e farfalle compaiono quando la media di o supera la metà: scelgono un fiore aperto che nessun altro sta visitando e ci arrivano con una molla smorzata (velocità più forza verso la meta meno attrito, a ogni fotogramma), con un tremolio sopra; dopo un attimo posate ne scelgono un altro. Le ali battono con un seno: le api in fretta in altezza, le farfalle in larghezza. Un cerchio trasparente su ogni fiore ascolta pointerenter e pointerdown: un numero swing va a ±1 e torna a 0 con elastic.out, e spinge la punta dello stelo di SWAY.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DENSITY | script.js | 9 | Quante piante crescono in ogni aiuola sul computer; il telefono ne ha circa due terzi. |
STEM_CURVE | script.js | 0.6 | Quanto si piegano gli steli una volta cresciuti: 0 dritti, 1 con la testa che ciondola. |
BLOOM | script.js | 1 | Quanto in fretta si aprono i boccioli scorrendo: 0,5 piano, 2 di colpo. |
WIND | script.js | 1 | Quanto il vento muove gli steli: 0 è aria ferma. |
INSECTS | script.js | 3 | Quante api e farfalle volano in ogni aiuola. |
SWAY | script.js | 1 | Quanto dondola un fiore quando il puntatore lo tocca. |
MIX | script.js | 0.3 | La parte di ogni aiuola data agli altri tre fiori: 0 solo il fiore dell’aiuola. |
--papavero | style.css | #d9412b | Il colore dei papaveri; accanto ci sono quelli di margherite, tulipani e cosmos e dei loro cuori. |
Quando usarla
Per chi vende o racconta qualcosa che cresce: un vivaio, un negozio di semi o di piante, un fiorista, un orto condiviso, una marca di cosmetici naturali, la pagina di primavera di un catalogo, o un racconto che deve sbocciare man mano che si legge.
Sul telefono
La stessa animazione con le misure adattate: circa due terzi delle piante, fiori e insetti un po’ più piccoli, il testo dell’aiuola in colonna sopra il giardino; le piante vicino ai bordi si piegano verso il centro, così nessun fiore esce dallo schermo. Un tocco su un fiore lo fa dondolare.
Con il movimento ridotto
Niente crescita, niente vento, niente voli e niente scorrimento morbido: le piante sono già cresciute e i fiori aperti, con qualche ape e farfalla posata, e ogni giardino compare in dissolvenza quando arriva la sua aiuola. Anche il titolo e i germogli dell’apertura compaiono in dissolvenza.
Trappole
- Con pathLength=1 lo stroke-dashoffset va da 1 a 0, ma la curva è costruita per parametro e non per lunghezza: messo il bocciolo al parametro g, restava indietro o correva avanti rispetto al tratto. La curva si misura in sedici pezzi e il bocciolo va al punto che sta davvero a quella frazione della lunghezza.
- Le due metà del bocciolo con il bordo interno curvo lasciavano in mezzo una fessura del colore dello sfondo, e il bocciolo sembrava un anello. Il bordo interno è dritto e le due metà si sovrappongono di poco più di un pixel.
- Con uno scrub, un elastico messo sul tween di tutto il fiore fa rimbalzare tutti i petali insieme. Il tween muove solo o, senza curva, e ogni petalo passa la sua parte di o in gsap.parseEase('elastic.out(1, 0.5)'): così rimbalzano uno alla volta, avanti e indietro.
- Le piante vicino ai bordi, piegate verso fuori, portavano il fiore fuori dallo schermo, soprattutto sul telefono. Quelle nel primo e nell’ultimo quinto si piegano verso il centro, e la piega non supera lo spazio che resta fino al bordo.
- Rifare il disegno di ogni pianta a ogni fotogramma anche fuori schermo è uno spreco: un secondo ScrollTrigger per aiuola dice quando è visibile, e i petali si riscrivono solo quando o cambia.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 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.
