Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Il titolo di plastilina
Un titolo di plastilina colorata girato in stop-motion, a dodici fotogrammi al secondo: le palline cadono, si schiacciano, si arrotolano in salsicciotti e si piegano nelle lettere, che poi respirano. Il puntatore lascia l’impronta del pollice, che si riempie piano; un clic appallottola una lettera e la rifà.
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>The plasticine title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena" data-scene>
<!-- the title, for screen readers: the clay letters are painted on the canvas -->
<h1 class="leggibile" data-reader>LUMPY</h1>
<!-- the table, the balls of clay and the letters: all painted on this canvas -->
<canvas class="tavolo" data-stage aria-hidden="true"></canvas>
<p class="marca" data-brand>
<span class="marca__nome">Pictures</span>
<span class="marca__riga">A stop-motion studio. Every frame made by hand.</span>
</p>
<p class="nota" data-hint>Press a letter with the pointer, click to squash it</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.
23 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 «Il titolo di plastilina» da Animorio e adattala al mio sitoCosa fa
Su una tavoletta da modellare color crema cadono dall’alto cinque palline di plastilina, rossa, gialla, blu, verde e rosa (la Y ne ha due, una per tratto). Mentre scendono la loro ombra morbida le aspetta sulla tavoletta, sfocata e chiara, e si fa più scura man mano che arrivano; toccando il piano si schiacciano, rimbalzano una volta e si assestano con un piccolo tremolio. Poi, una dopo l’altra, vengono arrotolate in un salsicciotto che dondola sotto un palmo invisibile, e il salsicciotto si piega nella sua lettera, dal centro verso le punte, con un ultimo assestamento elastico: nasce la parola LUMPY, e sotto compare il nome di uno studio di animazione inventato, Lumpy Pictures. Tutto si muove a scatti, a dodici fotogrammi al secondo, come un film a passo uno: a ogni fotogramma le lettere sono rimesse a mano un pelo più in là. La plastilina è opaca, con le impronte delle dita, qualche buchino, briciole di altri colori e una luce morbida da sinistra. Le lettere respirano: si allungano e si stringono, poi si accucciano e si allargano, e i salsicciotti ondeggiano appena. Un pollice invisibile preme due volte e lascia l’impronta, coi solchi del polpastrello, che si riempie piano; poi la M viene appallottolata, salta, ricade come pallina e viene rimodellata. Alla fine tutte le lettere tornano palline e vengono sollevate via, e la ripresa ricomincia. Passando col puntatore sulle lettere si lasciano le impronte; un clic appallottola la lettera e la rifà.
Come funziona
Un alfabeto di salsicciotti
Ogni lettera è la linea di mezzo di uno o più salsicciotti, in una scatola alta un’unità: tratti dritti e archi di ellisse scritti a mano, dalla A alla Z. Ogni tratto viene ricampionato a passo fisso e ammorbidito con una media mobile (gli angoli della plastilina non sono mai vivi), così ha sempre lo stesso numero di punti. Per lo stesso tratto si preparano un salsicciotto dritto, con quei punti in fila, e una pallina col volume della plastilina: il raggio è la radice cubica del volume del salsicciotto.
Pallina, salsicciotto, lettera
Una sola cifra per lettera, f, dice la forma: 0 è la pallina, 1 il salsicciotto dritto, 2 la lettera. Fra 0 e 1 i punti si allontanano dal centro e lo spessore passa da quello della pallina a quello del salsicciotto, che intanto dondola di traverso; fra 1 e 2 ogni punto va dalla sua posizione nel salsicciotto a quella nella lettera, prima i punti di mezzo e poi le punte. Appallottolare è un’altra cifra, crush: i punti girano e si stringono verso il centro finché la forma coincide con la pallina, e lì f torna a 0 senza salti.
Dipingere la plastilina
Ogni lettera si disegna su una canvas a parte: prima la sagoma piena (un tratto a linea tonda, più un cerchio dove la plastilina è più grossa), poi, dentro la sagoma con source-atop, un colore più scuro coperto dalla sagoma stessa spostata in alto a sinistra e sfocata, che lascia il bordo in ombra; poi una striscia chiara sfocata lungo il dorso, la trama delle impronte e i difetti. Le sfocature costano: si fanno su una canvas quattro volte più piccola, con l’ombra di una copia disegnata fuori dallo schermo, e si riallargano.
Dodici fotogrammi al secondo
La storia è una timeline GSAP che si ripete; i tween corrono lisci, ma la canvas si ridisegna solo quando cambia il fotogramma, Math.floor del tempo per FPS. A ogni fotogramma le lettere si spostano e girano di un pelo, con numeri casuali che dipendono solo dal numero del fotogramma: la ripresa successiva ha lo stesso tremolio. Il respiro è un seno che allunga in alto e stringe di lato, più un’onda lungo la normale di ogni punto.
L’impronta e il clic
Il puntatore cerca il punto più vicino della lettera; se è sulla plastilina nasce un’impronta, con una profondità che un tween porta a 1 in un attimo e poi a 0 in REFILL secondi. Lì la plastilina si allarga un po’, e sopra si disegna una conca: un gradiente scuro dalla parte della luce, uno chiaro dall’altra e gli archi spezzati del polpastrello. Il clic usa una seconda serie di cifre per la lettera, che si combinano con quelle della storia (il minimo per la forma, il massimo per l’appallottolato), così la lettera si rifà anche mentre la ripresa va avanti.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TITLE | script.js | 'LUMPY' | La parola modellata: lettere dalla A alla Z, una pallina per ogni tratto (gli spazi lasciano un po’ di posto). |
FPS | script.js | 12 | I fotogrammi al secondo dello stop-motion: 12 è il classico, 24 è liscio, 6 molto a scatti. |
SQUISH | script.js | 1 | Quanto affonda l’impronta del puntatore (0 = niente impronte). |
REFILL | script.js | 4 | In quanti secondi l’impronta si riempie. |
BREATHE | script.js | 1 | Quanto le lettere finite respirano e ondeggiano (0 = stanno ferme, salvo il tremolio dei fotogrammi). |
THICKNESS | script.js | 1 | Quanto sono grossi i salsicciotti: 0.7 sottili, 1.4 cicciotti. |
SPEED | script.js | 1 | La velocità di tutta la ripresa: 2 è il doppio, 0.5 la metà. |
HOLD | script.js | 6 | Quanti secondi il titolo finito resta sulla tavoletta prima di tornare palline. |
Quando usarla
Per l’apertura del sito di uno studio di animazione, di un asilo, di una ludoteca, di un negozio di giochi o di un corso di modellismo, per un caricamento lungo, per la sigla di un video o per un post. Funziona con parole corte, da tre a sette lettere: un marchio, PLAY, HELLO, MAKE.
Sul telefono
La stessa ripresa con le misure adattate: la parola prende quasi tutta la larghezza. Trascinando il dito su una lettera si lasciano le impronte, un tocco la appallottola e la rifà.
Con il movimento ridotto
Niente cade, niente si arrotola e non c’è tremolio: le lettere compaiono già modellate, una dopo l’altra in dissolvenza, poi il nome dello studio. Le impronte compaiono e svaniscono senza che la plastilina si muova; un clic fa sparire la lettera in dissolvenza e la fa tornare.
Trappole
- Un salsicciotto disegnato come un unico poligono, coi bordi spostati lungo le normali, si rovesciava nelle curve strette (la O, la S) e lasciava buchi: la sagoma è un tratto a linea tonda più un cerchio dove la plastilina è più grossa, tutti dello stesso colore su una canvas a parte.
- Disegnare l’ombra tratto per tratto, con shadowBlur, la scuriva dove i pezzi si sovrapponevano: prima si disegna la sagoma piena su una canvas, poi si sfoca la canvas intera in un colpo solo.
- Le sfocature su una canvas grande quanto lo schermo, con la densità del Retina, costavano troppo per ogni fotogramma: si fanno su una canvas quattro volte più piccola e si riallargano, la plastilina è morbida e non si vede la differenza.
- Una pallina ancora fuori dallo schermo non ha l’ombra, perché drawImage non copia niente da fuori dalla canvas: l’ombra si disegna dalla sagoma già riportata a terra, sotto il punto dove la pallina atterrerà.
- Le palline sollevate via alla fine lasciavano sulla tavoletta un’ombra enorme e sfocata: l’ombra sparisce mentre la pallina sale oltre una certa altezza.
- Con un tremolio davvero casuale il video dell’anteprima non trovava mai il giro uguale e non si fermava: i numeri casuali dipendono solo dal numero del fotogramma della ripresa, così ogni ripresa è identica alla precedente.
Librerie
GSAP 3.15.0, Fredoka (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 11 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.
