Il titolo scritto col gesso

Testo, SVGCanvas, GSAPImpegnativaPeso compresso: Demo 20 KBGSAP 28 KBGratisScarica lo zip

Una lavagna verde con la cornice di legno: un gessetto scrive il titolo in corsivo, con il tratto granuloso e la polvere che cade, si consuma, si spezza a metà e un pezzo rimbalza sul vassoio; sotto disegna uno schizzo. Poi passa il cancellino, lascia l’alone bianco e si scrive la frase dopo. Un clic manda subito il cancellino.

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 title written in chalk</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/familjen-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <!-- the phrase on the board, for screen readers: the script keeps it in step with what the chalk writes -->
    <h1 class="leggibile" data-reader>Fresh coffee all day</h1>
    <!-- the slate: its texture, the chalk, the dust and the white haze the eraser leaves are painted on this canvas -->
    <canvas class="lavagna" data-board aria-hidden="true"></canvas>
    <!-- the wooden frame, the tray, the stick of chalk, its broken pieces and the eraser: the script sizes them -->
    <svg class="cornice" data-stage aria-hidden="true">
      <defs>
        <filter id="grana-orizzontale" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
          <feTurbulence type="fractalNoise" baseFrequency="0.006 0.22" numOctaves="3" seed="4" result="rumore" />
          <feColorMatrix in="rumore" type="matrix" values="0 0 0 0 0.24  0 0 0 0 0.13  0 0 0 0 0.06  0 0 0 1.5 -0.55" result="venature" />
          <feComposite in="venature" in2="SourceGraphic" operator="atop" />
        </filter>
        <filter id="grana-verticale" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
          <feTurbulence type="fractalNoise" baseFrequency="0.22 0.006" numOctaves="3" seed="9" result="rumore" />
          <feColorMatrix in="rumore" type="matrix" values="0 0 0 0 0.24  0 0 0 0 0.13  0 0 0 0 0.06  0 0 0 1.5 -0.55" result="venature" />
          <feComposite in="venature" in2="SourceGraphic" operator="atop" />
        </filter>
        <filter id="polvere-sul-gesso" x="-0.1" y="-0.3" width="1.2" height="1.6" color-interpolation-filters="sRGB">
          <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" seed="2" result="rumore" />
          <feColorMatrix in="rumore" type="matrix" values="0 0 0 0 0.55  0 0 0 0 0.53  0 0 0 0 0.48  0 0 0 2.2 -1.25" result="puntini" />
          <feComposite in="puntini" in2="SourceGraphic" operator="atop" />
        </filter>
        <filter id="ombra-morbida" x="-0.5" y="-0.5" width="2" height="2">
          <feGaussianBlur stdDeviation="2.6" />
        </filter>
        <linearGradient id="gesso" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" style="stop-color: var(--chalk-light)" />
          <stop offset="0.45" style="stop-color: var(--chalk)" />
          <stop offset="1" style="stop-color: var(--chalk-shade)" />
        </linearGradient>
        <linearGradient id="legno-cornice" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" style="stop-color: var(--wood-light)" />
          <stop offset="0.5" style="stop-color: var(--wood)" />
          <stop offset="1" style="stop-color: var(--wood-dark)" />
        </linearGradient>
        <linearGradient id="legno-lato" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" style="stop-color: var(--wood-light)" />
          <stop offset="0.55" style="stop-color: var(--wood)" />
          <stop offset="1" style="stop-color: var(--wood-dark)" />
        </linearGradient>
        <linearGradient id="legno-cancellino" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" style="stop-color: var(--eraser-light)" />
          <stop offset="0.6" style="stop-color: var(--eraser)" />
          <stop offset="1" style="stop-color: var(--eraser-dark)" />
        </linearGradient>
      </defs>
      <g data-tray-back></g>
      <g data-objects></g>
      <g data-front></g>
    </svg>
    <p class="nota" data-hint>Click or tap to wipe the board</p>
  </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 titolo scritto col gesso» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Tutta la finestra è una lavagna d’ardesia verde, con le macchie più chiare e più scure, la grana fine, gli angoli in ombra e i fantasmi delle scritte cancellate tanto tempo fa, chiusa in una cornice di legno con le venature. In basso c’è il vassoio: a sinistra il cancellino, sdraiato sul feltro, a destra un gessetto nuovo. Il gessetto si dondola, si alza, gira verso la lavagna e comincia a scrivere in corsivo la frase di un caffè inventato, Fresh coffee all day, tratto dopo tratto: le lettere attaccate escono in un tratto solo, i puntini delle i e le stanghette delle t arrivano alla fine della parola, come li fa una mano. Il tratto è granuloso, con i buchi dove il gesso salta sui pori della lavagna, più sottile all’attacco e alla fine; dalla punta cade la polvere, e il gessetto si inclina seguendo il movimento e si accorcia mentre scrive. A metà della frase si ferma, preme, gli compare una crepa, trema e si spezza: la metà davanti cade, gira su sé stessa, rimbalza due o tre volte sul vassoio in una nuvoletta di polvere e resta lì; l’altra metà ha un sussulto e continua a scrivere con la punta spezzata, che fa un tratto più largo. Sotto la frase disegna una tazzina col piattino e il vapore, poi torna a sdraiarsi nel vassoio con un piccolo rimbalzo. Dopo un paio di secondi si alza il cancellino, gira il feltro verso la lavagna e la pulisce a righe, avanti e indietro, inclinandosi a ogni cambio di direzione e sbuffando polvere: il gesso sparisce ma resta un alone bianco, sbavato nel verso del cancellino. Il gessetto, più corto, scrive sopra l’alone la seconda frase, Lemon cake, baked today, con un limone e la sua foglia. Alla fine il cancellino ripulisce la lavagna, scende nel vassoio, ci passa sopra spingendo fuori il mozzicone e il pezzo spezzato, torna al suo posto, l’alone svanisce e scivola dentro un gessetto nuovo: si ricomincia. Un clic, quando vuoi, rimanda il gessetto nel vassoio e fa passare subito il cancellino.

