Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
La parola d’argilla
Animazione nello stile minimal: una parola grande di argilla grigia ancora morbida, su un tavolo bianco caldo. Il dito la preme e lascia impronte con le creste del polpastrello, trascinando disegna un solco, la luce radente segue la mano; ogni tanto un filo per tagliare la creta, l’unico accento terracotta, passa e liscia tutto.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kiln</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a word made of soft grey clay on a warm white table: a finger presses prints into it, a drag draws a groove,
the raking light follows the hand, and a cutting wire sweeps across and smooths the clay again -->
<main class="pagina" data-pagina>
<canvas class="tela" aria-hidden="true" data-tela></canvas>
<header class="testa">
<p class="marchio" data-entra>Kiln</p>
<p class="testa__nota" data-entra>Pottery studio · open Sundays</p>
</header>
<h1 class="parola" data-parola>Kiln</h1>
<footer class="piede">
<p class="nota" data-entra data-nota>Press the clay, drag to draw a groove</p>
<p class="stato" data-entra><span class="stato__nome">Clay</span> <span class="stato__valore" data-stato>soft</span></p>
</footer>
</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.
20 valori da cambiare
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 parola d’argilla» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo con poche scritte piccole in Fraunces: in alto a sinistra il nome di un laboratorio di ceramica inventato, Kiln, a destra «Pottery studio · open Sundays», in basso a sinistra l’invito a premere l’argilla e a destra lo stato della creta. Al centro la parola «Kiln» è un blocco di argilla grigia ancora morbida, con le spalle tonde e la grana della mano che l’ha modellata, e getta un’ombra corta sul tavolo. All’apertura le lettere salgono dal tavolo una alla volta, passano di un pelo e si posano. Poi, se nessuno tocca, un dito arriva come un’ombra morbida e lascia tre impronte: ognuna affonda in un attimo, passa di un poco e torna su di un niente, con le creste del polpastrello in fondo e un orlo di creta spinta ai lati; lo stato conta le impronte. Infine un filo per tagliare la creta, una riga terracotta tesa fra due manici scuri, passa da sinistra a destra piegandosi un poco: dietro di lui l’argilla è di nuovo liscia e luccica per due secondi, come bagnata, e lo stato dice «smooth». Premendo col mouse o col dito si lascia un’impronta dove si vuole, trascinando si disegna un solco; la luce radente gira un poco verso la mano, così le ombre delle impronte cambiano mentre la si muove.
Come funziona
La parola come mappa di altezze
La parola si scrive in un canvas nascosto a mezza risoluzione (al massimo 640 per 520 px), col peso WEIGHT, nel 72% della larghezza (84% sul telefono). Dall’opacità dei pixel, sfocata con tre passate di una sfocatura a scatole, viene l’altezza: piena al centro delle aste, tonda sulle spalle come un rotolo di creta schiacciato (SOFTNESS). Si aggiunge una grana: un rumore lento, i colpi del pollice, e uno fine, la sabbia dell’argilla (GRAIN).
La luce, pixel per pixel
Ogni fotogramma in cui qualcosa cambia, per ogni pixel si calcola la pendenza della mappa e da lì la normale; la luce viene dall’alto a sinistra, radente quanto dice RAKE, e dà chiaro e scuro. Il laplaciano scurisce le conche e schiarisce le creste, un riflesso molto stretto fa luccicare l’argilla bagnata, e il tavolo prende l’ombra guardando tre passi verso la luce. Il risultato va in un ImageData e si disegna grande, con lo smussamento.
L’impronta e il solco
Un’impronta è una conca gaussiana un po’ ovale, girata a caso, con un orlo spinto ai lati e, sul fondo, le creste del polpastrello: un seno dei raggi. È lineare nella profondità, così una tween di GSAP la fa affondare a poco a poco, passare del 5% e tornare indietro. Trascinando, impronte piccole e leggere ogni 0,3 dito fanno il solco. Gli scavi stanno in una mappa a parte, limitata, e valgono solo dove c’è argilla.
Il filo che liscia
Il filo è una riga terracotta disegnata sopra la mappa, piegata con una curva quadratica e due manici scuri. Mentre GSAP lo porta da sinistra a destra in WIRE secondi, le colonne dietro di lui tornano a zero e si segnano come bagnate, poco davanti l’argilla si gonfia un poco. Il bagnato si asciuga in due secondi e intanto fa più forte il riflesso.
Il giro da solo e la mano
Una timeline di GSAP fa salire le lettere una alla volta, poi un giro che si ripete ogni CYCLE secondi: tre impronte con l’ombra del dito che arriva e se ne va, e il filo. Quando il dito vero tocca il giro si ferma; riparte dopo 3,5 secondi senza nessuno. Il puntatore sposta piano la direzione della luce.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Kiln' | La parola d’argilla: corta, sta in una riga. |
WEIGHT | script.js | 820 | Il peso della parola (Fraunces va da 100 a 900). |
SOFTNESS | script.js | 1 | Quanto sono tonde le spalle delle lettere. |
DENT | script.js | 1 | Quanto affonda il dito. |
FINGER | script.js | 22 | La misura del polpastrello, in px. |
GRAIN | script.js | 1 | Quanto si vede la grana dell’argilla. |
RAKE | script.js | 1 | Quanto è radente la luce: più alto, ombre più lunghe. |
WIRE | script.js | 1.6 | In quanti secondi il filo attraversa la parola. |
CYCLE | script.js | 11 | Ogni quanti secondi, senza nessuno, tornano le impronte e il filo. |
Quando usarla
Come apertura di un laboratorio di ceramica, di un vasaio, di un corso di modellato, di un negozio di oggetti fatti a mano o di uno studio di design che lavora coi materiali; ovunque una parola sola deve sembrare fatta con le mani e farsi toccare.
Sul telefono
Uguale col dito: toccando si lascia un’impronta, trascinando un solco. La parola sta nell’84% della larghezza e la mappa resta a mezza risoluzione. Sopra la demo il dito preme l’argilla e non scorre la pagina.
Con il movimento ridotto
La parola d’argilla è già alzata, con un’impronta sola, e compare in dissolvenza; niente dito automatico né filo. Toccando l’impronta appare subito, senza affondare.
Trappole
- La luce si calcola solo quando qualcosa cambia (la luce, un’impronta, il filo, il bagnato): pixel per pixel ogni fotogramma, su uno schermo grande, sarebbe troppo.
- Gli scavi vanno limitati (fino all’85% dell’altezza in giù e al 45% in su), se no trascinando a lungo nello stesso punto l’argilla buca il tavolo.
- L’impronta deve valere solo dove c’è argilla: sul tavolo il dito non lascia niente, e sul bordo delle lettere l’impronta si sfuma con l’altezza.
- canvas.filter per la sfocatura non c’è su tutti i browser: la sfocatura a scatole fatta a mano dà le stesse spalle tonde ovunque.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 23 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.
