I caratteri strappati

WebGL, HoverWebGLImpegnativaPeso compresso: Demo 7,8 KBGSAP 28 KBGratisScarica lo zip

Un campo di caratteri in WebGL, raccolto in isole come una mappa, che il puntatore strappa via: resta una scia di buchi dal bordo sfilacciato che si richiude da sola.

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="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>I caratteri strappati</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="palco" data-palco>
    <!-- il campo di caratteri, in WebGL, sotto a tutto: il puntatore ci strappa dei buchi -->
    <canvas class="campo" data-campo aria-hidden="true"></canvas>

    <header class="testa">
      <p class="testa__riga"><span class="maschera"><span data-entra>Mostra di foto venute male</span></span></p>
      <p class="testa__riga testa__riga--destra"><span class="maschera"><span data-entra>Dal 3 al 26 ottobre</span></span><span class="maschera"><span data-entra>Ingresso libero</span></span></p>
    </header>

    <div class="piede">
      <h1 class="titolo" aria-label="Scarti"><span class="maschera" aria-hidden="true"><span data-titolo>Scarti</span></span></h1>
      <div class="piede__lato">
        <p class="sottotitolo"><span class="maschera"><span data-entra>Mosse, storte, sfocate, col pollice davanti: le foto che nessuno ha voluto, appese come quadri.</span></span></p>
        <p class="nota" data-nota>Muovi il puntatore: dove passa, i caratteri si strappano via e poi ricrescono.</p>
      </div>
    </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.

27 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 «I caratteri strappati» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina color carta con il titolo della mostra, Scarti, e sotto un campo di caratteri blu: punti, trattini, croci, cancelletti e chiocciole che si raccolgono in isole come le curve di livello di una mappa, e strisciano piano. Dove passa il puntatore i caratteri si strappano via: resta una scia di buchi dal bordo sfilacciato, che dietro si richiude in poco più di mezzo secondo. Intorno alle scritte piccole il campo si dirada, così si leggono. Finché nessuno muove il puntatore, un fantasma disegna la scia da solo.

Come funziona

Due passaggi

Il campo si disegna in due passaggi WebGL. Nel primo ogni cella dello schermo, 9 px di lato, è un solo pixel di una texture piccola, e lo shader ci scrive la sua densità. Nel secondo, a piena risoluzione, ogni pixel trova la sua cella, legge la densità e prende il glifo da un atlante: una striscia di canvas con i caratteri della rampa, ognuno nel suo quadrato di pixel veri.

La densità

È un livello di 0,57, più fitto in basso di 0,22, più un rumore a valori in tre dimensioni (la terza è il tempo) su quattro ottave, che la sposta di 0,62. Un contrasto di 2,3 la raccoglie in isole piene con il vuoto intorno. Dieci volte al secondo ogni cella trema un poco, solo dove c’è già qualcosa: i bordi delle isole restano vivi.

La scia

Il buco sotto il puntatore è largo 0,085 altezze dello schermo e lo insegue con 0,06 secondi di ritardo. Ogni 0,3 raggi di strada, e non più spesso di 30 ms, si posa un segno che vive 0,7 secondi: resta quasi pieno e poi si stringe in fretta. Buco e segni, al massimo 24, arrivano allo shader come un array di vec4: posizione, raggio e un seme per il contorno bitorzoluto.

Lo strappo

Per ogni cella lo shader prende la distanza dal segno più vicino e, prima della soglia, le somma un rumore con le ottave alte più pesanti del solito: il bordo non ondeggia, si rompe in schegge. Dove la distanza scende sotto zero la densità va a zero e la cella cade sul carattere vuoto.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`CELLA`	script.js	`9`	Il lato di un carattere, in px.
`RAMPA`	script.js	`' .:-=+xo%#@'`	I caratteri dal vuoto al pieno: il primo è lo spazio.
`CONTRASTO`	script.js	`2.3`	Quanto la densità si raccoglie in isole.
`LIVELLO, PENDENZA`	script.js	`0.57, 0.22`	Quanto è fitto il campo, e quanto di più in basso.
`RUMORE, SCALA`	script.js	`0.62, 2.4`	Quanto il rumore sposta la densità e quanto sono piccole le isole.
`RAGGIO`	script.js	`0.085`	Il buco sotto il puntatore, in altezze dello schermo.
`VITA, PASSO`	script.js	`0.7, 0.3`	Quanto vive un segno della scia e ogni quanta strada se ne posa uno.
`STRAPPO, TRAMA`	script.js	`0.13, 7`	Quanto il rumore strappa il bordo e quanto sono fini le schegge.

Provali nel Playground

Quando usarla

Per il fondo di una pagina che vuole un carattere forte: un portfolio, una mostra, un festival, una pagina di errore. Rende di più dove la pagina è corta e c’è spazio vuoto da riempire.

Sul telefono

Il dito disegna mentre tocca: la pagina è alta una schermata e il trascinamento non la scorre. Quando il dito si alza, dopo due secondi e mezzo torna il fantasma.

Con il movimento ridotto

Il campo è fermo, senza fantasma e senza scia: resta solo il buco sotto il puntatore, che si sposta quando lo sposti tu.

Trappole

Non si calcola il rumore per ogni pixel: una cella di 9 px sono 81 pixel, 324 su uno schermo retina, che darebbero tutti lo stesso numero. Una texture con un pixel per cella fa lo stesso lavoro centinaia di volte più in fretta.
L’atlante va disegnato a pixel veri, col lato della cella per devicePixelRatio arrotondato, e letto con NEAREST: con LINEAR o con una misura frazionaria i glifi si impastano.
Quando si passa dal fantasma al puntatore vero il buco non deve correre dall’uno all’altro: si spegne, rinasce sotto il puntatore e si riaccende, se no la scia tira una riga dritta attraverso lo schermo.
Il rumore sommato dopo la soglia sporca il bordo; sommato prima, alla distanza, lo strappa.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

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