Il banner dei cookie
Consenso, Transizioni, SVG, Fisica
NuovaGratis
Tutti i componenti
Il grafico a stanze
Dove va l'energia di una casa coi pannelli solari, disegnato come la casa tagliata a metà: ogni uso è una stanza larga quanto la sua parte del mese. Cambiando mese le pareti scivolano su molle e le lampade appese ai soffitti oscillano per lo strattone; la stanza scelta accende la sua luce, un cono caldo che dondola con la lampada, e le altre vanno al buio. A gennaio i pannelli sono sotto la neve, che in primavera si scioglie.
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 room chart</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/albert-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the energy card of a home with solar panels: where a month's energy went, drawn as the house cut open. Every
use is a room, as wide as its share of the month; changing the month the walls slide on springs and the lamps
swing. The use picked with the pointer, a finger or the keys switches its light on, and the other rooms go
dark. The house is drawn by the script; the numbers are in a table for screen readers -->
<section class="home" aria-labelledby="home-title" data-home>
<div class="home__head">
<h2 class="home__title" id="home-title">Home energy</h2>
<div class="months" role="tablist" aria-label="Month" data-months data-autoclic>
<span class="months__thumb" aria-hidden="true" data-thumb></span>
<button class="months__btn" type="button" role="tab" aria-controls="home-house" data-month>Jan</button>
<button class="months__btn" type="button" role="tab" aria-controls="home-house" data-month>Apr</button>
<button class="months__btn" type="button" role="tab" aria-controls="home-house" data-month>Jul</button>
</div>
</div>
<p class="home__figure"><span class="home__value" data-value>0</span><span class="home__unit">kWh</span></p>
<p class="home__note" data-note></p>
<div id="home-house" role="tabpanel" data-panel>
<div class="house" data-house>
<svg class="house__svg" aria-hidden="true" data-svg></svg>
</div>
<div class="key" role="group" aria-label="Where it went" data-key></div>
<table class="sr" data-table></table>
</div>
<p class="sr" aria-live="polite" data-said></p>
</section>
</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.
31 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 grafico a stanze» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una scheda scura larga 440 pixel: Home energy, a destra tre mesi in una guida grigia, Jan, Apr e Jul, sotto un totale grande, 1,300 kWh, con In January, 19% came from your panels. In mezzo una casa vista di fronte con la facciata tolta: un tetto grigio con due file di pannelli solari, per metà sotto la neve, e cinque stanze in fila, ognuna del colore del suo uso e larga quanto la sua parte del mese: il garage blu con l'auto e il cavo di ricarica, la stanza arancione della pompa di calore, il bagno verde con la doccia, la cucina gialla con la pentola e lo studio rosa col portatile. Ogni stanza è una scatola vista di fronte, col soffitto, il pavimento e i lati in ombra, e da ogni soffitto pende una lampada. Sotto la casa, nello stesso ordine delle stanze, la legenda: per ogni uso il suo disegno nel suo colore, il nome e la percentuale. Aprendo la pagina le stanze partono tutte uguali e le pareti scivolano ai loro posti, le lampade dondolano, la neve si posa sul tetto e i numeri contano. Scegliendo un altro mese una pillola scivola sotto il nome e le quattro pareti scivolano ai posti nuovi, una un attimo dopo l'altra, vanno un poco oltre e tornano; le lampade restano indietro quando il soffitto parte e oscillano quando si ferma, poi si calmano. A gennaio la pompa di calore prende quasi metà della casa, a luglio il garage; la neve si scioglie dal basso verso il colmo e scopre i pannelli, mentre il totale e le percentuali contano ai valori nuovi. Passando sulla casa o sulla legenda, toccando una stanza o scorrendoci col dito, o con le frecce sulla legenda, la stanza scelta accende la luce: sotto la lampada si apre un cono caldo che illumina l'oggetto e il pavimento, e l'oggetto si mette a lavorare (la ventola gira, la doccia scorre, la pentola fuma, il portatile scrive, il cavo carica l'auto). Le altre stanze vanno al buio e tengono solo un velo del loro colore, col disegno e la lampada nel colore della stanza; in alto il totale conta fino ai kWh di quell'uso e sotto compare il nome con la percentuale del mese. Se la luce è accesa mentre si cambia mese, il cono dondola con la lampada.
Come funziona
Una barra impilata con un tetto
Le cinque stanze stanno in fila e ognuna è larga quanto la sua parte del mese, calcolata sui kWh veri: la casa è una barra impilata, con le pareti fra le stanze al posto dei due pixel di stacco. Le percentuali scritte si arrotondano coi resti più grandi, così fanno sempre cento. Il disegno è largo quanto la scheda, così le misure sono pixel veri anche al telefono.
Le pareti su molle
Ogni parete è un numero, la parte del mese alla sua sinistra. Cambiando mese il suo obiettivo scivola al posto nuovo in SLIDE secondi con power2.inOut, una parete 30 millesimi dopo l'altra, e la parete lo insegue su una molla (WALLS): resta un poco indietro, va oltre e si assesta. La molla si calcola a passi di 1/240 di secondo sul ticker di GSAP, e da lì viene anche l'accelerazione di ogni parete.
Le lampade sono pendoli
Ogni lampada è un pendolo di 18 centimetri, se un pixel fosse un centimetro: θ'' = −ω²(sin θ + SWING · 0,4 · a/g · cos θ) − smorzamento, dove a è l'accelerazione del soffitto, la media delle due pareti della stanza. Così la lampada resta indietro quando il soffitto parte e oscilla quando si ferma, e si calma in un secondo e mezzo.
La luce accesa
La stanza scelta mostra un cono caldo appeso alla lampada, che gira con lei, una pozza di luce sul pavimento che segue la punta del cono e un alone sul soffitto, tutto ritagliato dalla stanza con un clipPath che si sposta con le pareti. Le altre stanze tengono NIGHT del loro colore, e il disegno e la lampada passano dal colore della scheda al colore della stanza, così si leggono anche al buio. L'oggetto lavora con un orologio che corre quanto la luce è accesa: spegnendo, rallenta e si ferma senza scatti.
La neve e i numeri
La neve è un tracciato dal colmo in giù con l'orlo ondulato e qualche goccia tonda, ritagliato dal tetto: la sua profondità va a uno a gennaio e a zero negli altri mesi, e l'orlo risale verso il colmo mentre si scioglie. Il totale e le percentuali contano con GSAP; la riga sotto il totale dice quanto è venuto dai pannelli, o il nome e la parte dell'uso acceso.
Tastiera, dito, screen reader e anteprima
I mesi sono tab con le frecce. La legenda è un gruppo di pulsanti con le frecce, Inizio e Fine: la luce segue il fuoco, Esc la spegne, e una regione aria-live legge uso, kWh e parte; una tabella nascosta ha tutti i numeri del mese. Col mouse il passaggio accende e il clic tiene accesa; col dito il tocco accende, scorrere cambia stanza, un secondo tocco spegne. Un clic da script sui mesi (l'anteprima della libreria) sceglie il mese dopo e, finite le pareti, accende la stanza cresciuta di più.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SLIDE | script.js | 0.6 | I secondi in cui le pareti scivolano al mese nuovo. |
WALLS | script.js | [260, 0.5] | Le molle che tirano le pareti: quanto sono rigide e quanto sono frenate (1 = senza andare oltre). |
SWING | script.js | 1 | Quanto oscillano le lampade quando le pareti si muovono (0 = restano ferme). |
GLOW | script.js | 0.75 | Quanto è forte la luce nella stanza accesa. |
NIGHT | script.js | 0.2 | Quanto colore tengono le altre stanze mentre una è accesa. |
COUNT | script.js | 0.7 | I secondi in cui i numeri contano ai valori nuovi. |
Quando usarla
Per l'app di una casa con pannelli e pompa di calore, il cruscotto di un fornitore di energia, la bolletta spiegata, ma anche per qualsiasi totale che si divide in parti legate a dei luoghi: le spese di un negozio per reparto, le ore di un ufficio per stanza. Il cambio di mese fa vedere dove si è spostata la spesa (l'inverno nella pompa di calore, l'estate nel garage), e la luce accesa risponde alla domanda di chi guarda: quanto pesa questa parte?
Sul telefono
Su un telefono la scheda prende la larghezza dello schermo e la casa si ridisegna alla sua misura, con le stanze in pixel veri e i pannelli che ci stanno; nelle stanze strette l'oggetto si rimpicciolisce. Toccando una stanza si accende la luce, scorrendo il dito di lato si passa di stanza in stanza (la pagina scorre ancora in verticale), e un secondo tocco o un tocco fuori la spegne. La legenda stringe le colonne perché i nomi ci stiano interi.
Con il movimento ridotto
Le pareti non scivolano e le lampade non oscillano: cambiando mese la casa si spegne in dissolvenza, cambia e si riaccende, e i numeri cambiano subito. La luce si accende e si spegne ancora in dissolvenza, gli oggetti restano fermi e la neve compare e sparisce senza scendere.
Trappole
- Con le sole molle le pareti arrivavano in un quarto di secondo e il cambio non si vedeva; con la spinta fisica vera le lampade avrebbero fatto il giro. L'obiettivo di ogni parete scivola con un'andatura e la parete lo insegue sulla sua molla, e la spinta sulla lampada è ridotta (0,4): così la lampada resta indietro alla partenza e oscilla all'arrivo, di quindici o venti gradi.
- Arrotondare le percentuali una per una dà 99 o 101: si usano i resti più grandi. E il ciclo che aggiunge i punti mancanti deve contarli prima, non rileggere la somma a ogni giro, o si ferma dopo il primo (qui la pompa di calore diceva 47% invece di 48%).
- Cinque colori che si toccano: nella casa si toccano solo le stanze vicine, quindi l'ordine fisso dei colori è stato provato sulle coppie vicine (distanza per i daltonici almeno 8,4, a vista normale almeno 19,3), e ogni uso ha anche il suo disegno e il suo nome.
- Spegnere la legenda con l'opacità portava i nomi sotto il contrasto 4,5:1: nelle voci spente si spengono solo i disegni, e le percentuali passano al grigio delle scritte.
- Rimettere a riposo l'oggetto quando la luce si spegne faceva scattare la ventola e trasformava di colpo i trattini dell'acqua in righe: l'orologio dell'oggetto corre quanto la luce è accesa, e i vuoti fra i trattini si stringono con lei fino a chiudersi in una riga.
- Un clic col mouse dà il fuoco al pulsante prima del clic: se il fuoco accende e il clic accende o spegne, la luce si spegne subito. Il fuoco accende solo quando è :focus-visible, cioè dalla tastiera.
- Lasciando la legenda per i mesi la stanza si spegneva, e non si poteva vedere lo stesso uso in un altro mese: la luce si spegne solo se il fuoco esce dalla scheda.
- stop-color nel markup non legge le variabili CSS: il colore della luce si legge dal foglio di stile e si scrive negli stop, quello dei pannelli sta in un attributo style.
Librerie
GSAP 3.15.0, Albert Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 7 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.
