L’interruttore giorno e notte

Interruttori, Transizioni, SVGGSAPMediaPeso compresso: Demo 5,1 KBGSAP 28 KBGratisScarica lo zip

Un interruttore disegnato come un piccolo paesaggio: acceso, il sole scivola dall’altra parte e diventa la luna, le nuvole del giorno se ne vanno, le colline si fanno blu, e la notte si allarga su tutta la pagina in un cerchio che parte dall’interruttore.

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 day and night switch</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/nunito@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the day and the night of the page: a white layer, and over it a black circle that grows out of the switch and
       shrinks back into it -->
  <span class="day" aria-hidden="true"></span>
  <span class="night" aria-hidden="true" data-night></span>
  <main class="stage">
    <!-- the switch: a little landscape. Turned on, the sun slides across and turns into the moon, the day clouds drift
         off and the night ones come in, the hills darken, and the whole page goes black -->
    <div class="theme" data-theme>
      <button class="sky" type="button" role="switch" aria-checked="false" aria-labelledby="sky-label" data-sky data-autoclic>
        <span class="sky__day" aria-hidden="true"></span>
        <span class="sky__dark" aria-hidden="true" data-dark></span>
        <svg class="sky__land" viewBox="0 0 132 56" preserveAspectRatio="none" aria-hidden="true">
          <g data-day-clouds>
            <path class="cloud" transform="translate(76 9)" d="M6 12a5 5 0 0 1 4.6-5 6.5 6.5 0 0 1 12.2-1.4A4.6 4.6 0 0 1 28 12z"/>
            <path class="cloud" transform="translate(98 20) scale(0.75)" d="M6 12a5 5 0 0 1 4.6-5 6.5 6.5 0 0 1 12.2-1.4A4.6 4.6 0 0 1 28 12z"/>
          </g>
          <g data-night-clouds>
            <path class="cloud cloud--night" transform="translate(10 8) scale(0.8)" d="M6 12a5 5 0 0 1 4.6-5 6.5 6.5 0 0 1 12.2-1.4A4.6 4.6 0 0 1 28 12z"/>
            <path class="cloud cloud--night" transform="translate(30 20) scale(0.6)" d="M6 12a5 5 0 0 1 4.6-5 6.5 6.5 0 0 1 12.2-1.4A4.6 4.6 0 0 1 28 12z"/>
          </g>
          <path class="hill hill--back" d="M0 56V44c18-7 36-8 58-2s46-6 74-1v15z"/>
          <path class="hill hill--front" d="M0 56v-7c24-4 48 4 74 0s40-5 58-1v8z"/>
          <path class="hill hill--back-night" data-night-hill d="M0 56V44c18-7 36-8 58-2s46-6 74-1v15z"/>
          <path class="hill hill--front-night" data-night-hill d="M0 56v-7c24-4 48 4 74 0s40-5 58-1v8z"/>
        </svg>
        <span class="sky__thumb" data-thumb>
          <span class="sky__knob" data-knob>
            <svg viewBox="-24 -24 48 48" aria-hidden="true">
              <g class="sun-rays" data-rays></g>
              <circle class="disc" r="13.5" data-disc/>
              <g class="craters" data-craters>
                <circle cx="-4.5" cy="-3.5" r="3.2"/>
                <circle cx="4.8" cy="3.6" r="2.2"/>
                <circle cx="-2" cy="6.4" r="1.5"/>
              </g>
            </svg>
          </span>
        </span>
      </button>
      <span class="theme__label" id="sky-label" data-label>Dark mode</span>
    </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.

10 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 «L’interruttore giorno e notte» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco un interruttore a pillola che è un piccolo cielo: azzurro, con un sole giallo e i suoi raggi, due nuvole bianche e due colline verdi, e accanto la scritta Dark mode. Acceso, il sole scivola dall’altra parte allungandosi un poco, ritira i raggi girando e diventa la luna, su cui compaiono tre crateri uno dopo l’altro; il cielo si fa blu notte, le nuvole bianche escono a destra mentre due nuvole scure entrano da sinistra, e le colline diventano blu. Intanto dall’interruttore si allarga un cerchio nero che copre tutta la pagina; la scritta è nera sul bianco e bianca sul nero, e cambia esattamente dove passa il bordo del cerchio. Spento, tutto torna indietro e la notte rientra nell’interruttore. Sotto il mouse il sole, o la luna, si affaccia verso l’altra parte; premuto, si schiaccia un poco. Anche un clic sulla scritta accende e spegne.

