Il calendario dell’Avvento

Calendari, 3D, Fisica, SVGGSAP, CanvasImpegnativaPeso compresso: Demo 24 KBGSAP 28 KBGratisScarica lo zip

Il calendario dell’Avvento di un negozio, stampato come una via d’inverno al tramonto con 24 finestrelle tagliate nel cartoncino: quelle dei giorni passati si aprono sui cardini piegando la carta e dentro, in una stanzina illuminata, c’è un regalo disegnato che salta fuori e torna sulla mensola; quelle future sono sigillate e tremano; sulla finestra di oggi cade la neve.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The Advent calendar</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/fraunces@5.3.0/full-italic.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the Advent calendar of a little shop: 24 windows cut into a printed winter street. The days gone open on their
         hinges, bending the cardboard, and a present jumps out; the days to come are sealed and rattle; today's window
         has its own snow. The street, the windows and the presents are drawn by the script -->
    <div class="advent" data-advent data-autoclic>
      <div class="advent__card">
        <div class="advent__scene" data-scene>
          <svg class="advent__art" viewBox="0 0 520 600" preserveAspectRatio="none" aria-hidden="true" data-art></svg>
          <div class="advent__doors" role="group" aria-label="December, 24 windows" data-doors></div>
          <canvas class="advent__snow" aria-hidden="true" data-snow></canvas>
          <span class="advent__grain" aria-hidden="true" data-grain></span>
        </div>
        <div class="advent__pop" aria-hidden="true" data-pop></div>
        <div class="advent__foot">
          <p class="advent__date" data-date></p>
          <p class="advent__line" data-line></p>
        </div>
      </div>
      <p class="sr" role="status" aria-live="polite" data-said></p>
    </div>
  </main>

  <!-- the gold foil of the numbers and the light inside the windows, shared by every drawing -->
  <svg class="defs" width="0" height="0" aria-hidden="true" focusable="false">
    <defs>
      <linearGradient id="av-gold" x1="0" y1="0" x2="0.35" y2="1">
        <stop offset="0" stop-color="#fff3c4"/>
        <stop offset="0.38" stop-color="#f1c45a"/>
        <stop offset="0.62" stop-color="#c98d22"/>
        <stop offset="1" stop-color="#f6d47c"/>
      </linearGradient>
      <linearGradient id="av-sheen" x1="-1" y1="0" x2="0" y2="0.4" data-sheen>
        <stop offset="0" stop-color="#f1c45a"/>
        <stop offset="0.42" stop-color="#e2a83a"/>
        <stop offset="0.5" stop-color="#fffbe8"/>
        <stop offset="0.58" stop-color="#e2a83a"/>
        <stop offset="1" stop-color="#f6d47c"/>
      </linearGradient>
      <linearGradient id="av-room" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#b9532a"/>
        <stop offset="0.45" stop-color="#f09a45"/>
        <stop offset="1" stop-color="#ffd98a"/>
      </linearGradient>
      <linearGradient id="av-glass" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#2b3a6e"/>
        <stop offset="0.55" stop-color="#6b4d6c"/>
        <stop offset="1" stop-color="#f3a957"/>
      </linearGradient>
      <linearGradient id="av-kraft" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stop-color="#f6e9cd"/>
        <stop offset="1" stop-color="#e0cba3"/>
      </linearGradient>
    </defs>
  </svg>

  <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.

35 valori da cambiare

Apri il Playground

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 dell’Avvento» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco c’è un calendario di cartoncino color crema con dentro una via d’inverno disegnata: il cielo blu che scalda verso l’orizzonte, la luna, le colline innevate, un abete con la ghirlanda d’oro, il negozio Thimble & Pine in mattoni rossi con il tetto sotto la neve, l’insegna, la tenda a strisce e due lanterne, il forno accanto e dei pacchi sulla neve. Le 24 finestrelle sono nel disegno: le finestre ad arco con le tende rosse, il rosone, il comignolo, le vetrine, la luna, la palla in cima all’albero, i pacchi e il portone a due ante per il 24, con i numeri dei giorni in lamina d’oro e il bordo traforato. All’apertura il calendario sale e le finestrelle dei giorni passati si aprono una dopo l’altra. Premendo una finestra chiusa di un giorno passato, o quella di oggi, il bordo libero si alza e il cartoncino si piega mentre il traforo tiene, poi si strappa: l’anta gira sul cardine, va un po’ oltre, torna e resta appena arricciata. Dentro c’è una stanzina calda con la mensola e il regalo del giorno (uno sconto, un biscotto, una candela, una tazza di cioccolata…), che salta fuori girando fra delle stelline, ricade e si schiaccia sulla mensola. Sotto, la data e la riga col regalo cambiano. Premendo di nuovo la finestra si richiude battendo sul telaio. Le finestre dei giorni futuri sono sigillate: si alzano di un pelo, sbattono e tremano, e la riga dice fra quanti giorni si aprono. Quella di oggi ha la cornice d’oro e un alone caldo: ci cade sopra la neve, che si ammucchia sul davanzale, e il numero ha un riflesso che passa. Col mouse sopra, una finestra alza l’angolo.

Come funziona

La via e le finestrelle

La via è un solo SVG di 520 per 600 unità, disegnato dallo script: cielo, stelle a quattro punte, colline, il negozio coi mattoni fatti da un motivo SVG, il tetto, l’abete a piani, la neve e le cornici delle finestre. Le 24 finestrelle sono pulsanti messi sopra in percentuale, con forma, disegno e lato del cardine scritti in SLOTS; i numeri sono date, mescolati come nei calendari veri.

Un’anta fatta a strisce

