Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Le parole nel barattolo
Nello stile minimal: un barattolo di vetro disegnato con due linee sottili e, a ogni clic, una parola che ci cade dentro, rimbalza e si posa sulle altre con la fisica vera dei corpi rigidi; cadendo è sottile e stretta, atterrando prende peso e larghezza. Il puntatore inclina il barattolo e le parole scivolano sul vetro; vuotandolo, il barattolo si rovescia e le parole escono dalla bocca.
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>Words in the jar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a glass jar drawn with two hairlines: a click drops a word in, the pointer tilts the jar and the words slide -->
<main class="stage" data-stage>
<button class="drop" type="button" data-drop data-autoclic aria-label="Drop a word into the jar"></button>
<!-- the plumb line and the angle of the jar, drawn in the page -->
<svg class="measure" data-measure aria-hidden="true">
<path class="measure__plumb" data-plumb d="" />
<path class="measure__axis" data-axis d="" />
<path class="measure__arc" data-arc d="" />
<text class="measure__label" data-angle x="0" y="0"></text>
</svg>
<!-- the jar and its words: one group, turned by the script around the middle of the jar -->
<div class="jar" data-jar>
<svg class="glass" data-glass aria-hidden="true">
<path class="glass__outer" data-outer d="" />
<path class="glass__inner" data-inner d="" />
<path class="glass__lip" data-lips d="" />
</svg>
<div class="words" data-words aria-live="polite"></div>
</div>
<p class="hint" data-hint>Click to drop a word. Move to tilt the jar.</p>
<button class="empty" type="button" data-empty data-autoclic>
<span class="empty__text" data-empty-text>Empty the jar</span>
</button>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/matter-js@0.20.0/build/matter.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.
25 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 «Le parole nel barattolo» da Animorio e adattala al mio sitoCosa fa
Una pagina bianca calda e, al centro, un barattolo di vetro disegnato come in un disegno tecnico: la parete esterna è una linea nera sottile, quella interna una linea grigia ancora più sottile, e in cima le due linee si chiudono in un piccolo labbro tondo. Le due pareti si disegnano in versi opposti, dal labbro sinistro e da quello destro, e sopra la bocca compare un filo a piombo tratteggiato. Poi cadono dall'alto cinque ingredienti, uno dopo l'altro: flour, salt, honey, rye, fig. Mentre cade, la parola è leggera (wght 300) e stretta (wdth 72), come chi corre; quando tocca il fondo o le altre parole prende peso e larghezza con una molla (wght 640, wdth 100, con un piccolo passaggio oltre e il ritorno), si schiaccia appena, le lettere sentono il colpo dal centro verso i lati e il barattolo stesso scende di un pixel e oscilla un poco dalla parte in cui la parola è caduta. L'ultima arrivata è vermiglia, e torna nera quando ne arriva un'altra. Ogni parola è un corpo rigido vero: rimbalza, si appoggia sulle altre, si inclina contro il vetro. Il barattolo poi si inclina da solo a sinistra e a destra e le parole scivolano sul fondo: sopra la bocca, accanto al filo a piombo, compaiono l'asse del barattolo e un arco vermiglio con i gradi. Ogni clic fa cadere un ingrediente nuovo; il puntatore inclina il barattolo dalla sua parte, fino a 14 gradi. Empty the jar rovescia il barattolo: va oltre i 130 gradi, dà qualche scossa, le parole escono dalla bocca, perdono peso cadendo e svaniscono in fondo alla pagina; poi il barattolo torna dritto. Quando il barattolo è pieno, il clic dopo lo vuota da solo e poi fa cadere la parola nuova. Con il mouse sopra Empty the jar, la scritta si allarga e il barattolo si sporge di qualche grado, come se stesse per versare.
Come funziona
Il barattolo in due linee
Il barattolo è un gruppo con l'origine al centro del vetro: dentro ci sono l'SVG delle pareti e le parole, e lo script lo sposta e lo gira con un solo transform. La parete esterna è un tracciato a U con gli angoli tondi, quella interna lo stesso tracciato rientrato dello spessore del vetro e scritto al contrario, così con pathLength 1 e stroke-dashoffset le due linee si disegnano in versi opposti. Per la fisica il vetro è fatto di corpi fermi: due pareti spesse quanto il vetro, un fondo e due triangoli negli angoli, perché una parola non resti incastrata dove la linea curva.
Ogni parola è un corpo rigido
Ogni parola è un div con dentro le sue lettere, e Matter.js tiene un rettangolo grande quanto la parola al suo peso pieno. A ogni passo della fisica (centottanta al secondo, dentro gsap.ticker) il div prende posizione e rotazione dal suo corpo. Il corpo ha un'inerzia otto volte più grande di una scatola normale: una parola lunga e sottile che tocca il fondo con un angolo dondola e si sdraia, invece di ribaltarsi. Una piccola chiglia la riporta piano verso il dritto della pagina, così le parole restano leggibili; non vince mai contro il vetro o le altre parole.
Inclinare è girare la gravità
La fisica lavora dentro il barattolo, che per lei non si muove mai: quando il barattolo si inclina di un angolo, nella fisica gira la gravità dello stesso angolo al contrario (seno e coseno dell'angolo). Così le pareti restano ferme e le parole scivolano come se il vetro girasse sotto di loro. L'angolo segue il puntatore con una molla che va appena oltre e torna; il filo a piombo, l'asse del barattolo e l'arco con i gradi si disegnano nella pagina, fuori dal gruppo che gira.
L'atterraggio
Al primo urto di una parola (l'evento collisionStart di Matter) un tween GSAP porta il peso del carattere da LIGHT a HEAVY e la larghezza da 72 a 100 con elastic.out, scritti in font-variation-settings. Intanto l'inchiostro si schiaccia e torna, le lettere scendono di un pixel e mezzo una dopo l'altra dal centro, e il barattolo riceve una piccola spinta in giù e una rotazione verso il lato dell'urto, smorzate da due molle. La forza dell'urto, misurata sulla velocità relativa dei due corpi, decide quanto.
Vuotare il barattolo
Empty the jar è una timeline GSAP sull'angolo: il barattolo va a 138 gradi, dà quattro scosse e aspetta. Il vetro diventa scivoloso (l'attrito delle parole scende quasi a zero) e la chiglia si spegne, così le parole escono dalla bocca invece di incastrarsi. Una parola uscita dal vetro perde peso e larghezza cadendo, svanisce e il suo corpo si toglie dalla fisica; appena il barattolo è vuoto l'attesa si accorcia e il barattolo torna dritto. Con il movimento ridotto niente si muove: la fisica gira tutta in una volta senza mostrarsi e le parole compaiono in dissolvenza dove si fermerebbero.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['flour', 'salt', 'honey', 'rye', 'fig', 'thyme', 'butter', 'lemon', 'oats', 'basil', 'sugar', 'yeast'] | Le parole che cadono nel barattolo, in quest'ordine (fino a 12 lettere l'una). Le prime cinque le fa cadere l'entrata. |
TILT | script.js | 14 | Di quanti gradi il puntatore può inclinare il barattolo da ogni parte. |
GRAVITY | script.js | 1.3 | Quanto forte cadono le parole: più è alta, più l'urto è secco. |
BOUNCE | script.js | 0.16 | Quanto rimbalza una parola quando atterra: 0 si ferma dove tocca, 0.5 salta. |
FRICTION | script.js | 0.06 | Quanto tengono le parole sul vetro e fra loro: più è basso, prima scivolano quando il barattolo si inclina. |
LIGHT | script.js | 300 | Il peso del carattere mentre una parola cade, da 100 a 900. |
HEAVY | script.js | 640 | Il peso che la parola prende atterrando. |
Quando usarla
Per raccogliere scelte con un gesto: gli ingredienti di una ricetta, i tag di un articolo, i gusti di un gelato, i filtri di un catalogo, le competenze nella pagina di chi lavora in proprio. Funziona anche da sola, come momento di gioco nell'apertura di un sito di cucina, di una dispensa o di un negozio di alimentari.
Sul telefono
Lo stesso barattolo con le misure adattate: più largo rispetto alla pagina, parole un po' più grandi rispetto al vetro e la stessa fisica, in proporzione. Un tocco fa cadere una parola; trascinando il dito a destra o a sinistra il barattolo si inclina, e lasciandolo torna dritto (un trascinamento non fa cadere parole).
Con il movimento ridotto
Niente cade e niente si inclina: la fisica gira tutta in una volta senza mostrarsi e le parole compaiono in dissolvenza già ferme dove si poserebbero. Empty the jar le fa sparire in dissolvenza; il barattolo resta dritto.
Trappole
- Una parola è una scatola lunga e sottile: cadendo da tutta l'altezza della pagina e toccando il fondo con un angolo minimo, con l'inerzia normale si alzava sull'angolo e si ribaltava, e dopo qualche clic metà delle parole erano a testa in giù. Con l'inerzia otto volte più grande, un po' di resistenza dell'aria mentre cade e una chiglia leggera dondolano e si sdraiano.
- La chiglia (la spinta che riporta le parole dritte) durante il rovesciamento teneva le parole di traverso una contro l'altra, e il mucchio non usciva più dalla bocca: mentre il barattolo versa la chiglia si spegne e il vetro diventa scivoloso.
- Due parole che si toccavano in aria, sopra la bocca, risultavano già atterrate e fuori dal barattolo, e sparivano: una parola esce dal barattolo solo quando passa oltre le pareti, non quando è più in alto della bocca.
- Saltando alla fine dell'entrata con progress(1) partivano insieme tutte le parole che l'entrata doveva ancora far cadere, una dentro l'altra, e la fisica le faceva esplodere: l'entrata ora salta alla fine senza i suoi richiami, e due parole lasciate cadere nello stesso momento partono una sopra l'altra.
- Inclinando il barattolo di 10 gradi le parole non si muovevano: in Matter.js l'attrito da ferme (frictionStatic) le teneva molto più di quanto dica il numero dell'attrito. Con frictionStatic a 0 conta solo FRICTION, e la pendenza che le fa partire è quella che ci si aspetta.
- Il video della scheda si ferma quando l'immagine resta uguale per un secondo senza animazioni GSAP in programma: finché la fisica è sveglia c'è sempre un gsap.delayedCall in attesa, e si addormenta solo quando ogni parola è ferma e il barattolo è al suo angolo.
Librerie
GSAP 3.15.0, Matter.js 0.20.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB, Matter.js 25 KB.
Collaudo
Provata il 15 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.