Come funziona

Il paesaggio

Il pulsante (role switch) contiene due fondi a gradiente, il giorno e la notte uno sull’altro, un SVG con le nuvole e due coppie di colline, e il pomello: un SVG col disco, i raggi fatti dallo script e tre crateri. Il pomello sta dentro un secondo elemento che prende la pressione e lo sguardo verso l’altra parte, così queste non si scontrano con la corsa.

Una timeline sola

Tutto il passaggio dal giorno alla notte è una timeline in pausa: accendere la manda avanti, spegnere indietro, e un clic a metà la gira da dove si trova. Il pomello fa la sua corsa in tre quarti di TIME, allungandosi fino a STRETCH a metà strada; i raggi rimpiccioliscono e girano di 90 gradi, il disco cambia colore e i crateri compaiono con back.out.

La notte sulla pagina

Dietro a tutto ci sono due livelli fissi: il bianco del giorno e la notte nera, tagliata da un clip-path circle col centro sull’interruttore. Il raggio va da zero alla distanza dell’angolo più lontano della finestra; nella timeline un numero da 0 a 1 lo disegna a ogni fotogramma.

La scritta

La scritta è bianca con mix-blend-mode difference: sul bianco diventa nera, sul nero resta bianca, e nel passaggio si divide proprio sul bordo del cerchio. Per questo il bianco del giorno è un livello vero e non solo lo sfondo della pagina, e nessun contenitore della scritta ha un transform.

Tastiera

È un pulsante con role switch e aria-checked: Invio e Spazio lo accendono e lo spengono, e il suo nome è la scritta accanto (aria-labelledby).

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TIME`	script.js	`0.85`	I secondi del passaggio, dal giorno alla notte e indietro.
`STRETCH`	script.js	`1.18`	Quanto si allunga il sole mentre scivola.
`RAYS`	script.js	`8`	I raggi del sole.
`PEEK`	script.js	`4`	Quanto si affaccia il sole sotto il mouse, in pixel.

Provali nel Playground

Quando usarla

Per scegliere fra il tema chiaro e quello scuro di un sito o di un’app, quando il cambio può essere anche un piccolo spettacolo. In un sito vero la scelta va salvata, e la prima volta si può partire da quella del sistema (prefers-color-scheme).

Sul telefono

L’interruttore si rimpicciolisce un poco sotto i 420 pixel e i tocchi fanno come i clic; il cerchio della notte parte sempre dall’interruttore e copre tutto lo schermo.

Con il movimento ridotto

Niente corsa né cerchio: l’interruttore cambia di colpo e la notte copre la pagina, o la lascia, in una dissolvenza di un quarto di secondo.

Trappole

mix-blend-mode non si fonde con lo sfondo della pagina (quello del body): il bianco del giorno deve essere un elemento vero, dietro a tutto.
Un transform rimasto su un contenitore della scritta, anche quello di un’entrata già finita, ne fa un gruppo a parte e la fusione non vede più la notte: l’entrata anima l’interruttore e la scritta separati e poi toglie il transform.
Il cerchio non si può calcolare una volta per tutte: centro e raggio dipendono dalla finestra. Per questo la timeline muove un numero da 0 a 1 e il cerchio si ridisegna a ogni fotogramma e quando la finestra cambia.
La notte è un livello fixed con z-index −1: sopra lo sfondo della pagina e sotto tutto il resto, così l’interruttore non viene mai coperto.
Safari su iPhone colora le sue barre con lo sfondo della pagina o con un livello fixed grande quanto lo schermo, qui il bianco del giorno: a cerchio finito la pagina diventa nera davvero e il giorno sparisce (la classe is-night sull’html), altrimenti di notte le barre resterebbero bianche.

Librerie

GSAP 3.15.0, Nunito (font variabile) 5.3.0.

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

Collaudo

Provata il 12 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.