Il pulsante che copia
Pulsanti, Testo, SVG, Fisica
NuovaGratis
Tutti i componenti
Il calendario con l’elastico
Un calendario per le date di un soggiorno nello stile minimal: scelto l’arrivo, una linea sottile vermiglia parte dal giorno e segue il puntatore come un elastico, si piega quando corre e si tende contro una notte già presa; scelta la partenza si fissa e vibra come una corda pizzicata, le notti in mezzo si scuriscono una dopo l’altra e a sinistra il numero delle notti si allarga con il soggiorno.
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 elastic calendar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the picker: a month to choose the dates of a stay. Once the arrival is chosen a thin elastic line leaves its
day and follows the pointer between the days; choosing the departure pins it down and it settles like a plucked
string, the nights in between darken one after the other and the big number stretches with the stay -->
<div class="cal" data-picker data-autoclic>
<section class="cal__stay" aria-label="Your stay">
<p class="cal__label">Your stay</p>
<div class="cal__count" aria-hidden="true">
<span class="cal__num" data-num><span class="cal__digits" data-digits>0</span></span>
<span class="cal__unit" data-unit>nights</span>
</div>
<dl class="cal__dates">
<div class="cal__date">
<dt>Arrive</dt>
<dd data-from>Add date</dd>
</div>
<div class="cal__date">
<dt>Leave</dt>
<dd data-to>Add date</dd>
</div>
</dl>
<button class="cal__clear" type="button" data-clear disabled><span>Clear dates</span></button>
</section>
<section class="cal__month" aria-label="Choose your dates">
<div class="cal__head">
<button class="cal__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="cal__title" aria-live="polite"><span data-title></span></h2>
<button class="cal__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="cal__week" aria-hidden="true" data-week></div>
<div class="cal__field" data-field>
<svg class="cal__line" aria-hidden="true" data-svg>
<circle class="cal__pin" r="19" data-pin="a"/>
<circle class="cal__pin" r="19" data-pin="b"/>
<path class="cal__band" d="" data-band/>
</svg>
<div class="cal__grid" data-grid></div>
</div>
</section>
<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.
28 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 con l’elastico» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, a sinistra il soggiorno (Your stay, un grande numero di notti, l’arrivo, la partenza e Clear dates) e a destra un mese con le frecce. I giorni sono numeri grigi; quelli passati e i giorni dei mesi vicini sono appena accennati, le notti già prenotate hanno una riga sottile di traverso e non si possono scegliere. Il primo clic sceglie l’arrivo: intorno al numero si disegna un anello vermiglio. Da lì parte una linea sottile che segue il puntatore fra i giorni su una molla, attirata un poco verso il centro del giorno sotto il puntatore: se il puntatore corre la linea si piega, i giorni del soggiorno diventano grigio scuro e il numero a sinistra conta le notti e si allarga o si stringe con la linea. Una notte prenotata la trattiene: la linea si ferma sull’ultimo giorno libero e tira verso il puntatore. Il secondo clic sceglie la partenza: la linea si posa sul suo anello, che si disegna partendo da dove la linea lo tocca, e vibra come una corda pizzicata mentre le notti in mezzo si scuriscono una dopo l’altra, ognuna con un colpetto di un pixel; il numero prende peso. I numeri dei giorni stanno su un pezzetto di bianco, così la linea passa dietro e non attraversa mai una cifra. Un nuovo arrivo fa tornare la linea indietro come un elastico lasciato andare; Clear dates la richiude nell’arrivo e spegne le notti all’indietro. Le frecce cambiano mese: i giorni escono e rientrano in un’onda in diagonale, e la linea con loro. All’apertura un soggiorno di quattro notti si fissa davanti a te.
Come funziona
Il mese in giorni e settimane
Lo script disegna sei settimane di celle, così tutti i mesi sono alti uguali, e mette ogni data su una griglia continua: x in giorni da sinistra, y in settimane dall’alto. Anche le date fuori dal mese hanno il loro posto (sopra o sotto), quindi un soggiorno che comincia nel mese prima entra dal bordo. Le notti prenotate (circa una su nove) vengono da un numero ricavato dalla data, quindi sono sempre le stesse.
Due molle e due modi
La linea ha due capi, ognuno su una molla verso il suo bersaglio: l’arrivo, e il puntatore attirato verso il centro del giorno sotto di lui (FOLLOW, MAGNET) o la partenza. La curva è la somma di due modi di vibrare, mezza onda e onda intera di traverso alla linea: li spinge l’accelerazione dei due capi (LAG), così la linea resta indietro nel mezzo quando corre, e la partenza le dà un colpo (PLUCK, RING). Quattro piccoli passi per fotogramma, col passo limitato a 1/30 di secondo, in un solo requestAnimationFrame che si ferma quando niente si muove.
La linea passa dietro
La linea è un path SVG di 29 punti riscritto a ogni fotogramma, da bordo ad anello e non da centro a centro; più è lunga più è sottile, perché è tirata. I numeri dei giorni stanno sopra, su un pezzetto di fondo bianco: la linea sparisce dietro ogni cifra e si legge come una fila di tratti fra un giorno e l’altro.
Gli anelli e le notti
Ogni anello è un cerchio con stroke-dasharray: GSAP lo disegna in 0,45 secondi partendo dall’angolo da cui arriva la linea. Ogni giorno ha una variabile --k da 0 a 1 che mescola il grigio e il nero (color-mix) e porta il peso da 380 a 680 e la larghezza da 96 a 104: scelta la partenza GSAP la porta a 1 una notte dopo l’altra (DARKEN), con un colpetto in giù di un pixel e un ritorno elastico.
Il numero che si allarga
Il numero delle notti è in Archivo, che ha l’asse della larghezza da 62 a 125. A ogni fotogramma lo script conta le notti dalla posizione del capo libero (una settimana in giù vale sette notti), anche a metà strada, e le trasforma in larghezza (STRETCH): il numero si allarga e si stringe con la linea, trema con la sua vibrazione e prende peso quando la partenza è scelta.
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 la linea segue il focus, col mouse il puntatore; col dito premere un giorno ci tende la linea subito, e alzandolo la si fissa.
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. |
MAX_NIGHTS | script.js | 14 | Il soggiorno più lungo, in notti: oltre, la linea si tende e non va avanti. |
FOLLOW | script.js | 3.6 | Quanto in fretta il capo libero della linea segue il puntatore, in hertz. |
MAGNET | script.js | 0.42 | Quanto il capo libero è attirato al centro del giorno sotto il puntatore (da 0 a 1). |
LAG | script.js | 1.5 | Quanto si piega la linea quando il puntatore corre (0 = resta dritta). |
PLUCK | script.js | 11 | Quanto vibra la linea quando la partenza la fissa, in pixel. |
RING | script.js | 5.2 | La frequenza della vibrazione, in hertz: più alta, una corda più tesa. |
DARKEN | script.js | [0.34, 0.05] | Le notti che si scuriscono: i secondi di ognuna, e il tempo fra una notte e la successiva. |
STRETCH | script.js | [66, 124] | La larghezza del numero delle notti, da una notte a un soggiorno lungo (fra 62 e 125). |
SLIDE | script.js | 0.55 | I secondi di un cambio di mese. |
Quando usarla
Per la pagina delle prenotazioni di un albergo, di una casa vacanze, di un B&B o di un noleggio: ovunque si scelgano un arrivo e una partenza e contino le notti. Le notti prenotate vanno prese dal tuo sistema al posto di quelle inventate.
Sul telefono
Sotto i 720 pixel il soggiorno va sopra, col numero accanto alle date, e le celle si stringono per stare nella larghezza dello schermo. Il dito non ha il puntatore: premere un giorno ci tende la linea subito, con la stessa molla e la stessa piega, e alzandolo la si fissa con la stessa vibrazione.
Con il movimento ridotto
Niente molle, niente vibrazioni e niente onde: la linea va subito dritta da un anello all’altro, gli anelli e le notti compaiono in dissolvenza, il numero prende subito la sua larghezza, i mesi cambiano con una dissolvenza e all’apertura il soggiorno è già al suo posto.
Trappole
- Una linea da centro a centro attraversava le cifre dei giorni in mezzo, come una barratura (che qui vuol dire «prenotato»): ora parte dal bordo degli anelli e ogni numero sta su un pezzetto di bianco, così la linea gli passa dietro.
- Contare le notti dal giorno sotto il puntatore faceva saltare la larghezza del numero di colpo: ora si conta dalla posizione del capo libero, anche a metà strada, e una settimana in giù vale sette notti, così la larghezza scorre con la linea.
- Cambiando mese gli anelli restavano a galleggiare sulla griglia vuota mentre i giorni erano usciti: ora la linea esce e rientra con i giorni, già nel suo posto nuovo.
- Con due cifre il numero più largo usciva dalla colonna: dieci notti o più si scrivono un poco più piccole, dentro la stessa riga, così sotto niente si sposta.
- La regia dell’anteprima sta in una timeline di GSAP, con il puntatore finto che è un oggetto mosso da tween: così il video dell’anteprima registra il giro intero, e una mano vera la ferma subito.
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wght e wdth) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 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.
