L’interruttore della tenda avvolgibile

Interruttori, SVG, Fisica, HoverGSAP, Solo CSSMediaPeso compresso: Demo 6,0 KBGSAP 28 KBGratisScarica lo zip

L’interruttore della lettura notturna, nello stile minimal: la pista è una finestrella col cielo e il sole basso, e il pomello è la cordicella di una tenda a rullo. Acceso, la tenda si srotola con le sue pieghe sottili e copre la finestra mentre dietro si fa notte; spento, uno strattone e la molla la riavvolge di scatto, con due rimbalzi contro il rullo.

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 roller blind switch</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">
    <div class="setting" data-setting>
      <div class="setting__text">
        <label class="setting__name" id="night-name" for="night-switch">Night reading</label>
        <span class="setting__sub" aria-hidden="true">
          <span class="setting__subwords">
            <span class="setting__s" data-sub-off>Blind up, full light</span>
            <span class="setting__s" data-sub-on>Blind down, easy on the eyes</span>
          </span>
        </span>
      </div>
      <div class="setting__ctrl">
        <span class="setting__word" id="night-word" aria-hidden="true">
          <span class="setting__w" data-word-off>Off</span>
          <span class="setting__w" data-word-on>On</span>
        </span>
        <button class="switch" id="night-switch" type="button" role="switch" aria-checked="false" aria-labelledby="night-name night-word" data-switch data-autoclic>
          <svg class="switch__art" viewBox="0 0 104 56" aria-hidden="true" focusable="false">
            <defs>
              <clipPath id="window">
                <rect x="2.5" y="2.5" width="99" height="51" rx="25.5"></rect>
              </clipPath>
              <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" data-sky-top stop-color="#dfe9ef"></stop>
                <stop offset="1" data-sky-bottom stop-color="#fbf6ec"></stop>
              </linearGradient>
              <linearGradient id="fall" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="#000" stop-opacity="0.16"></stop>
                <stop offset="1" stop-color="#000" stop-opacity="0"></stop>
              </linearGradient>
            </defs>
            <g clip-path="url(#window)">
              <rect class="switch__sky" x="0" y="0" width="104" height="56" fill="url(#sky)"></rect>
              <circle class="switch__sun" data-sun cx="32" cy="48" r="10"></circle>
              <path class="switch__moon" data-moon d="M0 -5.2 A5.2 5.2 0 1 0 4.6 2.4 A4.1 4.1 0 1 1 0 -5.2 Z"></path>
              <rect class="switch__fall" data-fall x="0" y="0" width="104" height="5" fill="url(#fall)"></rect>
              <rect class="switch__cloth" data-cloth x="0" y="0" width="104" height="10"></rect>
              <path class="switch__slats" data-slats d=""></path>
              <rect class="switch__rail" data-rail x="0" y="0" width="104" height="1.8"></rect>
              <rect class="switch__roll" data-roll x="0" y="0" width="104" height="8"></rect>
              <line class="switch__rollline" data-rollline x1="0" y1="0" x2="104" y2="0"></line>
            </g>
            <rect class="switch__track" x="1" y="1" width="102" height="54" rx="27"></rect>
            <g data-cord>
              <line class="switch__cord" data-cordline x1="0" y1="0" x2="0" y2="8"></line>
              <path class="switch__pull" data-pull d="M0 0 C1.9 0 3.1 1.6 3.1 3.6 C3.1 5.9 1.7 7.6 0 7.6 C-1.7 7.6 -3.1 5.9 -3.1 3.6 C-3.1 1.6 -1.9 0 0 0 Z"></path>
              <path class="switch__gleam" data-gleam d="M-1.4 2.2 C-1.9 3 -2 4 -1.7 5"></path>
            </g>
          </svg>
        </button>
      </div>
    </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.

18 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 della tenda avvolgibile» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianca, fra due righe sottili, l’impostazione «Night reading» con sotto la frase «Blind up, full light»; a destra la parola «Off» e l’interruttore. La pista è una pillola di filo che fa da finestrella: dentro c’è un cielo chiaro con il sole basso, e in alto il rullo con la tenda avvolta; dal binario della tenda pende la cordicella, una linea sottile con un piccolo terminale scuro a ghianda, che è il pomello. Al clic (o al tocco, con Spazio, Invio o la freccia a destra) la cordicella viene tirata giù, la tenda si srotola dal rullo con le sue pieghe sottili che si staccano una dopo l’altra, arriva in fondo un pixel oltre e si posa; intanto il cielo dietro si fa notte, il sole scende sotto il davanzale e dall’altra parte sale una luna, e il rullo si fa più sottile. La frase diventa «Blind down, easy on the eyes», «Off» si assottiglia e sparisce e «On» arriva stretta e leggera e prende peso. Un altro clic (o la freccia a sinistra): uno strattone in giù, poi la molla la riavvolge di scatto e la tenda rimbalza due volte contro il rullo. La cordicella dondola da sola quando il binario si muove, con una piccola molla smorzata. Col puntatore sopra la cordicella scende un poco, come per invitare a tirarla; premuta, cede ancora.

