Il colore che si aggrappa

WebGL, HoverWebGL, CanvasImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

Un’immagine stampata in grigio. Il puntatore smuove un fluido che riporta i colori dove passa; il colore resta molto più a lungo sulle cose vicine, che lo prendono anche prima, e i tre piani dell’immagine si spostano un poco col puntatore.

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>Colour that clings</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/barlow@5.3.0/400.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/barlow@5.3.0/600.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="bar">
    <a class="brand" href="#">Highfield Balloon Week</a>
    <nav class="bar__nav" aria-label="Sections">
      <a href="#">Programme</a>
      <a href="#">Flights</a>
      <a href="#">Visit</a>
    </nav>
  </header>

  <!-- the picture: three layers drawn by the script (sky, hills, the big balloon), grey until the pointer stirs colour in -->
  <main class="stage" data-stage>
    <canvas class="stage__canvas" data-canvas aria-hidden="true"></canvas>
    <div class="stage__copy">
      <p class="kicker">14–17 September · Highfield Downs</p>
      <h1 class="title">Up before <em>the sun.</em></h1>
      <p class="note" data-hint>Run the pointer over the picture: the colour follows it, and stays longest on what is closest.</p>
    </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.

26 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 colore che si aggrappa» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

L’apertura di un festival di mongolfiere inventato, Highfield Balloon Week: in basso a sinistra «Up before the sun.», tutto il resto è un’immagine disegnata dallo script e stampata in grigio. Un cielo d’alba con otto mongolfiere lontane, colline con alberi, un fienile rosso e tre mongolfiere a metà strada, e a destra una grande mongolfiera a spicchi col suo cesto, con l’erba alta davanti. Passando col puntatore si smuove un fluido, e dove arriva il suo colore l’immagine torna a colori, con un bordo netto. Sul cielo il colore se ne va in un secondo e mezzo; sulla grande mongolfiera, che è vicina, resta diversi secondi, e la mongolfiera si colora anche con meno fluido. Intanto i tre piani dell’immagine si spostano appena col puntatore, quelli vicini più di quelli lontani. Al telefono si dipinge col dito.

Come funziona

L’immagine in tre piani

Lo script disegna l’immagine su tre canvas, il cielo con le mongolfiere lontane, le colline con quelle a metà strada, la grande mongolfiera con l’erba, e una volta ancora tutta insieme in grigi per la profondità: bianco vicino, nero lontano. Le quattro tele diventano trame WebGL; alla misura nuova dello schermo si ridisegnano.

Il fluido

È un fluido in WebGL2 su una griglia di GRID celle per pixel, a mezza precisione. Il pennello versa velocità (FORCE per ogni pixel di movimento) e colore (DYE per tocco), in più tocchi lungo i tratti veloci; poi i vortici (CURL), la divergenza, ITERATIONS passi di pressione, il gradiente e il trasporto. Velocità e colore restano a VELOCITY_FADE e TRAIL_FADE ogni sessantesimo di secondo.

La profondità nel fluido

La profondità cambia il fluido in tre punti. Sulle cose vicine il colore sbiadisce molto meno: il suo fattore va verso 0,998 in proporzione a profondità per CLING. Le cose vicine si colorano prima: la soglia è THRESHOLD per (1 meno BIAS per la profondità). E spingono il fluido da parte: alla pressione si aggiunge BLOCK per la profondità.

Lo schermo

Lo shader legge i tre piani spostati in proporzione alla loro profondità (PARALLAX per la posizione del puntatore, inseguita con un ritardo), li sovrappone, e li mostra in grigio, la luminanza per GREY, o a colori dove il colore del fluido supera la soglia, con un bordo largo (1 meno EDGE) per 0,35. Un piccolo ingrandimento tiene nascosti i bordi quando i piani si spostano.

Quando si ferma

Dopo l’ultimo movimento il fluido gira finché il colore sulle cose più vicine non è sparito, circa 14 secondi con questi valori; poi i campi si azzerano e i fotogrammi si fermano finché il puntatore non torna.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`BRUSH`	script.js	`2.8`	La misura del pennello, in millesimi dell’altezza dell’immagine al quadrato.
`FORCE`	script.js	`3`	Quanto spinge il fluido il puntatore, per ogni pixel di movimento.
`DYE`	script.js	`0.65`	Quanto colore versa ogni tocco del pennello.
`CURL`	script.js	`4`	Quanto si arriccia il fluido (0 = niente vortici).
`VELOCITY_FADE`	script.js	`0.906`	Quanta velocità resta dopo ogni sessantesimo di secondo.
`TRAIL_FADE`	script.js	`0.947`	Quanto colore resta dopo ogni sessantesimo di secondo sulle cose lontane.
`CLING`	script.js	`0.9`	Quanto si aggrappa il colore alle cose vicine: 0 = come su quelle lontane, 1 = quasi non sbiadisce.
`BLOCK`	script.js	`0.33`	Quanto le cose vicine spingono da parte il fluido.
`BIAS`	script.js	`0.9`	Quanto prima si colorano le cose vicine.
`THRESHOLD`	script.js	`0.66`	Quanto colore serve a una cosa lontana perché si veda a colori.
`EDGE`	script.js	`0.97`	Quanto è netto il bordo del colore (0 = morbido, 1 = netto).
`GREY`	script.js	`0.92`	La luminosità della stampa in grigio.
`PARALLAX`	script.js	`0.015`	Quanto si spostano i piani col puntatore.
`ITERATIONS`	script.js	`12`	I passi della pressione: più passi, fluido più preciso.
`GRID`	script.js	`0.4`	Le celle del fluido per ogni pixel dello schermo.

Provali nel Playground

Quando usarla

Per un’immagine che deve invitare a toccarla: un luogo, un prodotto, una persona in apertura. Rende meglio con una scena che ha dei piani: la cosa vicina tiene il colore, lo sfondo lo perde in fretta.

Sul telefono

Senza puntatore si dipinge col dito: sull’immagine il dito non fa scorrere la pagina. I piani si spostano seguendo il dito, il pennello è lo stesso.

Con il movimento ridotto

Niente fluido e niente piani che si spostano: l’immagine c’è subito, ferma e a colori.

Trappole

Le trame del fluido sono a mezza precisione: prima di partire si prova che un bersaglio RGBA16F si possa scrivere, altrimenti l’immagine si mostra a colori senza fluido.
Una tela che ha già provato WebGL non sa più disegnare in 2D: per il ripiego ci vuole una tela nuova al suo posto.
La profondità sotto il punto va letta con lo stesso spostamento del suo piano, così il bordo del colore resta attaccato alla cosa quando i piani si muovono.
Senza la profondità il fluido colora tutto allo stesso modo: è il colore che dura di più sulle cose vicine, e che lì arriva prima, a farlo sembrare aggrappato.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Barlow 5.3.0.

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

Collaudo

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