Le stagioni a righe

Immagini, TransizioniGSAP, Canvas, Solo CSSMediaPeso compresso: Demo 7,3 KBGSAP + CustomEase 31 KBGratisScarica lo zip

Un paesaggio di montagna disegnato a righe verticali, nello stile minimal: ogni cella della griglia ha una riga larga quanto è scura. Il tasto cambia stagione: i livelli dell’estate cancellano le righe colonna dopo colonna e quelli dell’inverno le fanno crescere dal basso, finché resta la montagna con la neve vuota fra le righe.

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>Hollin, seasons in lines</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- two landscapes drawn in grey on hidden canvases, shown as vertical lines: each cell of the grid holds one line
       as wide as the cell is dark. The button swaps the season: one landscape thins out to nothing, the other grows in -->
  <main class="pagina" data-pagina>
    <header class="testa">
      <p class="marchio">Hollin</p>
      <p class="nota">A mountain hotel, open all year</p>
    </header>

    <figure class="palco" data-palco>
      <canvas class="tela" data-tela aria-label="A mountain landscape drawn in vertical lines"></canvas>
      <span class="filo" data-filo aria-hidden="true"></span>
    </figure>

    <footer class="piede">
      <h1 class="stagione" aria-live="polite">
        <span class="stagione__parola is-on" data-parola="summer">Summer</span>
        <span class="stagione__parola" data-parola="winter" aria-hidden="true">Winter</span>
      </h1>
      <button class="pillola" type="button" data-cambia data-autoclic>
        <span class="pillola__scritta" data-scritta data-testo="See it in winter">See it in winter</span>
        <svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
      </button>
    </footer>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.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.

21 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 «Le stagioni a righe» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Hollin, un hotel di montagna inventato, mostra il suo paesaggio come un’incisione fatta di righe verticali su un bianco caldo. D’estate il sole è un cerchio bianco dove le righe si assottigliano fino a sparire, i tre crinali scendono dal grigio chiaro al bruno, l’hotel ha le finestre accese e davanti un fiume si apre fra gli abeti. All’apertura il paesaggio si disegna da sinistra a destra: in ogni colonna le righe crescono dal fondo della loro cella e si allargano fino al loro spessore, mentre sotto un filo sabbia segue il fronte e poi si ritira, e la parola Summer sale lettera per lettera, larga e leggera, posandosi stretta e piena. Il tasto See it in winter cambia stagione: colonna dopo colonna le righe dell’estate si assottigliano e si abbassano fino a sparire e al loro posto crescono quelle dell’inverno, con più contrasto: il cielo coperto a righe sottili, le rocce scure e la neve che resta vuota sulle creste, sui tetti e sulle punte degli abeti, il lago gelato. La parola Summer esce verso l’alto stringendosi e arriva Winter. Un altro clic torna all’estate.

Come funziona

Due paesaggi in grigio

L’estate e l’inverno si disegnano in scala di grigi su due canvas nascosti, con forme semplici: crinali fatti di somme di seni, sempre uguali, abeti a triangolo, l’hotel a gradoni con le finestre, il cielo con un gradiente. Il canvas nascosto è tre volte più fitto della griglia, e di ogni cella si legge il grigio del pixel al centro con getImageData. Si rifà solo quando cambia la misura del palco (ResizeObserver), anche a metà di un cambio.

Una riga per cella

Prima i livelli, come in un programma di fotografia: il grigio diventa (grigio meno nero) diviso (bianco meno nero), tenuto fra 0 e 1. Poi la larghezza della riga: (1 meno la luce) per (MAX_W meno MIN_W) più MIN_W, in frazioni della cella. Con MIN_W a -0,02 il bianco non disegna niente e con MAX_W a 1,02 le righe nere si toccano. Tutte le righe delle due stagioni vanno in un solo path di rettangoli e un solo fill.

Cambiare stagione coi livelli

Una stagione nascosta ha i livelli HIDDEN, 0 e 1: ogni grigio sopra lo zero diventa bianco e le righe spariscono. Il cambio porta i livelli della stagione che arriva ai suoi (SUMMER o WINTER) e quelli dell’altra a HIDDEN. L’inverno usa 25 e 150, cioè più contrasto: tutto quello che è più chiaro di 150, la neve, resta vuoto.

La coreografia

Un numero solo, p, va da 0 a 1 in DURATION secondi; ogni colonna ha il suo tempo, p per (1 più STAGGER) meno STAGGER per la sua posizione, così il cambio corre da sinistra a destra. Ogni colonna interpola i livelli con la curva InOut (0.76, 0, 0.24, 1); le righe che arrivano crescono dal fondo della cella con power3.out, quelle che se ne vanno si abbassano con power2.in. Il filo sabbia segue il fronte, poi si ritira verso destra, e le lettere della parola cambiano larghezza e peso con gli assi di Anybody.

Movimento ridotto

Niente onda e niente lettere in volo: il paesaggio sparisce in dissolvenza, si ridisegna nella stagione nuova e torna; la parola cambia con una dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`COLS`	script.js	`100`	Le colonne della griglia, cioè quante righe verticali (sul telefono il 60%).
`ROWS`	script.js	`100`	Le righe della griglia: più sono, più il disegno è fine dall’alto in basso.
`MIN_W`	script.js	`-0.02`	La larghezza della riga dove la cella è bianca, in frazioni della cella: sotto zero il bianco resta vuoto.
`MAX_W`	script.js	`1.02`	La larghezza della riga dove la cella è nera: oltre 1 le righe si toccano.
`SUMMER`	script.js	`[0, 255]`	I livelli dell’estate: punto del nero e punto del bianco.
`WINTER`	script.js	`[25, 150]`	I livelli dell’inverno: più contrasto, la neve resta vuota.
`HIDDEN`	script.js	`[0, 1]`	I livelli di una stagione nascosta: ogni grigio diventa bianco.
`DURATION`	script.js	`1.2`	I secondi di un cambio di stagione.
`STAGGER`	script.js	`0.6`	Quanto il cambio corre da sinistra a destra: 0 tutte le colonne insieme.

Provali nel Playground

Quando usarla

Per il sito di un hotel, di un rifugio o di una casa vacanze che cambia con le stagioni, la pagina di una località, una prima pagina in bianco e nero che deve avere carattere senza usare foto.

Sul telefono

La stessa animazione, col palco alto e stretto: le colonne sono il 60%, il paesaggio si ridisegna per la nuova forma e hotel e abeti si misurano sul lato più corto. Un tocco cambia stagione.

Con il movimento ridotto

Il paesaggio cambia stagione in dissolvenza, senza l’onda delle colonne, e la parola compare e scompare senza muoversi.

Trappole

Con i livelli dell’inverno, 25 e 150, ogni grigio sopra 150 diventa bianco: il primo inverno, disegnato nei grigi chiari dell’estate, spariva quasi tutto. I grigi dell’inverno vanno scelti dentro il suo campo, sotto 150 quello che deve vedersi, sopra la neve.
Con i due paesaggi sulla stessa griglia una riga per stagione si sovrappone: per questo a metà cambio le colonne dove passa l’onda sono più scure, ed è voluto. Disegnarle in un solo path con un solo fill tiene il cambio leggero anche con diecimila celle.
Un clic durante il cambio porta subito alla fine quello in corso (progress(1)) prima di leggere i livelli di partenza: altrimenti la stagione nuova partirebbe da livelli a metà, diversi per ogni colonna.

Librerie

GSAP 3.15.0, CustomEase 3.15.0, Anybody (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,3 KB; le librerie: GSAP + CustomEase 31 KB.

Collaudo

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