Il calendario coi cubi

Calendari, 3D, Fisica, TransizioniGSAP, Solo CSSImpegnativaPeso compresso: Demo 18 KBGSAP 28 KBGratisScarica lo zip

Un selettore per il giorno di consegna di un mobile: la data scelta sta su una scrivania in alto, con due cubi di rovere per il giorno e un rullo per il mese, come un calendario perpetuo. Scegliendo un giorno i cubi si alzano, si girano in aria e, quando serve, si scambiano di posto (il 6 fa anche il 9); cambiando mese le settimane scorrono sotto una tessera di legno che resta sullo stesso giorno.

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 cube calendar</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/gantari@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- a delivery day picker. The chosen date stands on a little desk at the top, set with two oak day cubes and a
         month drum on its stand, like a perpetual desk calendar; below, the weeks are one long strip that rolls under
         a wooden tile. The cubes, the drum and the weeks are drawn by the script -->
    <div class="picker" data-picker>
      <div class="picker__top">
        <div class="desk" aria-hidden="true" data-desk></div>
        <div class="picker__arrows">
          <button class="arrow" type="button" aria-label="Previous month" data-prev><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 14.5l6-6 6 6"/></svg></button>
          <button class="arrow" type="button" aria-label="Next month" data-next><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9.5l6 6 6-6"/></svg></button>
        </div>
      </div>

      <p class="sr" id="cube-calendar-month" data-month-name></p>
      <div class="cal" role="grid" aria-labelledby="cube-calendar-month" data-grid>
        <div class="cal__week" role="row" data-week></div>
        <div class="cal__window" data-window>
          <div class="cal__strip" role="rowgroup" data-strip></div>
          <div class="tile" aria-hidden="true" data-tile>
            <span class="tile__shadow" data-tile-shadow></span>
            <span class="tile__face"><span class="tile__copy" data-copy></span></span>
          </div>
        </div>
      </div>

      <div class="picker__foot">
        <p class="picker__done" data-done><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" data-check/></svg><span data-done-text></span></p>
        <button class="book" type="button" data-book>
          <span class="book__label" data-book-label>Book delivery</span>
          <span class="book__date" data-book-date></span>
          <svg class="book__spin" viewBox="0 0 24 24" aria-hidden="true" data-spin><path d="M12 4a8 8 0 0 1 8 8"/></svg>
        </button>
      </div>
      <p class="sr" role="status" aria-live="polite" data-said></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.

27 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 coi cubi» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una scheda larga 360 pixel per scegliere il giorno in cui arriva un mobile. In alto, come su una scrivania vista un po' dall'alto, la data scelta è fatta di oggetti: due cubi di rovere con le cifre bruciate nel legno per il giorno e, accanto, un rullo di rovere su un supporto di noce per il mese e l'anno; a destra due frecce, su e giù. Sotto ci sono le iniziali dei giorni, dal lunedì, e sei settimane: i giorni del mese hanno l'inchiostro pieno, quelli dei mesi accanto sono appena accennati. Oggi ha una cornice sottile; i giorni passati, i due giorni che servono a preparare la consegna, le domeniche (senza consegne) e i giorni oltre i quattro mesi sono grigi, e quelli già al completo sono anche tratteggiati. Il giorno scelto sta sotto una tessera di rovere col numero bruciato nel legno. Premendo un giorno la tessera ci scivola, e i giorni su cui passa si vedono bruciati nel legno per un attimo; intanto i cubi che devono cambiare vengono alzati, girati in aria fino alla cifra giusta e posati, e atterrano su uno spigolo dondolando prima di fermarsi. Due cubi bastano per ogni giorno dall'01 al 31 solo perché il 6 è anche il 9, a testa in giù: così a volte i cubi si scambiano di posto, quello che va a sinistra salta davanti all'altro. Le frecce, o un trascinamento in su e in giù delle settimane o del rullo, cambiano mese: le settimane scorrono come una striscia di carta, il rullo gira con loro come se fossero legati, e la tessera tiene lo stesso giorno del mese, o il più vicino libero, scivolando sul suo nuovo giorno della settimana mentre le settimane le passano sotto. In fondo Book delivery, con la data; premuto dice Booking con una rotella, poi diventa un pulsante Change mentre a sinistra si disegna una spunta con Booked for e la data, le settimane si fanno chiare e i cubi fanno un saltello. All'apertura i cubi cadono sulla scrivania girando e il rullo si porta sul mese.

