Il gatto sotto la coperta

Hover, WebGL, ImmaginiWebGL, CanvasMediaPeso compresso: Demo 8,6 KBsenza librerieGratisScarica lo zip

Una coperta di lana copre la pagina e qualcosa, sotto, segue il puntatore: la coperta si alza dove passa, i quadri si piegano sul rigonfiamento, la luce ne accende un fianco, e la scia resta alzata un attimo prima di riabbassarsi.

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 cat under the blanket</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/wght-italic.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="bed" data-bed>
    <!-- the blanket: the check, the words printed on it and whatever moves under it are all drawn here -->
    <canvas class="bed__canvas" data-canvas aria-hidden="true"></canvas>

    <header class="bar">
      <p class="tag brand">Tuck</p>
      <nav class="tag bar__nav" aria-label="Sections">
        <a href="#">Blankets</a>
        <a href="#">Care</a>
        <a href="#">Stockists</a>
      </nav>
    </header>

    <!-- the words on the blanket: the script paints them into the picture so they lift with it;
         they stay here for whoever cannot see them -->
    <div class="words" data-words>
      <h1 class="words__title">Something is under the blanket.</h1>
      <p class="words__line">Pure new wool, woven wide enough for two and whoever turns up.</p>
    </div>

    <footer class="foot">
      <p class="tag" data-hint>Move the pointer: it follows you</p>
      <p class="tag">Camel check, double weave</p>
    </footer>
  </main>

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

30 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 «Il gatto sotto la coperta» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La pagina d’apertura di una marca inventata di coperte: uno scozzese color cammello a tutto schermo, tessuto filo per filo, con il titolo stampato sopra e un’etichetta cucita. Le scritte di servizio stanno su piccole etichette di stoffa, in HTML. Muovendo il puntatore, sotto la coperta qualcosa lo segue: dove passa la lana si alza, le righe dei quadri si incurvano sul rigonfiamento, il fianco verso la luce si schiarisce e l’altro va in ombra. Se il puntatore corre resta una scia alzata, curva come il percorso, che si appiana in meno di un secondo; se si ferma, il rigonfiamento resta lì sotto. Anche il titolo e l’etichetta si sollevano quando ci passa sotto. All’arrivo un’onda attraversa la coperta, come se fosse stata appena stesa, e quando nessuno muove niente per qualche secondo il rigonfiamento se ne va a spasso da solo.

Come funziona

La coperta

Un solo quadro dello scozzese si tesse su un canvas di 512 pixel: 128 fili in un verso e 128 nell’altro, ognuno col suo colore preso dall’elenco SETT e con una tinta appena diversa. È una saia: ogni filo passa sopra due e sotto due, un passo più in là a ogni riga, ed è questo a disegnare la diagonale. Il quadro diventa una texture che si ripete. Il titolo e l’etichetta si dipingono su un secondo canvas grande quanto la pagina, leggendo i testi dall’HTML.

Una griglia di altezze

Il rigonfiamento non è una forma: è una griglia di 256 colonne con un numero per cella, l’altezza della coperta in quel punto. A ogni fotogramma ogni cella perde un po’ di altezza (× e^(−SETTLE · dt)), prende un po’ di quella delle quattro vicine (SPREAD), e le celle sotto il puntatore ne guadagnano con una campana di raggio BALL. Non c’è altro: niente velocità, niente pressione. È per questo che un rigonfiamento resta dove è nato e muore lì, invece di scappare come un’onda.

Quanto tira

Un punto insegue il puntatore (CHASE). La distanza fra i due, in larghezze di pagina, dice quanto la lana è tirata: sotto SLACK niente, poi tanh((distanza − SLACK) / TAUT) al quadrato. Più il puntatore corre, più la scia è alta. A questo si aggiunge una spinta costante, REST, che tiene il rigonfiamento sotto un puntatore fermo.

Dalle altezze al disegno

