Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Il calendario da strappare
Scorri dentro l’anteprima
Un blocchetto di fogli bianchi a contorno sottile, un giorno per foglio col numero grande in carattere variabile: scorrendo, il foglio di sopra si piega dall’angolo, si strappa lungo la perforazione da destra a sinistra e vola via in alto girando, mentre sotto il giorno dopo atterra e prende peso. L’ultimo giorno è nell’accento. Stile minimal.
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 tear-off calendar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a tear-off day pad: six thin sheets under an ink binding, one big day number each. Scrolling, the top sheet
curls up from its corner, tears along the perforation from right to left and flies off turning; the next day
lands under it and takes its weight. The last day, the opening, is printed in the accent -->
<main>
<section class="apertura">
<p class="piccolo">Ostler Print Room</p>
<h1 class="titolo">Six days,<br>one sheet at a time.</h1>
<p class="piccolo piccolo--tenue">Tear them off. Scroll.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco">
<header class="testa">
<p class="marchio">Ostler</p>
<p class="piccolo piccolo--tenue">Days to the opening</p>
</header>
<div class="blocco" data-blocco>
<div class="spessore" data-spessore aria-hidden="true"></div>
<div class="fogli" data-fogli>
<article class="foglio" data-foglio>
<div class="foglio__carta">
<p class="foglio__giorno">Monday</p>
<p class="foglio__numero" data-numero>19</p>
<p class="foglio__evento" data-evento>Proofs back from the printer.</p>
</div>
</article>
<article class="foglio" data-foglio>
<div class="foglio__carta">
<p class="foglio__giorno">Tuesday</p>
<p class="foglio__numero" data-numero>20</p>
<p class="foglio__evento" data-evento>Fold, trim, count three hundred.</p>
</div>
</article>
<article class="foglio" data-foglio>
<div class="foglio__carta">
<p class="foglio__giorno">Wednesday</p>
<p class="foglio__numero" data-numero>21</p>
<p class="foglio__evento" data-evento>Hang the first wall.</p>
</div>
</article>
<article class="foglio" data-foglio>
<div class="foglio__carta">
<p class="foglio__giorno">Thursday</p>
<p class="foglio__numero" data-numero>22</p>
<p class="foglio__evento" data-evento>Light check at six.</p>
</div>
</article>
<article class="foglio" data-foglio>
<div class="foglio__carta">
<p class="foglio__giorno">Friday</p>
<p class="foglio__numero" data-numero>23</p>
<p class="foglio__evento" data-evento>Sleep early, for once.</p>
</div>
</article>
<article class="foglio foglio--ultimo" data-foglio>
<div class="foglio__carta">
<p class="foglio__giorno">Saturday</p>
<p class="foglio__numero" data-numero>24</p>
<p class="foglio__evento" data-evento>Opening night, eight o’clock.</p>
<i class="foglio__sotto" data-sotto aria-hidden="true"></i>
</div>
</article>
</div>
<div class="testata" aria-hidden="true"><span>October</span><span>2026</span></div>
<div class="perfora" data-perfora aria-hidden="true"></div>
</div>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">See you<br>at eight.</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.
41 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 calendario da strappare» da Animorio e adattala al mio sitoCosa fa
I sei giorni che mancano all’inaugurazione di una stamperia inventata, Ostler, su un calendario a strappo: una testata nera con il mese, sotto una perforazione tratteggiata e un blocchetto di fogli chiari a contorno sottile, con tante righe sottili sotto il blocco quanti sono i fogli che restano. Lo schermo si ferma e il primo giorno atterra: il numero, sottile e un po’ stretto, scende di qualche pixel e prende il suo peso con un pixel di slancio, e la riga del giorno sale parola per parola. Poi, per ogni giorno, l’angolo in basso a destra del foglio si piega e mostra il retro della carta; il foglio comincia a strapparsi lungo la perforazione da destra a sinistra, si apre uno spicchio sotto la testata e i trattini della perforazione sobbalzano uno dopo l’altro dove passa lo strappo, mentre il blocchetto viene tirato giù di qualche pixel. Libero, il foglio vola via in alto girando e inclinandosi all’indietro, con la sua ombra, e il suo numero si stringe mentre corre; il blocchetto torna su con un piccolo tremito e perde una delle righe sotto. Intanto sotto il giorno dopo atterra come il primo. L’ultimo, il giorno dell’inaugurazione, è stampato nell’arancio: quando arriva, sotto la sua riga si tira una riga arancio, la riga si accende e il numero prende ancora un po’ di peso. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
Il blocchetto
Sei fogli in position absolute uno sopra l’altro (il primo ha lo z-index più alto), sotto una testata nera e una perforazione fatta di trattini da 4 pixel ogni 7, scritti dallo script sulla larghezza vera del blocco. Anche il bordo di sopra di ogni foglio è tratteggiato, con un repeating-linear-gradient alto un pixel: così il foglio che vola via ha il suo bordo strappato. Le righe sotto il blocco, una per foglio rimasto, fanno lo spessore. La larghezza del blocco è un min() fra 360 pixel, la larghezza e l’altezza dello schermo, così sta sempre nel palco.
L’angolo piegato
Ogni foglio è fatto di due elementi: fuori quello che lo script gira e lancia, dentro la carta, tagliata da un clip-path a cinque punti sulla linea della piega. Sopra la carta un SVG disegna il retro: il triangolo dell’angolo riflesso sulla linea della piega, cioè i punti (W−g, H), (W, H−g) e (W−g, H−g), con un colore un po’ più scuro e il contorno da un pixel, più un’ombra appena spostata. La piega g va da 0 a FOLD volte la larghezza con un back.out, quindi va un pelo oltre e torna.
Lo strappo
Strappandosi il foglio pende dall’angolo in alto a sinistra: transform-origin 0 0 e rotate fino a TILT gradi, così sotto la testata si apre uno spicchio sempre più largo verso destra. Il fronte dello strappo va da destra a sinistra con lo stesso numero: ogni trattino a destra del fronte sobbalza di un pixel e mezzo con un coseno che si spegne, e il blocchetto viene tirato giù di tre pixel.
Il volo
La timeline non muove gli elementi: muove numeri da 0 a 1 (piega, strappo, volo, colpo, arrivo) e una funzione ridisegna tutto. Il volo compone la trasformazione a mano: lo spostamento in alto e a destra, poi la rotazione di SPIN gradi, il rotateX e un filo di scala attorno al centro del foglio, poi la rotazione dello strappo attorno all’angolo. Così non c’è nessuno scatto nel passaggio dallo strappo al volo. Il volo è un power2.in, parte piano e accelera; il numero passa con font-stretch da 92% a NARROW, e un drop-shadow cresce con la distanza.
Il giorno dopo
Ogni numero aspetta sottile (peso 220, larghezza 78%) e qualche pixel più in basso; quando il foglio sopra parte, il numero arriva con la curva LAND fino a BOLD e 92%, e le parole della riga salgono dalle loro finestrelle con uno stagger di 0,07. Il blocchetto trema con un seno che si spegne e l’ultima delle righe dello spessore si ritira. Sull’ultimo giorno, stampato nell’accento, una riga arancio si tira con scaleX, la riga del giorno passa all’arancio e il numero prende ancora 40 di peso con elastic.out. Col movimento ridotto la stampa di un foglio sparisce in dissolvenza e solo dopo compare quella del giorno dopo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FOLD | script.js | 0.24 | Quanto si piega l’angolo, in parte della larghezza del foglio. |
TILT | script.js | 7 | Di quanti gradi pende il foglio mentre si strappa. |
SPIN | script.js | 26 | Di quanti gradi gira ancora mentre vola via (col meno gira al contrario). |
BOLD | script.js | 640 | Il peso del numero del giorno quando è atterrato. |
NARROW | script.js | 62 | Quanto si stringe il numero del foglio che vola (l’asse della larghezza, da 50 a 100). |
LAND | script.js | 'back.out(1.8)' | La curva del giorno dopo che atterra: il numero fra parentesi è quanto va oltre. |
SCRUB | script.js | 0.6 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per un conto alla rovescia da raccontare: i giorni che mancano a un’inaugurazione, a un concerto, a un festival o a un matrimonio, il programma di una settimana di eventi, le tappe di un lancio, un’offerta che scade, il calendario dell’Avvento di un negozio. I giorni e le righe si cambiano nella pagina: funziona da tre a una decina di fogli, con righe brevi.
Sul telefono
Uguale: il blocchetto prende la larghezza dello schermo meno i margini, la testata è un po’ più bassa e la riga del giorno più piccola; il foglio vola via allo stesso modo ed esce dal palco.
Con il movimento ridotto
Niente si muove: i giorni sono già stampati e al loro posto. Scorrendo la stampa del foglio di sopra sparisce in dissolvenza, il foglio se ne va e solo dopo compare in dissolvenza il giorno dopo, così due giorni non si sovrappongono mai; alla fine compaiono la riga arancio e la riga accesa.
Trappole
- Il clip-path che taglia l’angolo taglia anche i figli: il retro della piega, messo dentro la carta, spariva insieme all’angolo. L’SVG della piega sta fuori dalla carta, accanto, dentro l’elemento che si muove.
- Passando dallo strappo (rotazione attorno all’angolo) al volo (rotazione attorno al centro) cambiare transform-origin faceva saltare il foglio. Qui l’origine resta 0 0 e la rotazione attorno al centro si scrive a mano con translate(c) rotate() translate(−c), prima di quella dello strappo.
- perspective sul contenitore dei fogli crea un contesto di sovrapposizione: lo z-index alto del foglio che vola non bastava a passare sopra la testata. Mentre un foglio vola si alza lo z-index di tutto il contenitore.
- Col movimento ridotto la dissolvenza incrociata fra due fogli, presa a metà, mostrava 19 e 20 uno sopra l’altro: prima sparisce la stampa del foglio, poi compare quella del giorno dopo.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Anybody (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,4 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 16 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.
