Le storie a cubo
Storie, 3D, Transizioni
NuovaGratis
Tutti i componenti
L’origami della pubblicazione
Il pannello di pubblicazione di un blog, con l’articolo come un foglio quadrato di carta per origami a due colori: ogni fase della pubblicazione è un gruppo di pieghe vere, ognuna disegnata prima come la linea tratteggiata di uno schema di origami, e il quadrato diventa un aquilone, poi un cigno con il collo, la testa e la coda. Quando l’articolo è online il cigno apre le ali, prende il volo con qualche battito e si posa. Se il caricamento fallisce il lembo che si stava piegando ricade aperto e la sua linea resta in rosso finché Retry non lo ripiega.
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, viewport-fit=cover">
<title>The publishing origami</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the publish panel of a blog: the article is a square of two-tone origami paper. Every phase of the publishing
(build, optimize, upload, publish) is a group of folds, each one drawn first as a dashed line like in an
origami diagram; the square becomes a kite, then a long body, then a bird with a neck, a head and a tail.
When the article is live the bird opens its wings, takes off with a few beats and lands again.
The paper is painted by script.js on the canvas; the words, the phase bars and the button are HTML -->
<section class="pub" aria-labelledby="pub-title" data-publish>
<div class="pub__head">
<div class="pub__words">
<h2 class="pub__title" id="pub-title">Notes on Folding</h2>
<p class="pub__meta"><span class="pub__swap" data-meta>Draft · saved 2 min ago</span></p>
</div>
<p class="pub__figure" aria-hidden="true">
<span class="pub__pct" data-pct>1,240 words</span>
<span class="pub__live" data-live-badge>
<svg class="pub__tick" viewBox="0 0 24 24"><path d="M5.5 12.6l4.1 4.1L18.6 7.4" pathLength="1"/></svg>
<span>Live</span>
</span>
</p>
</div>
<div class="pub__paper" aria-hidden="true" data-paper>
<canvas class="pub__canvas" data-canvas></canvas>
</div>
<div class="pub__phases" role="progressbar" aria-labelledby="pub-title" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Not published yet" data-bar>
<div class="pub__phase" data-phase><span class="pub__name">Build</span><span class="pub__track"><span class="pub__fill"></span></span></div>
<div class="pub__phase" data-phase><span class="pub__name">Optimize</span><span class="pub__track"><span class="pub__fill"></span></span></div>
<div class="pub__phase" data-phase><span class="pub__name">Upload</span><span class="pub__track"><span class="pub__fill"></span></span></div>
<div class="pub__phase" data-phase><span class="pub__name">Publish</span><span class="pub__track"><span class="pub__fill"></span></span></div>
</div>
<div class="pub__foot">
<p class="pub__site"><span class="pub__swap" data-site>fieldnotes.blog/notes-on-folding</span></p>
<button class="pill" type="button" data-action data-autoclic><span class="pill__label" data-label>Publish</span></button>
</div>
<p class="sr" role="status" 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.
38 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’origami della pubblicazione» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da solo al centro, un pannello color carta con gli angoli tondi: in alto Notes on Folding e Draft · saved 2 min ago, a destra 1,240 words; in mezzo un foglio quadrato blu inchiostro posato come un rombo, visto un po’ dall’alto come su una scrivania, con la sua ombra; sotto, le quattro fasi Build, Optimize, Upload e Publish con una barretta ciascuna, l’indirizzo dell’articolo e il pulsante nero Publish. Puntando il pulsante, sul foglio si disegna la prima linea tratteggiata e l’angolo si solleva un poco, pronto a piegarsi. Premuto, la pubblicazione parte: prima di ogni piega la sua linea si disegna come in uno schema di origami (tratteggiata per una piega a valle, a tratto e punto per una piega a monte), poi il lembo si stacca dal foglio, gira in 3D intorno alla linea, si scurisce mentre si alza, mostra l’altro lato della carta, color corallo, e si posa dall’altra parte; lungo la piega nuova corre un riflesso di luce. In Build i due lati si piegano verso il centro e il foglio diventa un aquilone; in Optimize l’aquilone si piega a metà, gira su un fianco con un piccolo rimbalzo e la punta larga diventa la coda; in Upload la punta lunga si rovescia in su ed è il collo; in Publish dalla cima del collo si rovescia la testa col becco. Intanto la riga dice la fase (Building 24 pages…, Optimizing 61 images…, Uploading 38 files…, Going live…), la percentuale sale, la fase in corso si scrive più larga e la sua barretta si riempie; il pulsante diventa Cancel, chiaro e col bordo. Alla fine al posto della percentuale si disegna una spunta verde con Live, la riga dice Live on fieldnotes.blog · just now e il cigno si accuccia, apre le ali, si alza con qualche battito girandosi per mostrarle, plana e si posa con un piccolo assestamento, le ali appena aperte. Publish again lo spiega piega dopo piega, l’ultima per prima, fino al quadrato, e la pubblicazione riparte. Cancel durante il lavoro fa lo stesso e torna al foglio: Cancelled · draft kept. Una volta su due, nella demo, il caricamento fallisce: il lembo del collo si alza, esita e ricade aperto con un rimbalzo, la sua linea resta sul foglio tratteggiata in rosso, la fase Upload diventa rossa e la riga dice Upload failed · 3 files timed out; Retry, blu, ridà alla linea il suo colore e il collo si piega di nuovo.
Come funziona
La carta è fatta di faccette
Il foglio è un elenco di poligoni convessi, ognuno con il suo contorno nelle coordinate della carta (il quadrato da −0,5 a 0,5), la trasformazione affine che lo porta dove sta adesso e la sua altezza nella pila. All’inizio c’è una faccetta sola. Così una faccetta sa sempre quale parte della carta è, e quali dei suoi lati sono il bordo tagliato del foglio e quali sono pieghe.
Una piega vera
Una piega è una retta (un punto e una direzione), il lato che si muove e il tipo: a valle, a monte o rovesciata. Ogni faccetta che la retta attraversa si taglia in due (il ritaglio di un poligono convesso con un semipiano), e le parti dalla parte che si muove vengono riflesse: alla loro trasformazione si aggiunge lo specchio nella retta, x′ = x − 2((x − p)·n)n. A valle il lembo finisce in cima alla pila con l’ordine dei suoi strati rovesciato, a monte in fondo; in una piega rovesciata la punta finisce fra gli strati, come in un collo vero. Tutte le pieghe si calcolano una volta all’inizio: per ognuna resta la carta tagliata prima della piega e la carta dopo.
Il lembo gira in 3D
Durante la piega ogni punto del lembo, a distanza d dalla retta, sta in piede + n·d·cos θ e alto d·sin θ, con θ da 0 a 180 gradi; l’altezza nella pila passa intanto da quella vecchia a quella nuova. Tutto è proiettato in prospettiva dopo una rotazione della scena: il foglio è visto un po’ dall’alto, e mentre il lembo è in piedi la camera si sporge un poco, così si vede staccato dalla carta e non solo accorciato. Le faccette si dipingono dalla più bassa alla più alta, misurate nel sistema della carta e non dopo la rotazione.
Luce, retro, ombre e pieghe di luce
Il lato della carta che si vede viene dal verso del contorno proiettato: se la riflessione l’ha rovesciato si vede il retro, corallo invece di blu. La normale della faccetta, calcolata dai suoi vertici in 3D, dà la luce che viene dall’alto a sinistra; ogni faccetta proietta un’ombra che cresce con la sua altezza, e tutto il foglio un’ombra sfocata sul pannello, disegnata fuori dal canvas perché arrivi solo lei. I lati che sono pieghe si ripassano con una riga chiara, i bordi tagliati con una scura; un riflesso corre lungo ogni piega appena fatta, e una grana di fibre leggerissima copre la carta.
Lo schema, l’errore e il volo
Prima di ogni piega la sua retta si disegna nel tratto degli schemi di origami, chiara dove passa sulla carta e scura fuori, con un ritaglio sulla sagoma del foglio. Se il caricamento fallisce il lembo si ferma a metà e ricade con elastic.out, e la linea diventa rossa. Le ali sono i due lembi dell’aquilone, incernierati sul dorso: in volo girano intorno a quella cerniera in versi opposti, fra 30 e 118 gradi, mentre la camera si gira e si abbassa per mostrarle. Spiegare è la stessa cosa all’indietro: ogni piega da 180 a 0 gradi, l’ultima per prima.
Per chi non vede e per chi non vuole movimento
Le quattro fasi sono un role=progressbar con aria-valuenow e un aria-valuetext che nomina la fase; il pannello ha aria-busy mentre lavora e una riga aria-live dice quando la pubblicazione parte, fallisce, è annullata e quando l’articolo è online. Il pulsante cambia parola (Publish, Cancel, Retry, Publish again) e prende la larghezza nuova con un piccolo rimbalzo; un clic da script, quello dell’anteprima della libreria, non annulla mai e ripubblica solo dopo che Live si è visto per due secondi e mezzo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 7.5 | Quanto dura la pubblicazione della demo, in secondi, prima che il cigno voli: tutte le pieghe si stringono o si allungano insieme. |
WORDS | script.js | ['Building 24 pages', 'Optimizing 61 images', …] | Cosa dice la riga durante le quattro fasi (i nomi delle fasi sotto il foglio sono in index.html). |
SITE | script.js | fieldnotes.blog/notes-on-folding | L’indirizzo dell’articolo; a fine lavoro la riga dice su quale sito è pubblicato. |
FAIL_EVERY | script.js | 2 | Nella demo, una pubblicazione su quante va storta (0 mai). |
FAIL_PHASE | script.js | 2 | La fase che va storta allora: 0 Build, 1 Optimize, 2 Upload, 3 Publish. Il lembo che ricade è la prima piega di quella fase. |
NECK | script.js | 0.62 | Quanto è lungo il collo del cigno, in lati del foglio. |
BEATS | script.js | 3 | I battiti d’ala quando il cigno prende il volo. |
LIFT | script.js | 30 | Quanto si alza in volo, in pixel. |
TURN | script.js | 30 | Quanto si gira in volo per mostrare le ali, in gradi. |
GLINT | script.js | 0.75 | Il riflesso che corre lungo ogni piega nuova: 0 niente, 1 forte. |
Quando usarla
Per un’attesa di qualche secondo divisa in fasi e con un esito: pubblicare un articolo o un sito, un deploy, un’esportazione che passa per più lavorazioni. Le pieghe dicono bene «una cosa piatta che prende forma un passo alla volta», e il lembo che ricade dice subito dove si è fermato tutto; per un caricamento di pochi istanti è troppo.
Sul telefono
Il pannello prende la larghezza dello schermo meno 32 pixel (358 a 390) e resta alto 362; il foglio si ridimensiona per stare nel suo spazio e il canvas dipinge alla densità vera dello schermo, fino a due volte. Il pulsante è una pillola alta 40 che col dito si schiaccia e rimbalza; l’angolo che si solleva in anticipo e la scritta che si allarga ci sono solo sotto il mouse.
Con il movimento ridotto
Niente lembi che girano, camera che si sporge, riflessi né volo: le linee tratteggiate si vedono lo stesso, e a ogni piega il foglio nuovo compare in dissolvenza sopra quello vecchio, quindi la figura cresce passo per passo e dice a che punto si è. L’errore lascia il lembo aperto con la linea rossa, la fine mostra il cigno posato con le ali appena aperte, le parole nuove arrivano in dissolvenza.
Trappole
- Visto dritto dall’alto, un lembo a 90 gradi è di taglio e sparisce: la piega sembrava una tendina che taglia il foglio. Ora il foglio è visto un po’ dall’alto, come su una scrivania, e mentre il lembo è in piedi la camera si sporge un poco.
- Le prime ali erano pieghe che alzavano i lembi sopra il dorso: sembravano una vela e nascondevano il collo. Le ali ora sono i due lembi dell’aquilone, che sono già incernierati sul dorso, e girano intorno a quella cerniera.
- Con la carta corallo da una parte e rosa dall’altra le ali aperte avevano lo stesso colore del corpo e non si leggevano: la carta è a due colori forti, blu inchiostro e corallo, e ogni battito d’ala fa lampeggiare l’altro lato.
- Ordinando le faccette per profondità dopo la rotazione della camera, gli strati della stessa pila si scambiavano a seconda di quanto stavano a destra o a sinistra: ora l’ordine viene dall’altezza nel sistema della carta, prima della rotazione.
- La linea tratteggiata scura spariva sulla carta blu: ora si disegna due volte con un ritaglio, chiara dentro la sagoma del foglio e scura fuori.
- A riposo il foglio mostrava già la riga della prima piega, perché si disegnava la carta tagliata per la piega che deve venire: la carta tagliata si usa solo da quando la linea comincia a disegnarsi.
- La pubblicazione durava nove secondi invece di sette e mezzo: il riflesso lungo ogni piega era in fila sulla linea del tempo. Il riflesso ora va per conto suo, e la linea del tempo, misurata una volta in prova, si accelera o rallenta per durare SECONDS.
- Quella prova scriveva le sue posizioni di partenza nello stato vero, e a riposo compariva per un istante una linea tratteggiata: la prova ora lavora su una copia.
- Il clic dell’anteprima non ripubblicava mai: il tempo del ticker di GSAP si ferma quando non c’è niente da animare, quindi i secondi dalla fine non passavano. Ora si misurano con performance.now.
- Per un attimo 99% e Live si vedevano uno sopra l’altro: Live arriva solo quando la percentuale se n’è andata.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 17 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 8 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.
