Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Le lettere calamita
La porta di un frigorifero piena di lettere calamita di plastica colorata, con lo spessore, il lucido e qualche graffio: si prendono e si lanciano col mouse o col dito, si inclinano mentre viaggiano e si attaccano con uno scatto. Ogni tanto si raccolgono da sole a scrivere una frase e poi si sparpagliano; un clic sulla porta le fa saltare tutte.
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 fridge magnet letters</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="kitchen">
<!-- the door of a family fridge, covered in chunky plastic letters, two fruit magnets and a couple of notes.
Every magnet can be picked up and thrown: it lifts off the door, leans as it travels and clacks back on.
Every so often the letters gather by themselves to spell a sentence, then wander off again; a click on the
door makes them all jump and rearrange -->
<section class="door" data-door tabindex="0" aria-label="A fridge door covered in magnet letters. Press enter to make them jump and rearrange." aria-describedby="door-help">
<div class="door__shine" aria-hidden="true"></div>
<div class="door__handle" aria-hidden="true"><span class="door__grip"></span></div>
<div class="door__badge" aria-hidden="true"><span>Frostline</span></div>
<div class="door__magnets" data-magnets aria-hidden="true"></div>
</section>
<p class="sr" id="door-help">Drag a magnet to move it, or click the door to make every magnet jump.</p>
<p class="sr" aria-live="polite" data-live></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.
24 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 lettere calamita» da Animorio e adattala al mio sitoCosa fa
Tutto lo schermo è la porta smaltata di un frigorifero color menta chiaro, col riflesso lungo di una finestra, la maniglia cromata a sinistra e la targhetta Frostline in basso. Sopra ci sono lettere calamita grosse e arrotondate, rosse, gialle, blu, verdi, arancioni e viola: si vede il loro spessore di plastica, più scuro, un lucido in alto e qualche segno degli anni, puntini chiari, un graffio, una zona più opaca, ogni lettera diversa. Ci sono anche un limone, una fragola e una fetta di anguria, un biglietto dell’asilo Little Acorns e un buono della gelateria Pip and Pine, tenuti su da una calamita tonda. Aprendo la pagina le calamite vengono premute sulla porta una dopo l’altra, ognuna con il suo scatto. Dopo un attimo le lettere si raccolgono al centro a scrivere HELLO LITTLE ACORNS: le altre calamite che stanno in mezzo si spostano, le lettere arrivano in ordine di lettura, si staccano dalla porta, viaggiano inclinandosi nella direzione in cui vanno, oscillano quando si fermano e si attaccano con un piccolo schiacciamento elastico; la frase finita fa un’onda, lettera dopo lettera. Dopo qualche secondo tutti tornano al loro posto, poi arriva la frase dopo, TWO SCOOPS PLEASE. Ogni calamita si prende col mouse o col dito: si avvicina, con l’ombra che si allarga, segue la mano su una molla, si inclina come un pendolo; lasciata, scivola ancora un poco con la velocità della mano, gira un po’ se lanciata di lato e si attacca con lo scatto, e resta dove l’hai messa. Un clic sulla porta fa saltare tutte le calamite verso di te, con un accovacciarsi prima del salto e qualche giravolta, e le fa ricadere nella disposizione dopo: la frase, oppure di nuovo sparse.
Come funziona
Una lettera di plastica
Ogni lettera è due copie dello stesso carattere una sopra l’altra. Sotto c’è il fianco: il colore scurito con color-mix e quattro text-shadow impilati verso il basso, che fanno lo spessore. Sopra c’è la faccia: colore trasparente e uno sfondo ritagliato sulla lettera con background-clip: text, fatto di una sfumatura dal chiaro allo scuro, un lucido ellittico in alto e qualche radial-gradient piccolissimo messo a caso (puntini chiari, un segno scuro, una zona opaca) più un graffio sottile. Le posizioni dei segni sono variabili CSS diverse per ogni lettera, da un numero a caso con il seme, così la porta è sempre la stessa.
Misurare le lettere
Per mettere le lettere in fila e non farle toccare serve la loro misura vera. Una canvas con lo stesso carattere dà, per ogni lettera, measureText con actualBoundingBox (quanto è larga e alta la lettera disegnata) e fontBoundingBox (dove cade la linea di base): da lì la scatola della calamita, in em, e lo spostamento della lettera dentro la scatola. Tutto in em: la grandezza è il font-size della porta, scelto perché ogni frase ci stia, andando a capo fra le parole.
Il pendolo e lo scatto
L’elemento esterno lo muove GSAP (posto, rotazione, quanto è vicino a te, con la variabile --lift che allarga l’ombra drop-shadow); il corpo dentro si inclina e si schiaccia. Un solo gsap.ticker misura a ogni fotogramma la velocità orizzontale di ogni calamita e spinge su una molla smorzata il suo angolo verso quella velocità: mentre viaggia si inclina, quando si ferma oscilla e torna dritta, anche quando la muove la regia. Lo scatto è l’ultimo tratto con power3.in (la calamita che tira), poi scaleX in su e scaleY in giù per cinque centesimi e il ritorno con elastic.out.
Prendere e lanciare
Con pointerdown la calamita ferma le sue animazioni, cattura il puntatore e si avvicina con back.out; il ticker la tira verso il dito con un inseguimento morbido (1 - e alla meno 26 per il tempo). Lasciata, la velocità misurata dal ticker decide dove scivola, quanto gira e quanto dura la scivolata, con power3.out, poi lo scatto; il punto d’arrivo diventa la sua nuova casa. Un clic sulla porta senza trascinare, o Invio, fa saltare tutti: accovacciata, salto in alto con power2.out, caduta con power2.in, a volte un giro intero.
La regia
Le lettere da tenere sono, per ogni carattere, quante ne chiede la frase più affamata, più quelle di scorta. Per comporre una frase ogni posto prende la lettera giusta libera più vicina; le calamite la cui casa cade sulla frase cercano il posto libero più vicino fuori dal suo rettangolo. Ogni passaggio è una timeline per calamita con un ritardo in ordine di lettura, e un gsap.delayedCall prepara il passo dopo (sparse, frase, sparse, frase dopo): toccando una calamita la regia aspetta qualche secondo prima di ripartire.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PHRASES | script.js | ['HELLO LITTLE ACORNS', 'TWO SCOOPS PLEASE'] | Le frasi che le lettere scrivono, una dopo l’altra. Le lettere che servono si aggiungono da sole. |
EXTRA | script.js | 'KMYBZ' | Lettere di scorta che restano solo sparse sulla porta. |
SIZE | script.js | 1 | Quanto sono grandi le lettere (si rimpiccioliscono da sole se una frase non ci sta). |
TILT | script.js | 1 | Quanto una calamita si inclina mentre viaggia (0 = resta dritta). |
SNAP | script.js | 1 | Quanto forte è lo scatto con cui una calamita si attacca alla porta. |
THROW | script.js | 1 | Quanto scivola una calamita lanciata prima di attaccarsi. |
HOLD | script.js | 3.4 | I secondi in cui la frase resta scritta. |
REST | script.js | 1.8 | I secondi in cui le lettere restano sparse prima della frase dopo. |
FRUIT | script.js | true | Le calamite a forma di frutto e i biglietti; con false restano solo le lettere. |
Quando usarla
Per la pagina di un asilo, di una gelateria, di una scuola di lingue, di un negozio di giocattoli o di una cucina di famiglia; per una pagina 404 o un messaggio di benvenuto che si può toccare; per un titolo che si scrive da solo e che chi guarda può disfare.
Sul telefono
Le stesse animazioni con le misure adattate: la porta è verticale, le lettere sono un po’ più piccole e la frase va a capo fra le parole, anche su tre righe. Le calamite si trascinano e si lanciano col dito, senza far scorrere la pagina; un tocco sulla porta le fa saltare.
Con il movimento ridotto
Niente si sposta: le calamite compaiono in dissolvenza e, quando si scrive la frase o si sparpagliano, svaniscono e ricompaiono al loro nuovo posto. Trascinate seguono il dito senza inclinarsi e senza scivolare, e restano dove le lasci.
Trappole
- Un text-shadow sotto una faccia con background-clip: text e colore trasparente si vede attraverso la faccia: per questo lo spessore sta su una seconda copia della lettera, sotto, e non sulla stessa.
- La calamita tonda dei biglietti copriva la prima riga scritta: il biglietto ha un margine in alto alto quanto la calamita, e le righe del quaderno partono sotto.
- Sul telefono la porta è stretta e la frase occupa tre righe: le calamite che dovevano farle posto non trovavano un buco libero e il limone finiva sopra il buono della gelateria. Ora provano molti più punti, con un margine più stretto, e le lettere sono un po’ più piccole.
- L’inclinazione scritta nella timeline (ruota da una parte, poi torna) non segue il dito né una calamita che cambia strada: viene dalla velocità vera, misurata a ogni fotogramma, su una molla smorzata, quindi vale per la regia, per il trascinamento e per i salti, e oscilla da sola quando la calamita si ferma.
- Il poster cade nel mezzo della frase ferma: la regia parte quando il carattere è caricato, quindi un caricamento lento sposta tutto di qualche decimo di secondo.
Librerie
GSAP 3.15.0, Fredoka (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 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.
