Il pulsante gonfiabile
Pulsanti, Fisica, WebGL, 3D
NuovaGratis
Tutti i componenti
Il catalogo dei semi
Il catalogo di primavera di un'azienda di sementi, stampato in quattro inchiostri risograph, da sfogliare prendendo le pagine per l'angolo. La carta è disegnata in WebGL e si piega come quella vera: attorno a un cono con la punta sulla linea della costola, così la costola resta ferma, la carta non si allunga mai e l'angolo che tieni si arriccia più del resto. Lasciata, la pagina cade dal lato verso cui pende, l'aria ne trattiene il bordo e la carta trema posandosi; luce, lucentezza e ombra vengono dalla forma.
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 seed catalogue</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/caprasimo@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- a seed catalogue printed in four risograph inks. The pages are drawn on a WebGL canvas: a page taken by a
corner bends round a cone whose tip sits on the line of the spine, so the spine stays put and the paper never
stretches; light, sheen and shadow come from the shape. The words below are the real pages: the script draws
them on the paper, and a screen reader reads them -->
<section class="catalogue" aria-label="Wrenfield Seed Co., spring catalogue" data-catalogue data-autoclic>
<div class="book" tabindex="0" role="group" aria-roledescription="catalogue" aria-label="Wrenfield Seed Co., spring catalogue" data-book>
<canvas class="book__paper" aria-hidden="true" data-paper></canvas>
<canvas class="book__ghost" aria-hidden="true" data-ghost></canvas>
<span class="book__ring" aria-hidden="true" data-ring></span>
<div class="book__text" data-pages>
<article data-art="cover" data-name="Cover">
<p data-kicker>Spring 2027</p>
<h2><span>Wrenfield</span> <span>Seed Co.</span></h2>
<p data-text>Heirloom vegetables, herbs and cutting flowers.</p>
<p data-text>Grown and saved on our own fields.</p>
</article>
<article data-art="note" data-name="From the field">
<h2>From the field</h2>
<p data-text>Every packet in here was grown on our farm, picked by hand and dried in the old barn. We sow what we sell, so we only sell what did well for us.</p>
<p data-sign>Mara and Teo, growers</p>
<h3>When to sow</h3>
<ul>
<li data-sow="3-4" data-pick="7-9">Tomatoes: sow in March and April, pick from July to September.</li>
<li data-sow="5-6" data-pick="7-9">Beans: sow in May and June, pick from July to September.</li>
<li data-sow="4-5" data-pick="9-10">Squash: sow in April and May, pick in September and October.</li>
<li data-sow="3-6" data-pick="5-10">Herbs: sow from March to June, pick from May to October.</li>
<li data-sow="4-5" data-pick="7-10">Flowers: sow in April and May, cut from July to October.</li>
</ul>
</article>
<article data-art="tomatoes" data-name="Tomatoes">
<p data-kicker>Tomatoes</p>
<h2>Sun on the vine</h2>
<ul>
<li><b>Brandywine</b> <span>Pink beefsteak, rich and old fashioned.</span> <span data-days>85 days</span> <span data-price>$3.80</span></li>
<li><b>Green Zebra</b> <span>Striped, sharp and very juicy.</span> <span data-days>75 days</span> <span data-price>$3.60</span></li>
<li><b>San Marzano</b> <span>Long and meaty, the one for sauce.</span> <span data-days>80 days</span> <span data-price>$3.40</span></li>
</ul>
</article>
<article data-art="beans" data-name="Beans and peas">
<p data-kicker>Beans and peas</p>
<h2>Up the poles</h2>
<ul>
<li><b>Borlotti</b> <span>Splashed pods, creamy beans.</span> <span data-days>65 days</span> <span data-price>$3.20</span></li>
<li><b>Blue Lake</b> <span>A stringless green climber.</span> <span data-days>60 days</span> <span data-price>$2.90</span></li>
<li><b>Scarlet Runner</b> <span>Red flowers first, then long pods.</span> <span data-days>70 days</span> <span data-price>$3.20</span></li>
</ul>
</article>
<article data-art="squash" data-name="Squash">
<p data-kicker>Squash</p>
<h2>Keeps till spring</h2>
<ul>
<li><b>Musquée de Provence</b> <span>Deep ribs and sweet orange flesh.</span> <span data-days>120 days</span> <span data-price>$4.10</span></li>
<li><b>Delicata</b> <span>Small and striped, no peeling.</span> <span data-days>100 days</span> <span data-price>$3.60</span></li>
<li><b>Crown Prince</b> <span>Blue grey skin, keeps for months.</span> <span data-days>110 days</span> <span data-price>$3.90</span></li>
</ul>
</article>
<article data-art="herbs" data-name="Herbs">
<p data-kicker>Herbs</p>
<h2>By the kitchen door</h2>
<ul>
<li><b>Genovese basil</b> <span>Big soft leaves for pesto.</span> <span data-days>60 days</span> <span data-price>$2.80</span></li>
<li><b>Dill</b> <span>Feathery, with flowers for pickles.</span> <span data-days>55 days</span> <span data-price>$2.40</span></li>
<li><b>Flat-leaf parsley</b> <span>Sow a little, and often.</span> <span data-days>75 days</span> <span data-price>$2.40</span></li>
</ul>
</article>
<article data-art="flowers" data-name="Cutting flowers">
<p data-kicker>Cutting flowers</p>
<h2>A bucket a week</h2>
<ul>
<li><b>Zinnia</b> <span>Hot colours from July to the frost.</span> <span data-days>75 days</span> <span data-price>$3.20</span></li>
<li><b>Cosmos</b> <span>Tall and airy, the more you cut.</span> <span data-days>90 days</span> <span data-price>$3.00</span></li>
<li><b>Sweet pea</b> <span>Scented, sow in autumn or spring.</span> <span data-days>100 days</span> <span data-price>$3.40</span></li>
</ul>
</article>
<article data-art="back" data-name="Back cover">
<h2>Order by post or at the farm gate</h2>
<p data-text>Packets leave the barn within two days.</p>
<p data-text>Every order over $25 comes with a free packet of marigolds.</p>
<p data-sign>Wrenfield Seed Co.</p>
</article>
</div>
</div>
<nav class="leaf" aria-label="Pages">
<button class="leaf__btn leaf__btn--prev" type="button" aria-label="Previous page" data-prev><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 6l-6 6 6 6"/></svg></button>
<p class="leaf__where"><span class="leaf__roll" data-where></span></p>
<button class="leaf__btn leaf__btn--next" type="button" aria-label="Next page" data-next><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 6l6 6-6 6"/></svg></button>
</nav>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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.
108 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 catalogo dei semi» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco il catalogo di primavera della Wrenfield Seed Co., chiuso: una copertina gialla stampata a risograph, con un sole rosso, un campo arato verde e uno scricciolo su un palo, controluce. Appena arrivato, l'angolo in basso della copertina si arriccia e ricade, come per dire che si sfoglia. Prendendo una pagina per l'angolo e trascinandola, la carta si piega sotto la mano: vicino alla costola resta giù, verso l'angolo si alza e si arrotola, e il punto preso resta sotto il dito; preso in basso la piega corre in diagonale, preso a metà del bordo diventa un cilindro, e muovendo l'angolo in su o in giù la piega si raddrizza o si inclina. Mentre si alza la pagina prende luce o va in ombra a seconda della pendenza, sulla curva scorre una lucentezza morbida, sulle pagine sotto cade la sua ombra, più scura dove la carta è bassa, e in aria si intravede in trasparenza la stampa del retro. Lasciata oltre la metà, o lanciata, la pagina cade dall'altra parte per il suo peso, col bordo trattenuto dall'aria, e posandosi la carta trema; prima della metà ricade indietro. La copertina è un cartoncino più rigido delle pagine. Aperto, il catalogo scivola con la costola al centro; dentro una lettera dei coltivatori col calendario delle semine, poi pomodori, fagioli, zucche, erbe e fiori da taglio, ognuno con il suo disegno a quattro inchiostri, tre varietà, i giorni e il prezzo; nella piega delle pagine di mezzo ci sono i due punti metallici. Col mouse vicino al bordo di una pagina l'angolo si piega come un'orecchia. Sotto, le frecce e i nomi delle pagine aperte, che scorrono nel verso della pagina. Al telefono si sfoglia una pagina alla volta.
Come funziona
Un cono con la punta sulla costola
La pagina è una griglia di 34 per 26 punti sul foglio piano. Piegata, ogni punto sta su una retta che parte dalla punta di un cono messa sulla linea della costola, oltre il bordo alto o basso: la costola è una di quelle rette, quindi non si muove, e ogni punto conserva la sua distanza dalla punta, quindi la carta non si allunga (è il modello di Hong, Card e Chen per i libri elettronici, generalizzato). Girando attorno alla punta, la direzione delle rette disegna una curva su una sfera: la si costruisce a passi, ruotando la direzione di avanzamento di quanto vuole la piega (sparsa con uno smoothstep su una parte della pagina) e poi avanzando sul cerchio massimo; la prima direzione è l'angolo attorno alla costola. Normali comprese, è un conto di 40 rotazioni per pagina.
Dove la prendi
La punta del cono si avvicina all'angolo che prendi: presa nell'angolo sta a un quinto di pagina, e la piega è stretta e diagonale; presa a metà del bordo va lontanissima, e il cono diventa un cilindro. Tutta la mossa è un numero p da 0 a 1: all'inizio è quasi solo piega (l'angolo si stacca), poi la pagina gira, e alla fine si distende. Per tenere il punto preso sotto il dito, a ogni movimento si calcola dove cadrebbe sullo schermo, prospettiva compresa, per 40 valori di p e si prende quello giusto; spostando l'angolo in su o in giù la punta del cono si avvicina o si allontana.
Il peso, l'aria e il tremolio
La mano tira la pagina con una molla rigida, così lasciandola la pagina ha la velocità della mano. Libera, gira attorno alla costola col suo peso (una coppia che va col coseno dell'angolo e cambia verso oltre la metà), frenata dall'aria in modo lineare e quadratico, e si posa con un piccolo rimbalzo; la piega è una seconda molla (FLUTTER) tirata verso −AIR per la velocità, quindi il bordo resta indietro mentre cade e trema quando si posa. La pagina non può piegarsi dentro la pila: la piega resta fra −angolo e 180° − angolo. Al rilascio si simula in anticipo dove atterrerà, e la scritta sotto cambia subito. Le frecce sono una mano finta che solleva l'angolo in basso dentro la stessa fisica e lascia la pagina oltre la cima.
Stampato in quattro inchiostri
Le pagine vere sono gli articoli nell'HTML, nascosti alla vista e letti dagli screen reader: lo script li legge e li stampa una volta sola su tele da 1024, in unità di 300 per 414. Ogni inchiostro (giallo, verde, rosso, blu) è uno strato a parte, bucherellato dove il tamburo resta a secco con un motivo di grana, posato sulla carta in multiply e spostato di un niente, come un risograph fuori registro: rosso su giallo fa l'arancio delle zucche, verde su giallo il verde delle foglie, blu su giallo il verde scuro del titolo. Caratteri: Caprasimo per i titoli e i nomi, Bricolage Grotesque per il resto.
Luce, lucentezza e ombra
In WebGL ogni pagina ha due facce (gl_FrontFacing sceglie la stampa) e la luce si calcola sulla normale: Lambert normalizzato perché una pagina distesa mostri i colori giusti, un po' di luce che passa da dietro, una lucentezza solo dove la curva guarda la luce più della pagina piana, la piega verso la costola e il bordo. In aria la carta lascia vedere la stampa del retro, rovesciata. L'ombra: le pagine in aria si proiettano lungo la luce in una texture larga 256, più scure dove sono basse (blend MAX), sfocate in due passate e lette dalle pagine distese e dal tavolo; sotto la pagina in cima della pila spuntano i bordi di tre fogli.
Una pagina alla volta, tasti e anteprima
Sotto i 640 pixel ogni pagina sta su un foglio suo, col retro bianco e la stampa in trasparenza; la pagina girata esce dal riquadro sfumando, e quella prima si riporta indietro trascinando dal terzo sinistro. Chiuso, il catalogo sta al centro, e ci torna solo quando tutte le pagine hanno passato la costola. Frecce, Pagina su e giù, Inizio e Fine; aria-live dice le pagine aperte. Un clic da script (l'anteprima della libreria) gira la pagina dopo e, al retro, fa tornare indietro tutte le pagine a ventaglio.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TURN | script.js | 0.5 | I secondi che la mano delle frecce impiega a portare la pagina oltre la cima. |
BEND | script.js | 1.15 | Quanto si arriccia una pagina presa per l'angolo, in radianti. |
PEEK | script.js | 1.5 | Quanto si piega l'angolo quando il mouse gli arriva vicino, in radianti. |
AIR | script.js | 0.1 | Quanto l'aria trattiene il bordo di una pagina che cade. |
FLUTTER | script.js | [130, 6] | La molla della carta: rigidezza e smorzamento (più basso, più tremolio quando si posa). |
GRAVITY | script.js | 24 | Quanto in fretta una pagina lasciata cade dal lato verso cui pende. |
COVER | script.js | 2.2 | Quante volte la copertina è più rigida delle pagine. |
LIGHT | script.js | [-0.36, 0.3, 1] | Da dove viene la luce: da sinistra o da destra, dall'alto o dal basso, e la sua altezza. |
SHADOW | script.js | 0.42 | Quanto è scura l'ombra di una pagina sollevata. |
DEPTH | script.js | 2200 | La prospettiva in pixel: più piccola, più la pagina sollevata viene verso di te. |
Quando usarla
Per il catalogo di un vivaio o di un'azienda di sementi, una rivista, una brochure, un lookbook, il menu di un ristorante, un ricettario, l'annuario di un club o di una scuola, un libretto per un matrimonio: qualunque cosa stampata che valga la pena sfogliare.
Sul telefono
Sotto i 640 pixel il catalogo mostra una pagina alla volta, larga fino a 360 pixel: il dito prende la pagina e la gira verso la costola a sinistra, e basta un terzo del giro perché cada; la pagina prima si riporta indietro trascinando dal terzo sinistro verso destra. Il catalogo lascia scorrere la pagina in verticale (touch-action pan-y) e prende solo i gesti di lato. Gli angoli che si piegano col mouse sul telefono non ci sono.
Con il movimento ridotto
Le pagine si girano subito, con le frecce, coi tasti, con un tocco o con un gesto di lato: le pagine vecchie si dissolvono sulle nuove. Niente piega sotto la mano, niente angoli col mouse, niente entrata, e il catalogo cambia posto senza scivolare.
Trappole
- La mano delle frecce era un tween di GSAP e la fisica andava a passi limitati a 1/30 di secondo: con fotogrammi lenti la mano arrivava in cima prima della pagina, che ricadeva indietro e poi saltava dall'altra parte. Ora la mano si muove dentro la fisica, e al rilascio la velocità viene alzata finché la previsione dell'atterraggio non dà il lato giusto.
- In WebGL 1 le mipmap vogliono texture con lati potenze di due: le pagine sono stampate schiacciate in quadrati da 1024 (unità di 300 per 414) e le coordinate della griglia le riallargano.
- Un angolo sollevato di meno di 30 gradi, visto dall'alto, quasi non si vede: per l'orecchia col mouse la carta si arrotola fino a circa 85 gradi nell'ultima fascia, con la punta del cono a mezza pagina dall'angolo; con la punta più vicina si arrotolava tutto il bordo alto.
- I fogli sotto quello in cima, spostati di un pixel per far vedere lo spessore, mostravano pezzetti della loro stampa: ora sono carta nuda, e al massimo tre.
- Rimettere al centro il catalogo chiuso appena l'ultima freccia era premuta faceva uscire dal riquadro la pila di sinistra mentre le pagine stavano ancora tornando: il catalogo scivola solo quando tutte hanno passato la costola, e mai sotto una mano che tiene una pagina.
- L'ombra di una pagina in piedi, con la luce bassa, usciva dalla tela e veniva tagliata dal suo bordo: luce più alta, ombra che sparisce con l'altezza, e un'ultima sfumatura di 30 pixel ai bordi della tela.
- La trasparenza del retro su una pagina distesa sembrava sporco, e sulla copertina gialla un titolo rovesciato: si vede solo in aria, e la copertina, che è cartoncino, quasi niente.
Librerie
GSAP 3.15.0, Caprasimo 5.3.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 27 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
