Lo sgabello salvaschermo

Fisica, TransizioniCanvas, GSAPMediaPeso compresso: Demo 11 KBGSAP 28 KBGratisScarica lo zip

Lasciata sola per qualche secondo, la pagina si spegne sotto uno strato scuro e lo sgabello della vetrina rimbalza da un bordo all’altro come il vecchio logo dei DVD, cambiando colore a ogni muro. Al primo movimento il buio se ne va ma lo sgabello resta in volo sulla pagina: si prende, si lancia, e lasciato piano vicino a un bordo torna in vetrina.

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 screensaver stool</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/unbounded@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/dm-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the shop: an ordinary page, with the stool in its window -->
  <main class="shop" data-shop>
    <header class="bar">
      <a class="brand" href="#">Perch</a>
      <nav class="bar__nav" aria-label="Sections">
        <a href="#">Stools</a>
        <a href="#">Benches</a>
        <a href="#">Journal</a>
      </nav>
      <a class="bar__bag" href="#">Bag (0)</a>
    </header>

    <section class="hero">
      <div class="hero__words">
        <h1 class="hero__title">Somewhere to land.</h1>
        <p class="hero__line">Three legs, solid ash, light enough to carry in one hand. The Perch Three goes wherever the conversation goes.</p>
      </div>

      <!-- the window: the stool itself is drawn on the canvas below, which sits on this spot until it flies off -->
      <figure class="window">
        <div class="window__spot" data-spot role="img" aria-label="The Perch Three stool in mustard"></div>
        <figcaption class="window__label">
          <span data-label>Perch Three, mustard</span>
          <span class="window__price">€140</span>
        </figcaption>
      </figure>
    </section>

    <footer class="foot">
      <p class="chip" data-hint>
        <span data-wait>Sit still. Screensaver in <span class="chip__count" data-count>4</span></span>
        <span data-play hidden>Catch the stool and throw it. Let go of it by an edge to put it away.</span>
      </p>
      <button class="chip chip--button" type="button" data-start data-autoclic>Start it now</button>
    </footer>
  </main>

  <!-- the quiet layer: when it is fully dark the page under it stops being drawn -->
  <div class="quiet" data-quiet aria-hidden="true">
    <div class="quiet__stamps" data-stamps></div>
    <p class="quiet__note" data-note>Perch is resting. Move to wake it.</p>
  </div>

  <!-- the stool: one canvas, moved with a transform, repainted only when it changes colour -->
  <canvas class="flyer" data-flyer aria-hidden="true"></canvas>
  <p class="release" data-release aria-hidden="true">Let go to put it away</p>

  <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.

39 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 «Lo sgabello salvaschermo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La home di un negozio inventato di sgabelli, Perch: a sinistra il titolo, a destra la vetrina lilla con lo sgabello giallo senape e il prezzo. In basso un’etichetta conta i secondi: «Sit still. Screensaver in 4», poi 3, 2, 1. Se nessuno muove il mouse, preme un tasto, scorre o tocca lo schermo, sulla pagina scende uno strato scuro e la pagina sotto smette di essere disegnata. Lo sgabello esce dalla vetrina (che ora dice «Out for a walk», con la sua ombra rimasta lì) e attraversa il buio in linea retta; a ogni muro rimbalza con una piccola deviazione a caso e cambia colore: corallo, menta, lilla, celeste, senape. Se tocca due muri quasi insieme, in un angolo, una sua copia resta stampata nel buio e la scritta in basso dice «Right in the corner.». Al primo movimento il buio se ne va, ma lo sgabello no: continua a volare sopra la pagina. Lo si può prendere col mouse o col dito: segue la mano su una molla, con un piccolo ritardo, e stretto si rimpicciolisce appena. Lanciato, parte con la velocità della mano e rallenta di rimbalzo in rimbalzo fino alla sua andatura di crociera. Portato piano contro un bordo compare l’etichetta «Let go to put it away»: lasciato lì, esce dal bordo e ricompare in vetrina nel suo colore. Dopo qualche secondo di quiete il buio torna e lo sgabello riparte da dove si trova. Il bottone «Start it now» fa partire tutto subito.

Come funziona

Lo sgabello, una volta sola

Lo sgabello è disegnato in grigi su un canvas grande quanto viene mostrato: il sedile è un’ellisse con il suo bordo, le gambe sono barre che si stringono verso i piedi, illuminate da sinistra, e c’è un anello poggiapiedi. Per ogni colore se ne fa una copia: si legge la luminosità di ogni pixel, la si porta fra il più scuro e il più chiaro, e il pixel diventa quel colore dal 22% al 100%. Le copie restano in memoria, quindi un cambio di colore costa un drawImage. Su una copia larga 160 pixel si misura anche dove lo sgabello è pieno (alfa sopra 40): sono quei bordi, non quelli del riquadro, a toccare i muri.

Il conto alla rovescia

A ogni fotogramma si contano i secondi dall’ultimo segno di vita: un movimento del mouse di almeno 4 pixel, un tasto, la rotella, un dito. Dopo IDLE secondi lo strato scuro compare in FADE secondi con GSAP, e quando è pieno la pagina sotto prende visibility: hidden: il browser non ha più niente da ridisegnare. Il conto vive nel ciclo dei fotogrammi con performance.now, non in un setTimeout, così si ferma con la scheda nascosta e rallenta col rallentatore.

Il volo