Come funziona

I cubi e il rullo

Ogni cubo è una scatola in CSS 3D con sei facce, disegnate due volte più grandi e rimpicciolite con scale(0.5), perché in Chrome le cifre restino nitide. Il primo cubo ha 0 1 2 3 4 5, il secondo 0 1 2 6 7 8, e il 6 girato a testa in giù fa il 9. Per ogni giorno il cubo di sinistra mostra le decine se le ha, altrimenti i due cubi si scambiano di posto: il 13 vuole il secondo cubo a sinistra, il 31 il primo. Il rullo dei mesi ha quattro facce lunghe intorno a un perno, fra due montanti di noce, e gira di 90 gradi per mese: la scritta di una faccia si cambia quando la faccia è dietro, e solo quella che viene davanti la mostra.

Il giro in aria

L'orientamento di un cubo è un quaternione. La rotazione che porta la faccia giusta davanti, con la normale verso di te e il suo «su» in alto (in basso per il 9), si scrive come matrice e diventa il quaternione d'arrivo. GSAP alza il cubo di LIFT pixel in 0,2 secondi, lo gira con uno slerp dal quaternione di adesso a quello nuovo in TURN secondi (power2.inOut), lo lascia cadere con bounce.out e lo fa dondolare su uno spigolo con elastic.out. Sollevato, un cubo si scosta un poco dal vicino, perché girato su uno spigolo è più largo del suo posto. Scambiandosi, il cubo che va a sinistra salta e passa davanti, l'altro scivola dietro, e finché i due si sovrappongono uno resta comunque davanti e l'altro dietro. Interrotto a metà, un cubo riparte dall'orientamento e dal punto in cui si trova.

La luce

A ogni fotogramma la normale di ogni faccia passa per la stessa matrice del cubo e per il suo dondolio; il prodotto con la direzione della luce, dall'alto a sinistra e un po' davanti, dice quanto la faccia si scurisce: LIGHT volte quello che le manca alla luce piena. Il rullo fa lo stesso con le sue quattro facce. Le ombre sulla scrivania sono ellissi sfumate stese sul piano, che si allargano e schiariscono quando il cubo si alza. Tutto è inclinato di TILT gradi, così si vedono le facce di sopra.

Le settimane

Le settimane sono una striscia sola, da prima del primo mese prenotabile a dopo l'ultimo. Tutto dipende da un numero, il mese con la sua frazione, tirato da una molla (ROLL): la striscia sta fra la prima settimana di un mese e quella del mese dopo in proporzione alla frazione, il rullo gira di 90 gradi per mese, e ogni giorno ha l'inchiostro pieno nel suo mese e sfuma verso gli altri. Trascinando le settimane, o il rullo, il numero segue il dito, con un elastico oltre il primo e l'ultimo mese; lasciato, la spinta lo porta avanti di un mese o due.

La tessera

La tessera di rovere sul giorno scelto ha la sua molla (GLIDE). Cambiando mese, il giorno scelto diventa lo stesso giorno del mese nuovo, o il più vicino libero, e la tessera ci scivola mentre le settimane le passano sotto; mentre si trascina resta ferma. Dentro c'è una copia della striscia con i numeri scuri, spostata del contrario della tessera: i giorni che le passano sotto sembrano bruciati nel legno.

Tastiera e conferma