Ogni anta è tagliata in STRIPS strisce, una dentro l’altra: ogni striscia gira con rotateY sul bordo di quella prima, dentro una prospettiva comune a tutte le finestre. La prima striscia è la piega del cardine, le altre si dividono la curva del cartoncino. Ogni striscia mostra il suo pezzo del disegno (una copia dell’SVG spostata a sinistra) e sul retro il cartoncino grezzo; le ante a destra sono le stesse, specchiate.

Due molle: il cardine e la carta

L’angolo del cardine va verso OPEN_ANGLE su una molla (SWING); la curva della carta è una seconda molla (FLEX) spinta all’indietro dall’accelerazione del cardine (LAG), così il bordo libero resta indietro quando l’anta parte, la supera quando si ferma e si assesta. Quattro piccoli passi per fotogramma, col passo limitato a 1/30 di secondo; aperta, l’anta resta arricciata di CURL gradi. All’apertura vera il bordo si alza per un attimo con la carta piegata e il cardine fermo, poi il traforo cede.

La luce sulla curva

Ogni striscia è illuminata secondo il suo angolo, con la luce che arriva da davanti e un po’ da destra: un filtro brightness sulla striscia, che il browser applica senza ridisegnarla. Così la curva del cartoncino si vede come una sfumatura. Nella stanzina il buio resta finché l’anta è appena sollevata, e sul muro accanto al cardine cade l’ombra dell’anta aperta.

Il regalo e la neve

Quando l’anta passa i 50 gradi una copia del regalo esce dalla stanzina in uno strato sopra il calendario: GSAP la alza, la ingrandisce (POP) e la gira fra sette stelline, poi la fa ricadere e la schiaccia con un elastico. La neve di oggi è un canvas: i fiocchi cadono in una colonna sopra la finestra, sfumati ai lati, e quelli che toccano il davanzale alzano il cumulo in quel punto; la nevicata dura SNOW secondi e poi il ciclo si ferma.

Tastiera, mouse e dito

Un solo giorno prende il tasto Tab (all’inizio quello di oggi): le frecce vanno al giorno prima e al giorno dopo, Home ed End al primo e al 24, Invio apre o chiude. Col mouse o col fuoco della tastiera la finestra alza l’angolo; col dito lo alza mentre si preme. Le ante, le molle, la neve passano tutte da un solo requestAnimationFrame che si ferma quando niente si muove.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DEMO_DAY`	script.js	`11`	Il giorno di dicembre che fa da oggi fuori da dicembre (a dicembre il calendario segue la data vera; 25 li apre tutti).
`OPEN_ANGLE`	script.js	`108`	Quanto gira sul cardine una finestra aperta, in gradi.
`SWING`	script.js	`[70, 10]`	La molla del cardine: rigidità e smorzamento.
`FLEX`	script.js	`[240, 15]`	La molla del cartoncino: rigidità e smorzamento (più morbida, più ondeggia).
`LAG`	script.js	`1`	Quanto il cartoncino resta indietro rispetto al cardine e si piega.
`CURL`	script.js	`14`	Quanto resta arricciata una finestra aperta, in gradi.
`STRIPS`	script.js	`6`	Le strisce in cui è tagliata ogni anta per piegarsi: più strisce, curva più liscia.
`SNOW`	script.js	`[3.6, 70]`	La neve sulla finestra di oggi: i secondi di una nevicata e i fiocchi al secondo.
`POP`	script.js	`1.6`	Quanto si ingrandisce il regalo quando salta fuori.

Provali nel Playground

Quando usarla

Per la pagina di Natale di un negozio, di una pasticceria, di un marchio o di un’app: un regalo o uno sconto al giorno dal 1 al 24 dicembre, una campagna per la newsletter, il calendario dell’Avvento di un blog o di un evento. I regali, gli sconti e i codici vanno presi dal tuo sistema al posto di quelli inventati, e il disegno della via si cambia nello SVG.

Sul telefono

Il calendario si stringe alla larghezza dello schermo e tutto il disegno, le finestrelle e la prospettiva si misurano su di lui, quindi restano in proporzione; ogni finestra ha qualche pixel in più attorno per il dito. Col dito la finestra alza l’angolo mentre si preme, e la data va sopra la riga del regalo. Stesse ante, stesse molle e stessa neve del computer.

Con il movimento ridotto

Niente molle, niente salti e niente neve che cade: le finestre dei giorni passati sono già aperte, una finestra si apre o si chiude di colpo e il regalo compare in dissolvenza; quelle future non tremano e lo dice la riga sotto; sulla finestra di oggi la neve è ferma nell’aria e il cumulo è già sul davanzale.

Trappole

Un’anta che si apre verso chi guarda viene ingrandita dalla prospettiva quasi quanto si accorcia: con angoli piccoli sembrava ferma. L’hanno resa visibile la luce per striscia (un lato si schiarisce, l’altro si scurisce) e il buio della stanzina che resta finché l’anta è appena alzata.
Il cartoncino non deve passare dentro la via: quando la curva all’indietro supera l’angolo del cardine viene fermata lì, altrimenti la punta dell’anta finiva dietro il disegno e il browser la tagliava.
Le ombre delle strisce cambiate in un SVG a ogni fotogramma costringevano il browser a ridisegnarle tutte: un filtro brightness sulla striscia, che ha già il suo strato, si applica senza ridisegnare.
Le finestre chiuse e ferme tornano un disegno piatto (niente rotateY, retro nascosto): con 24 ante a strisce sempre in 3D gli strati diventavano centinaia.
Inclinare tutto il calendario verso il puntatore lo rendeva sfocato, perché il browser lo ridisegnava a bassa risoluzione dentro la prospettiva: l’inclinazione è stata tolta.
Il riflesso sui numeri di oggi è un gradiente SVG comune a tutte le copie dell’anta: si muove spostandone x1 e x2, una volta sola, senza toccare le venti copie del disegno.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 24 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 17 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.