Come funziona

Un corsivo a tratto unico

Le lettere sono l’alfabeto Hershey Script a un tratto (dei primi anni Sessanta, libero da usare con la sua nota d’origine), scritto nello script come numeri: per ogni lettera la larghezza e i tratti, punti uniti da righe, con la riga di base a zero e le minuscole alte 9 unità. Le lettere corsive finiscono dove comincia la successiva, quindi i tratti che si toccano si uniscono in uno solo: una parola esce senza alzare il gesso. Il puntino della i e la stanghetta della t si spostano in fondo alla parola. Ogni tratto passa tre volte per l’algoritmo di Chaikin, che smussa gli spigoli, e tiene le lunghezze progressive, così si sa dov’è la punta a ogni istante. La frase va a capo su una, due, tre o quattro righe: vince il numero di righe che la fa più grande.

Il tratto di gesso

Il gesso si deposita a colpetti su una canvas: ogni pochi pixel di tracciato tre cerchietti spostati a caso e semitrasparenti, più piccoli all’inizio e alla fine del tratto e con una pressione che ondeggia piano. Ogni fotogramma questa canvas si copia su un’altra e si passa con destination-in sopra un motivo di rumore (una tessera di 160 pixel con le zone più e meno piene e il 16% di buchi): sono i pori della lavagna, fermi rispetto alla lavagna, dove il gesso salta. La polvere sono puntini con la gravità che nascono dalla punta mentre scrive.

Il gessetto che si spezza

Il gessetto è un tracciato SVG costruito dalla sua lunghezza, con la punta tonda o spezzata (una spezzata a caso) e un gradiente da un lato all’altro; il dondolio è l’angolo di scrittura più un’inclinazione che segue la velocità, smorzata. Si accorcia di un tanto per ogni pixel scritto. Al punto della rottura una timeline fa comparire la crepa e lo fa tremare, poi lo spezza: la metà davanti diventa un pezzo a sé, che cade con una piccola simulazione (gravità, rimbalzi che perdono il 64%, rotazione fino a sdraiarsi) calcolata una volta e rimessa in scena da un tween, così il tempo lo comanda GSAP; la metà rimasta si sposta della mezza lunghezza ed è identica a com’era, quindi non si vede nessun salto.

Il cancellino e l’alone