La griglia ha role grid, le righe fuori dalla finestra sono inert e un solo giorno prende il tasto Tab: le frecce si muovono fra i giorni, Home e End vanno all'inizio e alla fine della settimana, Pagina su e Pagina giù cambiano mese, e il giorno scelto segue il focus quando si può scegliere. I giorni che non si possono scegliere hanno aria-disabled e il motivo nel nome, e il mese nuovo si annuncia. Book delivery dice Booking, poi si stringe in Change mentre a sinistra si disegna la spunta.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WEEK_START`	script.js	`1`	Il primo giorno della settimana: 1 il lunedì, 0 la domenica.
`LEAD`	script.js	`2`	I giorni che servono a preparare una consegna: il primo giorno che si può scegliere è oggi più questi.
`HORIZON`	script.js	`120`	Quanti giorni avanti si può prenotare una consegna.
`CLOSED`	script.js	`[0]`	I giorni della settimana senza consegne: 0 la domenica, 1 il lunedì, fino a 6 il sabato.
`FULL`	script.js	`6`	Più o meno un giorno ogni tanti è già al completo (inventato a partire dalla data).
`TURN`	script.js	`0.62`	I secondi in cui un cubo viene girato in aria.
`LIFT`	script.js	`18`	Di quanti pixel si alza un cubo per essere girato.
`ROLL`	script.js	`[120, 18]`	La molla delle settimane e del rullo dei mesi: rigidità e smorzamento.
`GLIDE`	script.js	`[300, 30]`	La molla della tessera di legno sul giorno scelto: rigidità e smorzamento.
`TILT`	script.js	`16`	Quanto dall'alto si vede la scrivania, in gradi.
`LIGHT`	script.js	`0.42`	Quanto si scurisce il legno su una faccia girata lontano dalla luce.

Provali nel Playground

Quando usarla

Per scegliere il giorno di una consegna, di un ritiro o di un appuntamento quando il marchio ha qualcosa di artigianale: un negozio di mobili, una falegnameria, una cartoleria, una torrefazione. I giorni al completo vanno presi dal tuo sistema al posto di quelli inventati. Per un soggiorno, con arrivo e partenza, c'è il calendario delle prenotazioni.

Sul telefono

La scheda è larga 360 pixel, o lo schermo meno i margini: a 390 pixel è larga 358 e ci sta tutta, cubi, rullo e frecce compresi; su uno schermo più stretto la scrivania si rimpicciolisce da sola per lasciare posto alle frecce. Il tocco sceglie i giorni; trascinando in su e in giù le settimane o il rullo si cambia mese, con la spinta. touch-action none sta solo lì: fuori, la pagina scorre. Il colore al passaggio del puntatore sul telefono non c'è.

Con il movimento ridotto

I cubi non si alzano e non girano: svaniscono e ricompaiono già sulla cifra giusta. Le settimane e il rullo cambiano mese con una dissolvenza, la tessera compare sul giorno nuovo in dissolvenza, i giorni che non si possono scegliere non tremano e all'apertura è già tutto al suo posto. Trascinando, le settimane seguono il dito, ma lasciate vanno subito al mese.

Trappole

In Chrome il testo sulle facce in 3D veniva sgranato: il contenuto di una faccia in 3D si disegna a una densità bassa. Le facce si disegnano due volte più grandi (K) e si rimpiccioliscono con scale(1/K), e ogni misura del legno cresce con --k: le cifre restano nitide anche su uno schermo a densità 3.
L'ombra della tessera, fatta con un box-shadow, lasciava sotto di lei una striscia bianca quando si muoveva: un box-shadow non si disegna sotto il suo riquadro, e il riquadro dell'ombra spostato in giù restava vuoto. Ora l'ombra è un riquadro scuro sfocato con filter: blur.
Il pulsante che si stringe in Change, con una larghezza fissa dentro un flex, allargava la riga e con lei la pagina, che sforava di lato. Il palco ora è un flex che non cresce col contenuto, e durante la stretta il pulsante può solo cedere (flex 0 1 auto), mai spingere.
Il rullo, visto un po' dall'alto, mostrava sulla faccia di sopra il mese prima: SEP sopra OCT, e si leggeva male. La scritta di ogni faccia ora sfuma quando la faccia si allontana dal davanti, e si cambia solo quando la faccia è dietro.
Due cubi che girano insieme, uno accanto all'altro, si compenetravano: girato su uno spigolo un cubo è largo fino a 1,4 volte il suo lato. Sollevati, ora si scostano un poco (e il cubo di sinistra ha un po' di spazio prima del bordo della scheda); e se una scelta nuova ferma uno scambio a metà, finché si sovrappongono uno resta davanti e l'altro dietro.
Su un telefono da 375 pixel la fila in alto non ci stava e le frecce uscivano dalla scheda: la scrivania si misura e si rimpicciolisce con un transform scale, col punto di fuga fissato in pixel al centro dei cubi e del rullo.

Librerie

GSAP 3.15.0, Gantari (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.