La scia di quadretti

Hover, TestoGSAP, Solo CSSMediaPeso compresso: Demo 4,5 KBGSAP 28 KBGratisScarica lo zip

Una pagina chiara con una parola sola, nello stile minimal: dove passa il puntatore la pagina diventa una griglia di pixel quadrati che si accendono in nero, con la parola in negativo dentro, e un attimo dopo si spengono rimpicciolendo. Il pixel sotto il puntatore è l’unico a colori.

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 trail of pixels</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bitcount-prop-single@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- warm paper and one word. Where the pointer passes, the page turns into a grid of square pixels that switch on
       in ink, with the word in negative inside them, and switch off by shrinking a moment later. The pixel under the
       pointer is the only one in colour -->
  <main class="palco" data-palco>
    <header class="testa">
      <span class="marchio">Pixmoor</span>
      <span class="nota" data-nota>Move across the page</span>
    </header>

    <p class="parola" aria-hidden="true">Ready?</p>
    <svg class="celle" data-celle aria-hidden="true">
      <path class="celle__pieno" data-pieno d="" />
      <rect class="celle__cursore" data-cursore width="0" height="0" />
    </svg>
    <h1 class="parola parola--sopra" data-sopra>Ready?</h1>
  </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.

16 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 «La scia di quadretti» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Sul bianco caldo c’è solo la parola Ready? in un carattere a pixel, grande, e il nome di uno studio di videogiochi inventato, Pixmoor. Muovendo il puntatore, la pagina si legge attraverso una griglia di quadretti da 25 pixel: ogni movimento lascia un’impronta tonda e morbida che svanisce in sette decimi di secondo, e un quadretto si accende, tutto e subito, quando le impronte sopra di lui superano una soglia. I quadretti accesi sono neri e dentro la parola si legge in bianco, in negativo. Appena un quadretto resta scoperto si spegne rimpicciolendo verso il suo centro, così la scia evapora pixel per pixel. Quello sotto il puntatore è viola, come il cursore di un gioco. Se nessuno muove niente per due secondi, un puntatore fantasma disegna degli anelli da solo.

Come funziona

Le impronte

Ogni movimento del puntatore lascia un’impronta: un punto, un tempo e un pennello tondo largo STAMP pixel, pieno al centro e nullo sul bordo. Un movimento veloce lascia un’impronta per ogni tratto, così la scia è una riga e non una fila di punti. Al massimo ne vivono 150, come sul sito; ognuna sbiadisce in LIFE secondi.

La griglia

A ogni fotogramma ogni quadretto somma le impronte che ha sopra, ognuna pesata dalla distanza e da quanto è vecchia. Se la somma supera THRESHOLD il quadretto è acceso, tutto e subito: niente sfumature, è questo che fa il pixel.

Il disegno

I quadretti accesi diventano un solo tracciato SVG, un quadrato per cella. Lo stesso tracciato fa da clip-path a una seconda copia della parola, color carta, messa sopra: così dentro i pixel la parola si legge in negativo. Un quadretto che si spegne rimpicciolisce verso il centro in SHRINK secondi; uno che si accende arriva più grande di POP e si assesta.

Il fantasma

Se il puntatore resta fermo per due secondi, un puntatore fantasma percorre un anello di Lissajous sulla parola, con le stesse impronte. Al primo movimento vero si fa da parte.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`CELL`	script.js	`25`	Il lato di un pixel, in pixel (sul telefono scende fino a sei decimi).
`STAMP`	script.js	`125`	La larghezza dell’impronta che lascia ogni movimento.
`LIFE`	script.js	`0.7`	I secondi in cui un’impronta sbiadisce.
`THRESHOLD`	script.js	`0.2`	Quanto devono sommare le impronte perché un pixel si accenda.
`SHRINK`	script.js	`0.2`	I secondi in cui un pixel rimpicciolisce spegnendosi.
`POP`	script.js	`0.08`	Di quanto un pixel arriva più grande prima di assestarsi.
`CURSOR`	script.js	`true`	Il pixel sotto il puntatore nel colore d’accento.
`GHOST`	script.js	`true`	Il puntatore fantasma quando nessuno si muove.

Provali nel Playground

Quando usarla

Per la prima schermata di uno studio di videogiochi, di un’app o di una pagina d’evento: una parola sola, e la pagina che risponde al puntatore come uno schermo a pixel.

Sul telefono

Uguale: la scia segue il dito che trascina, con i pixel e l’impronta più piccoli; da solo gira il fantasma.

Con il movimento ridotto

La scia segue ancora il puntatore, ma i pixel si spengono di colpo invece di rimpicciolire, non fanno il piccolo salto d’arrivo e il fantasma non parte.

Trappole

Con un’impronta per evento la scia di un movimento veloce è una fila di punti: fra un evento e l’altro vanno messe le impronte di mezzo.
Il canvas non sa usare gli assi di un carattere variabile: la parola resta nel DOM, e per il negativo si usa una seconda copia con clip-path: path(), che si aggiorna con lo stesso tracciato dei pixel.
La griglia va centrata nella pagina e ricalcolata al resize, altrimenti i pixel non combaciano più con la parola.
Sul telefono serve touch-action: none sul palco, o il dito fa scorrere la pagina invece di disegnare.

Librerie

GSAP 3.15.0, Bitcount Prop Single (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

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

Collaudo

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