Lo sgabello parte dalla vetrina in una direzione a caso e va dritto a SPEED pixel al secondo; a muoverlo è solo un transform su un canvas, mai un ridisegno. A un muro la direzione si piega a caso fino a SWERVE radianti, il verso si gira lontano dal muro e la velocità diventa la più alta fra SPEED e quella di prima per KEEP: uno sgabello lanciato forte rallenta di rimbalzo in rimbalzo, uno piano riprende l’andatura. Nessuna delle due componenti scende sotto un quarto della velocità, così il percorso non diventa una riga piatta che attraversa lo schermo senza visitarlo. Due muri a meno di 120 millisecondi l’uno dall’altro fanno un angolo, e lì resta una copia.

In mano

Un clic o un dito dentro la parte piena dello sgabello lo prende. Da lì una molla lo tira verso la mano a ogni fotogramma (GRIP: rigidità e smorzamento), con un ritardo e un’oscillazione appena visibili, e un’altra molla lo stringe a SQUEEZE. Al rilascio la velocità del lancio si legge sugli ultimi 40 millisecondi del percorso del puntatore (o sugli ultimi 90), e si tiene fra i due THROW. Una mano ferma da più di così non ha velocità propria: conta quella dello sgabello sulla molla.

Via dal bordo

Se lo sgabello in mano sta a meno di EDGE pixel da un bordo e va più piano di STILL pixel al secondo, accanto al puntatore compare «Let go to put it away». Lasciato lì, esce dal bordo più vicino in 0,42 secondi, accelerando, poi ricompare in vetrina col suo colore e il conto riparte da capo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`IDLE`	script.js	`4`	I secondi senza un movimento, un tasto o uno scorrimento prima che parta il salvaschermo. Sul sito vero sarebbe un minuto.
`SPEED`	script.js	`205`	L’andatura di crociera dello sgabello, in pixel al secondo.
`SIZE`	script.js	`0.42`	L’altezza dello sgabello come parte dello schermo (della sua larghezza, su un telefono in verticale). La vetrina la limita.
`SWERVE`	script.js	`0.35`	Quanto si piega a caso il percorso a ogni rimbalzo, in radianti: a 0 è il biliardo perfetto, e il percorso si ripete.
`KEEP`	script.js	`0.86`	Quanta velocità tiene uno sgabello lanciato a ogni rimbalzo, finché non torna a SPEED.
`THROW`	script.js	`90, 520`	Il lancio più lento e quello più veloce, in pixel al secondo.
`GRIP`	script.js	`64, 11.5`	La molla che porta lo sgabello verso la mano: rigidità e smorzamento. Con meno smorzamento oscilla di più.
`SQUEEZE`	script.js	`0.95`	La grandezza dello sgabello mentre è in mano.
`EDGE`	script.js	`32`	Quanto vicino a un bordo deve stare lo sgabello in mano per poterlo mettere via, in pixel.
`STILL`	script.js	`160`	E quanto piano deve andare, in pixel al secondo: più veloce è un lancio.
`FADE`	script.js	`0.32`	I secondi che lo strato scuro impiega ad arrivare e ad andarsene.
`NIGHT`	script.js	`#1d1923`	Il colore dello strato scuro.
`SHOP`	script.js	`#f2b33d`	Il colore dello sgabello in vetrina.
`COLORS`	script.js	`#f2785c, #7ed3b2, #b9a2e8, #7fb8f0, #f2b33d`	I colori che prende ai muri, uno dopo l’altro.

Provali nel Playground

Quando usarla

Per la home di un negozio o di un marchio con un prodotto da guardare, scontornato su fondo trasparente: una sedia, una bottiglia, una scarpa, un barattolo. Funziona bene anche sugli schermi lasciati accesi in vetrina o in fiera. Non va su una pagina da leggere a lungo, dove chi legge sta fermo per minuti: lì IDLE va portato a un minuto, come sul sito originale, o il salvaschermo diventa un’interruzione.

Sul telefono

Funziona col dito: un tocco riporta la pagina e lo sgabello si trascina e si lancia allo stesso modo. È più piccolo, perché la sua altezza viene dalla larghezza dello schermo, e mentre è fuori dalla vetrina la pagina non scorre e non si ricarica tirandola giù. L’etichetta in basso dice «Grab» invece di «Catch».

Con il movimento ridotto

Niente volo: col buio lo sgabello sta fermo al centro e cambia colore ogni 2,6 secondi, senza muoversi. Un movimento qualunque riporta la pagina con lo sgabello in vetrina, e non c’è niente da prendere.

Trappole

Gli ultimi due punti di un percorso raccontano l’ultimo movimento, non la sosta: con il mouse fermo da mezzo secondo vicino al bordo la velocità risultava ancora di circa 800 pixel al secondo e l’etichetta non compariva mai. Se l’ultimo punto è più vecchio della finestra di misura, la mano non ha velocità.
Alcuni mouse e trackpad possono mandare mousemove anche da fermi: contati come segni di vita, il salvaschermo si sveglierebbe da solo. Un movimento conta da 4 pixel in su.
Il riquadro di un’immagine è più grande dell’oggetto: con quello, lo sgabello rimbalzerebbe prima di toccare. Si misura una volta la parte piena (alfa sopra 40) su una copia piccola.
Il bottone che fa partire il salvaschermo è lui stesso un segno di vita: il suo clic lo sveglierebbe all’istante. Dopo il clic lo script non ascolta per 600 millisecondi.
Su iPhone un dito trascinato su una pagina a tutto schermo la tira giù e la ricarica: mentre lo sgabello è fuori la pagina ha touch-action: none, e mentre è in mano touchmove chiama preventDefault.

Librerie

GSAP 3.15.0, Unbounded (font variabile) 5.3.0, DM Sans (font variabile) 5.3.0.

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

Collaudo

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