Come funziona

Un solo stato

Tutto sta in un oggetto di numeri: quanto è giù la tenda p, lo strattone, la sporgenza sotto il mouse, la pressione e la parola. Una funzione render, chiamata dal ticker di GSAP a ogni fotogramma, scrive da lì la stoffa, le pieghe, il binario, il rullo, la cordicella e il cielo.

Le pieghe che si staccano

Le pieghe sottili sono un solo tracciato ridisegnato a ogni fotogramma, una riga ogni FOLD pixel contata dal binario verso l’alto: così, mentre la tenda scende, le pieghe nuove escono dal rullo una alla volta, come la stoffa vera, e il rullo si assottiglia di quanto si è srotolato.

Giù con la mano, su con la molla

Accesa: lo strattone allunga la cordicella di TUG pixel, poi p va oltre il fondo di OVERSHOOT pixel con power2.inOut in DROP secondi e torna con sine.out. Spenta: un altro strattone libera il fermo, p torna a zero con power3.in in SNAP secondi, che accelera come una molla, e due rimbalzi sempre più piccoli contro il rullo.

La cordicella che dondola

L’angolo della cordicella è una molla smorzata spinta dall’accelerazione del binario: quando la tenda parte o si ferma, il terminale dondola e si assesta da solo. Il cielo passa al blu della notte con gsap.utils.interpolate sulle due tinte del gradiente, il sole scende e la luna sale.

Accessibile

È un button con role="switch" e aria-checked, etichettato dal nome dell’impostazione e dalla parola; Spazio e Invio lo girano come il clic, le frecce a destra e a sinistra lo accendono e lo spengono, il fuoco si vede con un anello arancio. Un clic a metà ferma il giro in corso e parte quello nuovo dal punto in cui è la tenda.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DROP`	script.js	`0.95`	Quanto ci mette la tenda a srotolarsi, in secondi.
`SNAP`	script.js	`0.36`	Quanto ci mette la molla a riavvolgerla, in secondi.
`OVERSHOOT`	script.js	`1.1`	Quanto il binario va oltre il fondo prima di posarsi, in pixel.
`BOUNCE`	script.js	`1.6`	Quanto rimbalza il binario contro il rullo quando si riavvolge, in pixel.
`SWING`	script.js	`1`	Quanto dondola la cordicella quando il binario si muove (0 mai).
`FOLD`	script.js	`5.2`	La distanza fra le pieghe sottili della stoffa, in pixel.
`TUG`	script.js	`4`	Quanto si allunga la cordicella allo strattone, in pixel.

Provali nel Playground

Quando usarla

Per un’impostazione accesa o spenta che oscura o attenua: la lettura notturna di un’app di libri o di notizie, il tema scuro, la modalità riposo, il filtro della luce blu. Va bene anche nelle impostazioni di una casa intelligente, per le tende vere, o nel sito di un albergo.

Sul telefono

Uguale col tocco: l’interruttore resta 104 per 56, con la cordicella che pende sotto quando la tenda è giù; la riga dell’impostazione si stringe alla larghezza dello schermo e la frase sotto il nome resta su una riga.

Con il movimento ridotto

Niente srotolamento né molla: la tenda è già su o già giù, il cielo già di giorno o di notte, la cordicella ferma; le parole si scambiano in una dissolvenza breve e la frase cambia subito.

Trappole

La cordicella sta fuori dal ritaglio della finestra, perché quando la tenda è giù pende sotto la pista: tutto il resto (cielo, stoffa, pieghe, binario, rullo) è dentro un clipPath con gli angoli tondi della pillola.
Le pieghe contate dall’alto restavano ferme mentre la stoffa scendeva, come righe disegnate sul vetro: contate dal binario verso l’alto, escono dal rullo come stoffa vera.
Gli interruttori del tema che ci sono già usano un paesaggio col sole e la luna, una lampada, un aereo: qui l’idea è un’altra, la pista come finestra e il pomello come cordicella.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

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