Il banner dei cookie
Consenso, Transizioni, SVG, Fisica
NuovaGratis
Tutti i componenti
Il calendario del campeggio
Il calendario delle prenotazioni di un campeggio, disegnato come la mappa illustrata di un prato: ogni giorno è una piazzola. Scegliendo l’arrivo una tenda arrotolata cade sulla sua piazzola; scegliendo la partenza la tenda si monta e si allunga sulle notti, un arco dopo l’altro su delle molle, poi la notte cala sulle piazzole del soggiorno con le sue stelle e la tenda si accende da dentro.
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 campsite calendar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the picker: a month of pitches on a meadow seen from above. Choosing the arrival rolls a tent onto its pitch,
choosing the departure pitches it: the tent stretches over the nights, hoop after hoop, and the night falls on
them with its stars. The pitches, the tent and the trees are drawn by the script -->
<div class="camp" data-picker>
<div class="camp__head">
<button class="camp__nav" type="button" aria-label="Previous month" data-prev><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 6 8.5 12l6 6"/></svg></button>
<h2 class="camp__month" data-month-name></h2>
<button class="camp__nav" type="button" aria-label="Next month" data-next><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 6l6 6-6 6"/></svg></button>
</div>
<div class="camp__week" aria-hidden="true" data-week></div>
<div class="camp__meadow" data-meadow>
<canvas class="camp__grass" aria-hidden="true" data-grass></canvas>
<div class="camp__grid" data-grid></div>
</div>
<div class="camp__foot">
<p class="camp__sum" aria-hidden="true" data-sum></p>
<button class="camp__clear" type="button" data-clear>Clear dates</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.
37 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 del campeggio» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una scheda color tela con il mese, le frecce e, sotto, un prato visto dall’alto con i sentieri fra le file. Ogni giorno è una piazzola falciata a strisce con la sua targhetta di legno col numero; le piazzole già prenotate hanno la tenda a cupola di qualcun altro e non si possono scegliere, i giorni passati sono erba secca, i giorni fuori dal mese sono alberi. Il primo clic sceglie l’arrivo: una tenda arrotolata cade sulla piazzola rimbalzando e fa volare qualche filo d’erba. Poi, col mouse, un tirante tratteggiato corre dalla tenda alla piazzola sotto il puntatore e le piazzole del soggiorno si segnano con un bordo chiaro. Il secondo clic sceglie la partenza: il sacco si apre, la tenda si alza sul primo arco e la sua coda viene tirata fino alla partenza; gli archi la seguono su delle molle, prima ammucchiati (la tela si gonfia fra un arco e l’altro), poi tesi, finché ogni notte ha il suo arco. Dove finisce una settimana la tenda continua nella fila sotto. Quando arriva in fondo spuntano i tiranti coi picchetti, e sulle piazzole delle notti cala la notte, una dopo l’altra, con le stelle; la tenda si accende da dentro e sparge un po’ di luce sul prato. Sotto ci sono le date e le notti e il totale che contano fino ai loro numeri. Un nuovo arrivo, o Clear dates, smonta la tenda: si ripiega verso l’arrivo, si abbassa e sparisce, e torna il giorno. All’apertura un soggiorno di quattro notti si monta davanti a te.
Come funziona
Il prato
Il mese è una griglia di sei settimane di pulsanti, così tutti i mesi sono alti uguali. Sotto la griglia un canvas disegna una volta sola l’erba (qualche migliaio di fili corti con un generatore di numeri sempre uguale) e i sentieri negli spazi fra le file. Le piazzole prenotate, i prezzi, gli alberi e le stelle vengono da un numero ricavato dalla data, quindi sono sempre gli stessi.
Gli archi sulle molle
La tenda è una catena di archi, uno per giorno, con le posizioni in giorni. Il primo resta sull’arrivo; l’ultimo, la coda, va verso la partenza su una molla rigida (PITCH); quelli in mezzo inseguono la loro parte di coda su molle più morbide (FABRIC). Quattro piccoli passi per fotogramma, col passo limitato a 1/30 di secondo, e un arco non scavalca mai quello prima.
La tela
A ogni fotogramma in cui qualcosa si muove lo script riscrive l’SVG della tenda. Il bordo in alto è una curva per ogni tratto fra due archi: se il tratto è più corto di una notte la tela si gonfia in su (BILLOW), se è teso cala un poco. Ogni fila della griglia ha il suo pezzo di tenda, tagliato dove finisce la settimana; dentro, ritagliati dalla sagoma, le pieghe vicino agli archi, gli archi curvi, la porta con la cerniera e la luce sul colmo. L’ombra è la stessa sagoma schiacciata sul prato con una matrice.
La notte
Ogni piazzola ha uno strato di notte e le sue stelle a quattro punte, nascosti. Scelta la partenza, GSAP accende gli strati delle notti uno dopo l’altro (DUSK) e fa spuntare le stelle girando; intanto il colore della tenda passa dall’arancio alla luce calda di dentro, e un alone sfocato si posa sul prato.
Un solo ciclo
Molle, fili d’erba che volano, tirante che segue il puntatore e tween di GSAP che cambiano il disegno passano tutti da un unico requestAnimationFrame, che si ferma da solo quando niente si muove più.
Tastiera, mouse e dito
Un solo giorno della griglia 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, Invio sceglie. Con la tastiera il tirante segue il focus, col mouse il puntatore; col dito si tocca l’arrivo e poi la partenza.
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. |
PRICE | script.js | [28, 34] | Il prezzo di una piazzola per una notte, in euro: nei giorni feriali, e il venerdì e il sabato. |
MAX_NIGHTS | script.js | 14 | Il soggiorno più lungo, in notti: una partenza più lontana sceglie un nuovo arrivo. |
PITCH | script.js | [180, 13] | La molla che tira la coda della tenda fino alla partenza: rigidità e smorzamento. |
FABRIC | script.js | [120, 9] | Le molle degli archi in mezzo: rigidità e smorzamento. |
BILLOW | script.js | 0.5 | Quanto si gonfia la tela dove gli archi sono ammucchiati. |
DUSK | script.js | [0.5, 0.08] | La notte che cala: i secondi di ogni piazzola, e il tempo fra una piazzola e la successiva. |
STARS | script.js | 4 | Le stelle su ogni notte. |
Quando usarla
Per la pagina delle prenotazioni di un campeggio, di un glamping, di un’area di sosta per camper o di un rifugio: ovunque si scelgano le notti all’aperto. Le piazzole prenotate e i prezzi vanno presi dal tuo sistema al posto di quelli inventati.
Sul telefono
Sotto i 560 pixel le piazzole si stringono per stare nella larghezza dello schermo, con le targhette un po’ più piccole; la tenda, i tiranti e le stelle si misurano sulla piazzola, quindi restano in proporzione. Il tirante sotto il puntatore non c’è: si tocca l’arrivo e poi la partenza.
Con il movimento ridotto
Niente molle, niente cadute e niente fili d’erba: la tenda compare già montata, il tirante va subito sulla piazzola, la notte e le stelle arrivano in dissolvenza, i mesi cambiano di colpo e le notti e il totale vanno subito ai loro numeri.
Trappole
- La tenda deve stare sopra le piazzole ma sotto le targhette coi numeri: per questo l’SVG della tenda è dentro la griglia e i pulsanti non creano un loro contesto di sovrapposizione (niente transform né opacità sui pulsanti, solo sui loro strati), così lo z-index della targhetta vale rispetto alla tenda.
- Con le molle un arco poteva superare quello prima e la tela si rovesciava: dopo ogni passo gli archi vengono rimessi in ordine e la loro velocità all’indietro azzerata.
- Un soggiorno che passa da una settimana all’altra va disegnato in due pezzi, uno per fila: le estremità tagliate non hanno la porta, i tiranti né la parte che scende, e i pezzi sono tagliati anche ai bordi del mese per non finire sopra gli alberi.
- La coda della tenda sta sulla piazzola della partenza: per questo anche la partenza deve essere libera, non solo le notti, altrimenti la tenda finirebbe sopra quella di un altro.
- I tween di GSAP che cambiano il disegno (la caduta, la luce, lo smontaggio) tengono acceso il ciclo con un contatore che scende sia alla fine sia quando un tween viene interrotto: senza, il ciclo restava acceso per sempre o si fermava a metà.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