La griglia va alla scheda video come una texture di un byte per cella. Lo shader ne misura la pendenza con due differenze, una cella e mezza per parte, e legge la coperta un po’ più in salita (PUSH): sul colmo il disegno si allarga, sui fianchi si stringe. La stessa pendenza, moltiplicata per una luce che viene dall’alto a sinistra, schiarisce un fianco e scurisce l’altro, fra −50% e +50%.

Da sola

All’inizio una fila di timbri attraversa la pagina da sinistra a destra in 1,2 secondi: è l’onda della coperta stesa. Dopo WANDER secondi senza puntatore, e sempre sul telefono quando nessuno tocca, il punto da inseguire percorre una curva lenta e il rigonfiamento passeggia. Quando tutte le altezze sono tornate a zero lo script smette di calcolare e di disegnare.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`BALL`	script.js	`0.05`	Il raggio del rigonfiamento, in larghezze di pagina.
`REST`	script.js	`0.9`	Quanto resta alta la coperta sopra un puntatore fermo: a 0 il rigonfiamento c’è solo mentre ci si muove.
`CHASE, SLACK, TAUT`	script.js	`7, 0.025, 0.08`	La rincorsa: quanto in fretta la lana raggiunge il puntatore, quanto vantaggio serve perché cominci a tirare e quanto ancora per tirare al massimo.
`SETTLE, SPREAD`	script.js	`4, 40`	Quanto in fretta un rigonfiamento si abbassa e quanto in fretta si allarga nella stoffa intorno, al secondo.
`PUSH, LIGHT`	script.js	`0.045, 1.2`	Di quanto il disegno scivola su una pendenza e quanto forte la luce la segna. Negativi, il rigonfiamento diventa una fossa.
`LEASH`	script.js	`0.5, 0.78`	Fin dove l’effetto è pieno e dove finisce, in larghezze di pagina dal centro: serve a tenerlo lontano dai bordi.
`WANDER, SHAKE`	script.js	`4, 1.2`	I secondi senza puntatore prima della passeggiata e la durata dell’onda iniziale; a 0 si tolgono.
`THREAD, WOOL`	script.js	`2 / cammello, panna, ruggine, inchiostro, muschio`	La larghezza di un filo in pixel (la grandezza dei quadri) e i cinque colori della lana.
`SETT`	script.js	`128 fili`	L’ordine dei fili di un quadro, colore e quantità: devono fare 128 in tutto.

Provali nel Playground

Quando usarla

Per una sezione d’apertura fatta di una sola immagine o di un motivo: tessuti, carta, mappe, un manifesto. Vuole qualcosa con linee dritte e toni medi, perché è sulle linee che si vede la piega e sui toni medi che la luce lavora; sul bianco pieno e sul nero resta quasi invisibile.

Sul telefono

Segue il dito finché è appoggiato; quando nessuno tocca, dopo quattro secondi il rigonfiamento passeggia da solo. La griglia scende a 160 colonne e resta una sola etichetta in basso.

Con il movimento ridotto

La coperta è ferma: niente onda iniziale, niente rigonfiamento, niente passeggiata, e le etichette compaiono senza muoversi.

Trappole

Se la griglia vivesse in una texture a 8 bit, le altezze basse non scenderebbero più: 3 su 255 per 0,93 torna 3. Qui vive in un Float32Array e alla scheda video ne va solo una copia da guardare.
Un decadimento scritto come «moltiplica per 0,93 a ogni fotogramma» va il doppio più in fretta su uno schermo a 120 Hz. Si scrive e^(−velocità · dt), e anche il timbro si moltiplica per dt.
Senza un tetto alle altezze (1,5) una mano che gira sul posto carica la coperta all’infinito.
La luce è una moltiplicazione: sul quasi bianco la metà chiara si brucia e resta solo l’ombra, e il rigonfiamento sembra una macchia. Vicino al bianco la luce si spegne.
UNPACK_FLIP_Y_WEBGL vale anche per i dati grezzi: la griglia ha la riga zero in basso, i canvas in alto. Va rimesso a posto prima di ogni caricamento.

Librerie

Fraunces (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 8,6 KB, e non servono librerie.

Collaudo

Provata il 30 settembre 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.