Le storie a cubo
Storie, 3D, Transizioni
NuovaGratis
Tutti i componenti
La notifica di carta
La notifica di un’app di documenti condivisi fatta di carta vera, con la grana e un’ombra morbida. Chiusa, non sparisce: si piega da sola in un aeroplanino, piega dopo piega, e l’aeroplanino vola via con una curva mentre la sua ombra resta indietro sulla pagina. La notifica dopo arriva come un foglio piegato e si apre; sotto il puntatore l’angolo più vicino si arriccia.
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 paper notification</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the notification of a shared-documents app, made of real paper. Dismissed (the cross, Esc, or a swipe
sideways) it folds itself into a paper plane, fold after fold, and the plane flies away; the next one arrives
as a folded sheet and opens. Open lifts the sheet towards you. The words are filled in by script.js, from
MESSAGES; while it folds, the paper is drawn by copies of the card, cut along the creases and turned in 3D -->
<canvas class="shadow" aria-hidden="true" data-shadow></canvas>
<div class="note" data-note>
<div class="note__mover" data-mover>
<section class="card is-hidden" aria-label="Notification" data-card>
<span class="card__face" aria-hidden="true" data-face></span>
<span class="card__text">
<span class="card__title" data-title></span>
<span class="card__body" data-body></span>
</span>
<button class="card__open" type="button" data-open>Open</button>
<button class="card__close" type="button" aria-label="Dismiss notification" data-close data-autoclic>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg>
</button>
</section>
<canvas class="cast" aria-hidden="true" data-cast></canvas>
<div class="folds" aria-hidden="true" inert data-folds></div>
</div>
<p class="sr" role="status" aria-live="polite" aria-atomic="true" data-live></p>
</div>
</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.
36 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 «La notifica di carta» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da sola al centro, una notifica alta 70 pixel fatta di carta color avorio, con una grana fine, qualche fibra e un’ombra morbida sulla pagina: le iniziali MO su un tondo color sabbia, Mira shared “Q4 roadmap”, You can edit · just now, il pulsante scuro Open e la croce. Arriva come un foglio piegato in tre, bianco come il retro di una lettera, che cade sulla pagina e si apre: prima il terzo di destra si alza verso di te e si stende, poi quello di sinistra, e mentre girano la luce cambia su ogni faccia e il testo si vede in prospettiva. Restano due pieghe leggere dove era piegata. Col puntatore sopra, l’angolo più vicino si arriccia appena verso di te, con la luce che scorre sulla curva e la sua ombra sulla carta; avvicinandosi all’angolo si solleva di più, e lasciandolo ricade con un piccolo rimbalzo. La croce, Esc o uno swipe di lato la chiudono, e la carta si piega in un aeroplanino davanti a te: il terzo di sinistra e quello di destra si chiudono come una lettera, i due angoli davanti vanno alla linea di mezzo, poi i nuovi lati di nuovo alla linea di mezzo, il foglio si chiude a metà per il lungo, le ali si aprono e l’aeroplanino si gira per mostrarle, si solleva, arretra un attimo e parte su una curva che sale verso l’alto e fuori dalla pagina, inclinandosi nella virata, mentre la sua ombra resta indietro e sfuma. Intanto arriva la notifica dopo. Open fa un altro gesto: il foglio si piega appena dal lato del pulsante e si solleva verso di te, sempre più grande, mentre l’ombra si allarga, e poi sparisce. All’apertura della pagina arriva una prima notifica da sola.
Come funziona
Una piccola macchina da origami
La carta è un elenco di facce piane, ognuna un pezzo della notifica tagliato lungo le pieghe fatte fin lì. Una piega è una linea sulla carta come sta in quel momento e il lato da girare: ogni faccia che la linea attraversa, su ogni strato, si taglia in due (il taglio si calcola dove la faccia sta adesso, ma i pezzi si scrivono nelle coordinate della notifica piatta), e i pezzi da quel lato girano di 180 gradi attorno alla linea. L’asse sta mezzo spessore di carta sopra la pila (sotto, per una piega all’indietro): uno strato rovesciato atterra sopra gli altri nell’ordine giusto, come nella carta vera.
Ogni istante è una catena di rotazioni
Le pieghe si calcolano una volta, a fondo. Ogni pezzo ricorda le sue pieghe come assi riportati sulla notifica piatta: l’asse di una piega, visto nel mondo quando le pieghe prima sono finite, si riporta indietro con l’inverso delle rotazioni che il pezzo ha già fatto. Così un istante qualsiasi è solo il prodotto delle rotazioni di quel pezzo (formula di Rodrigues), dalla prima all’ultima, all’angolo a cui GSAP è arrivato; le pieghe possono anche sovrapporsi nel tempo, e la chiglia dell’aeroplanino si apre di 26 gradi semplicemente togliendo angolo alla piega a metà.
Facce di DOM, ordinate a mano
Ogni faccia è una copia della notifica (senza id, data- o aria-, dentro un contenitore inert), ritagliata col clip-path del suo pezzo, allargato di mezzo pixel per lato perché fra due pezzi non resti una giuntura, e girata con un matrix3d. Il contenitore ha la prospettiva ma non preserve-3d: l’ordine lo decide lo script. Una faccia sta davanti a un’altra se tutti i suoi vertici stanno dal lato dell’occhio rispetto al piano dell’altra (o viceversa); le coppie che si sovrappongono sullo schermo danno un grafo, e le facce escono dalla più lontana fra quelle libere.
La luce, il retro e l’ombra
Ogni faccia ha un velo: più scuro quanto più la sua normale si allontana dalla lampada rispetto al foglio piatto, più chiaro quando le si avvicina. Si vede il davanti o il retro secondo il lato dell’occhio; il retro è carta con la stampa che traspare appena, e il fuori della lettera piegata è il retro del terzo di destra, girato e quindi a specchio. L’ombra sta su un canvas sotto la carta: ogni faccia si proietta sulla pagina lungo la luce, in tre strati dal più netto al più morbido, e più si alza più l’ombra si sposta, si allarga e si schiarisce.
L’angolo che si arriccia
L’angolo vicino al puntatore è fatto di sei strisce, ognuna incernierata sulla precedente, con l’arricciatura che cresce verso la punta (fino a CURL gradi) e una molla con un po’ di rimbalzo; la notifica vera si ritaglia proprio lì. Ogni striscia ha una sfumatura dalla luce della striscia prima a quella dopo, così le strisce si leggono come una curva, e un secondo canvas fra la carta e le facce riceve l’ombra dell’angolo sulla carta stessa.
Il volo, i gesti e la tastiera
Finita la piega, l’aeroplanino si inclina per mostrare le ali, si solleva e segue una curva di Bézier in 3D: il muso segue la tangente, sale un poco e si inclina nella virata in proporzione a quanto la direzione cambia. Uno swipe di lato oltre un terzo della larghezza (o veloce) lo fa partire da quella parte, col muso piegato verso quel lato. I pulsanti sono veri, col focus visibile; Esc chiude, il fuoco resta sulla croce per la notifica dopo, e una riga role="status" legge ogni notifica nuova.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FOLD | script.js | 1.5 | I secondi in cui la notifica si piega in un aeroplanino. |
FLIGHT | script.js | 1.2 | I secondi del volo dell’aeroplanino. |
UNFOLD | script.js | 0.85 | I secondi in cui una notifica nuova arriva piegata e si apre. |
CURL | script.js | 80 | Quanto si arriccia al massimo l’angolo vicino al puntatore, in gradi: lontano dall’angolo un terzo, vicino tutto. |
LIGHT | script.js | 0.8 | Quanto cambia la luce su una faccia che gira: 0 niente, 1 molto. |
GRAIN | script.js | 0.07 | La grana della carta: 0 liscia, 0.2 ruvida. |
KEEL | script.js | 0.3 | Quanto è profonda la chiglia dell’aeroplanino, rispetto a metà dell’altezza del foglio: più bassa, ali più larghe. |
DEPTH | script.js | 900 | Quanto è lontano l’occhio, in pixel: meno sembra più profondo. |
FIRST | script.js | 0.4 | I secondi prima che arrivi la prima notifica. |
MESSAGES | script.js | quattro, da Mira Okafor “Q4 roadmap” a Jonas Weber “Hiring 2027” | I documenti condivisi, a turno: chi, il documento, la riga sotto e il colore dietro le iniziali. |
Quando usarla
Per una notifica che porta qualcosa di concreto, come un documento condiviso, un invito, una lettera, e che si chiude con un gesto: un’app di documenti, una casella di posta, un gestionale con un tocco artigianale. Una notifica alla volta, con una riga di titolo e una di dettaglio; il ripiegamento dura un secondo e mezzo, quindi sta meglio dove le notifiche non arrivano a raffica.
Sul telefono
La notifica prende la larghezza dello schermo meno 32 pixel (358 a 390), e sotto i 420 pixel gli spazi e il titolo si stringono un poco perché le parole ci stiano tutte. Uno swipe di lato la chiude: l’aeroplanino ha il muso verso quel lato e vola via da quella parte, e il foglio rientra un poco nello schermo mentre si piega. Tenendo il dito sulla carta l’angolo più vicino si solleva; la croce ha un’area di tocco più grande di quella disegnata.
Con il movimento ridotto
Niente pieghe, niente volo e niente angoli che si arricciano: la notifica compare e se ne va in dissolvenza, con la croce, con Esc, con Open o con uno swipe, e la notifica dopo compare in dissolvenza. La grana, l’ombra e le due pieghe leggere restano.
Trappole
- Con le pieghe all’indietro (i terzi dietro il foglio) la carta passava sotto la pagina: l’ombra del terzo che girava saliva sopra la notifica. Ora la lettera si piega verso chi guarda, con la stampa dentro come una lettera vera, e il foglio arriva bianco e si apre mostrando il messaggio; un punto sotto la pagina fa ombra come se la toccasse.
- La copia a specchio sul fuori della lettera girava attorno al suo centro e non al suo angolo: finiva fuori dal pezzo e la faccia più grande del foglio piegato era trasparente, con l’ombra che si vedeva attraverso. Le copie nelle facce girano tutte attorno all’angolo in alto a sinistra.
- Il clip-path che ritaglia l’angolo sollevato toglie alla notifica anche il puntatore in quel punto: l’angolo si alzava, perdeva il puntatore, ricadeva e ricominciava. Il puntatore ora si segue sul contenitore, che non è ritagliato.
- Allargare i pezzi verso il loro baricentro non allarga quasi i lati lunghi delle strisce sottili dell’angolo, e fra una striscia e l’altra restavano righe chiare. Ora ogni lato si sposta in fuori di mezzo pixel lungo la sua normale (con lo spigolo limitato sulle punte strette).
- Facendo comparire in dissolvenza il foglio piegato, faccia per faccia, gli strati sotto trasparivano e il messaggio piegato dentro si leggeva attraverso il retro bianco. Finché sta comparendo si vede solo lo strato in cima.
- Visto dall’alto un angolo che si alza verso l’occhio quasi non cambia forma: a 26 gradi e a strisce piatte si leggeva come una sfumatura a righe. Servivano più angolo in punta, una sfumatura continua fra le strisce e l’ombra dell’angolo sulla carta.
- Con uno spessore di carta di un pixel le punte degli strati sul muso dell’aeroplanino si separavano e il muso sembrava sfrangiato; a 0,4 pixel l’ordine degli strati regge e il muso è pulito. E l’ease back.in teneva l’aeroplanino fermo quasi mezzo secondo prima di partire: il lancio ha una curva sua, con un arretramento breve.
Librerie
GSAP 3.15.0, Hanken Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 18 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.