Quando parte il cancellino, una copia della scritta si rimpicciolisce a un sesto: ingrandita di nuovo è una scritta sfocata. Il cancellino va a righe con tween sine.inOut e a ogni fotogramma, a passi brevi lungo il percorso, toglie il gesso con destination-out e, ritagliato nella sua sagoma, stende sulla canvas dell’alone un velo di quella copia sfocata, spostata un poco all’indietro, più le righine del feltro. Ogni passata toglie metà del gesso: dopo due o tre resta solo un filo, come succede davvero. Nel vassoio il cancellino è di profilo; per girarsi verso la lavagna si schiaccia in altezza e riappare dal lato del feltro.

La regia

Ogni giro è una timeline sola: il gessetto si alza, scrive tratto per tratto (un tween per tratto, con la durata data dalla lunghezza, e un salto per ogni stacco), torna nel vassoio, aspetta, passa il cancellino; per ogni frase lo stesso. Alla fine il cancellino spinge fuori dal vassoio i pezzi, l’alone e il gesso rimasto svaniscono e alla fine della timeline il giro ricomincia identico, con lo stesso caso. Il clic ferma la timeline e ne costruisce una nuova che parte dal cancellino. La cornice e il vassoio sono rettangoli SVG con un feTurbulence stirato che fa le venature; il vassoio ha il bordo davanti sopra gli oggetti, così quello che cade ci finisce dentro.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PHRASES`	script.js	`['Fresh coffee all day', 'Lemon cake, baked today']`	Le frasi scritte sulla lavagna, una dopo l’altra: il cancellino cancella ognuna e il gesso scrive la seguente. Lettere, numeri e i segni . , ' ! ? : - & / ( ).
`SKETCH`	script.js	`true`	Lo schizzo sotto ogni frase: una tazzina di caffè, poi un limone (con false resta solo la frase, più grande).
`WRITE_SPEED`	script.js	`1`	La velocità del gesso: 2 scrive il doppio più in fretta, 0.5 la metà.
`BREAK`	script.js	`true`	Se il gessetto si spezza a metà della prima frase.
`DUST`	script.js	`1`	Quanta polvere di gesso cade dalla punta e sbuffa dal cancellino (0 = niente).
`HAZE`	script.js	`1`	Quanto alone bianco lascia il cancellino (0 = lavagna pulita, 2 = la scritta resta ben leggibile sotto la nuova).
`REST`	script.js	`1.8`	Quanti secondi la frase finita resta sulla lavagna prima che arrivi il cancellino.

Provali nel Playground

Quando usarla

Per aprire la pagina di un bar, di un caffè, di una pasticceria o di un ristorante col menu del giorno, di una scuola, di un corso o di una libreria; per un annuncio che cambia, come il piatto del giorno o l’orario; per un post o una storia con un tocco fatto a mano.

Sul telefono

La stessa animazione con le misure adattate: la frase va a capo su due o tre righe per restare grande, lo schizzo si rimpicciolisce, il gessetto, il cancellino e il vassoio si misurano sul lato corto dello schermo. Un tocco manda il cancellino.

Con il movimento ridotto

Niente si muove: il gessetto e il cancellino restano nel vassoio, la frase e lo schizzo compaiono già scritti in dissolvenza, poi svaniscono lasciando l’alone e compare la frase dopo; alla fine anche l’alone svanisce.

Trappole

Con i caratteri Hershey così come sono, il puntino della i arrivava prima della lettera, perché nel disegno originale è il primo tratto: puntini e stanghette si spostano in fondo alla parola.
Le lettere sono polilinee su una griglia di unità intere: ingrandite si vedevano gli spigoli. Tre passate di Chaikin le arrotondano senza spostare l’inizio e la fine, così le lettere restano attaccate.
Il cancellino che si muove a scatti (il video si registra a 30 fotogrammi al secondo) lasciava strisce di gesso fra una posizione e l’altra: si cancella a passi brevi lungo tutto il tratto percorso nel fotogramma.
Il pezzo spezzato poteva finire sopra il gessetto sdraiato o sul cancellino: la simulazione si fa una volta e poi tutto il percorso si sposta piano piano, con una curva morbida, perché si fermi nel punto libero del vassoio.
Il filtro blur della canvas non c’è in Safari: l’alone sfocato si fa rimpicciolendo la scritta a un sesto e ingrandendola di nuovo.
Il colore del gradiente SVG scritto come attributo (stop-color="var(--chalk)") non legge le variabili CSS: va in style.

Librerie

GSAP 3.15.0, Familjen Grotesk (font variabile) 5.3.0.

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

Collaudo

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