Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Il titolo di mattoncini
Un titolo fatto di mattoncini giocattolo a incastro, visto dall’alto in prospettiva, con i bottoncini sopra: i mattoncini piovono strato dopo strato, rimbalzano e si incastrano con uno scatto. Poi un omino senza faccia salta sulla base, cammina lungo il titolo e lo smonta lettera per lettera. Un clic su una lettera la fa esplodere nei suoi mattoncini, che poi tornano al loro posto.
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 title built from toy bricks</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.2.8/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena" data-scene>
<header class="marca">
<!-- the shop's mark: a little two-stud brick drawn in svg -->
<svg class="marca__segno" viewBox="0 0 40 30" aria-hidden="true">
<path class="marca__lato" d="M4 13 L20 21 L20 28 L4 20 Z"/>
<path class="marca__fronte" d="M20 21 L36 13 L36 20 L20 28 Z"/>
<path class="marca__sopra" d="M4 13 L20 5 L36 13 L20 21 Z"/>
<ellipse class="marca__bottone" cx="14" cy="11" rx="3.6" ry="1.9"/>
<ellipse class="marca__bottone" cx="26" cy="15" rx="3.6" ry="1.9"/>
</svg>
<span class="marca__nome" data-brand>Tumblebox Toys</span>
</header>
<!-- the title, for screen readers: the bricks are painted on the canvas -->
<h1 class="leggibile" data-reader>PLAY</h1>
<!-- the baseplate, the bricks and the little figure: all painted on this canvas -->
<canvas class="tavolo" data-stage aria-hidden="true"></canvas>
<p class="nota" data-hint>Click a letter to knock it down</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 mattoncini» da Animorio e adattala al mio sitoCosa fa
Su una base verde piena di bottoncini, vista dall’alto e un po’ di lato, nasce il titolo di un negozio di giocattoli inventato, Tumblebox Toys: «PLAY», una lettera per colore. I mattoncini cadono dall’alto uno alla volta, da sinistra a destra, un piano dopo l’altro: mentre scendono sono un po’ storti e la loro ombra sotto si stringe e si scurisce; toccano, rimbalzano una volta, scendono un filo più giù del dovuto e tornano su, incastrati, con due trattini che scattano dagli spigoli come il clic vero. Quando il titolo è finito, la lettera di mezzo esplode da sola nei suoi mattoncini, che volano girando su se stessi, ricadono sulla base davanti alle lettere e poi tornano su uno alla volta, dal basso, ognuno col suo scatto. Poi arriva l’omino: un pupazzetto a mattoncini senza faccia che cade dal cielo, atterra con le braccia in aria, cammina lungo il titolo muovendo gambe e braccia, si gira verso ogni lettera, alza le braccia, fa un saltello e la lettera si smonta dall’alto: i mattoncini si staccano con un piccolo strappo e volano via verso l’alto girando. Alla fine l’omino si gira verso di noi, saluta con la mano e salta fuori dall’inquadratura; il titolo ricomincia a costruirsi. Col puntatore su una lettera finita i suoi piani si sollevano un poco, con un elastico; un clic (o un tocco) la fa esplodere e ricostruire.
Come funziona
Le lettere fatte di quadretti
Ogni lettera è disegnata su una griglia di cinque righe, un quadretto per bottoncino. Lo script legge le righe dal basso e divide ogni tratto pieno in mattoncini da 2 (con un 3 in fondo), e nei piani dispari comincia con un 1, così le giunture si sfalsano come in un muro vero. Un mattoncino che non avrebbe niente sotto viene unito al vicino: niente resta appeso nel vuoto mentre i piani salgono.
Una piccola prospettiva su canvas
Il mondo è in unità di bottoncino: x lungo il titolo, y verso di noi, z in alto. Una proiezione ortografica (la camera girata di ANGLE gradi e inclinata di 33) porta ogni punto sulla canvas. Un mattoncino è una scatola con tre assi: si disegnano solo le facce rivolte verso chi guarda (la normale per la direzione dello sguardo), con la luce data dalla normale per una luce fissa. Un bottoncino è un cilindro: due ellissi, prese dagli assi proiettati, e il nastro fra i loro punti estremi.
Cadere, rimbalzare, incastrarsi
Ogni mattoncino ha pochi numeri: quanto è ancora in alto (f, da 1 fuori dallo schermo a 0 al suo posto), gli spostamenti, le rotazioni e il tempo dall’atterraggio. La timeline del giro fa scendere f con power2.in; dopo l’atterraggio una funzione fa il rimbalzo, la piccola spinta oltre il bottoncino e il ritorno con back.out, e disegna i trattini dello scatto. I mattoncini si disegnano in ordine: prima i più lontani, poi i piani bassi, poi da sinistra a destra.
L’omino che smonta
L’omino è fatto di scatole e cilindri con la stessa prospettiva: gambe e braccia girano intorno all’anca e alla spalla, tutto il pupazzo gira intorno a z per voltarsi. Il passo è un numero che cresce di uno a ogni mezzo passo: il seno dà il movimento di gambe e braccia e il piccolo saltello. A ogni lettera la timeline lo gira, gli alza le braccia, lo fa saltare e manda via i mattoncini dall’alto, con uno strappo e un volo che accelera.
L’esplosione al clic
Il clic non muove la timeline del giro: fa crescere da 0 a 1 un numero della lettera, e la posizione di ogni mattoncino si calcola da lì, con una parabola vera verso un posto sulla base già scelto (in due file sfalsate, così non si sovrappongono), qualche giro su se stesso, un rimbalzo, la pausa e il ritorno dal basso in alto con lo scatto. Se il clic arriva appena prima dell’omino, il giro aspetta che la lettera sia di nuovo intera. Con il movimento ridotto restano solo dissolvenze.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TITLE | script.js | 'PLAY' | Il titolo fatto di mattoncini: lettere, numeri, ? e punto. Corto è meglio: ogni lettera è larga quattro bottoncini. |
BUILD_SPEED | script.js | 1 | Quanto in fretta piovono i mattoncini: 2 è il doppio, 0.5 la metà. |
BOUNCE | script.js | 1 | Quanto rimbalza un mattoncino prima di incastrarsi (0 = si incastra e basta). |
HOLD | script.js | 1.6 | Quanti secondi il titolo finito resta in mostra prima che arrivi l’omino. |
ANGLE | script.js | 28 | Di quanti gradi è girata la camera: 0 è di fronte, 45 è l’angolo dell’isometria vera. |
FIGURE | script.js | true | Con l’omino che smonta il titolo; spento, le lettere saltano via da sole, una dopo l’altra. |
Quando usarla
Per il titolo d’apertura di un negozio di giocattoli, di un laboratorio per bambini, di una fiera del gioco, di un’app per costruire o di qualsiasi cosa che parli di montare e smontare; anche come intro di un video. Funziona meglio con parole corte, da tre a sei lettere.
Sul telefono
La stessa animazione con le misure adattate: su uno schermo alto l’inquadratura tiene solo le lettere e la corsia dell’omino, e la base esce dai lati, così i mattoncini restano grandi. Un tocco su una lettera la fa esplodere.
Con il movimento ridotto
Niente cade e niente vola: i mattoncini compaiono in dissolvenza al loro posto, piano dopo piano, e svaniscono dall’alto quando il titolo si smonta; l’omino non c’è. Il clic fa svanire la lettera e la fa ricomparire.
Trappole
- Con un solo spessore di muro, ordinare i mattoncini per la distanza del centro sbaglia: il mattoncino lungo di sotto finisce sopra quello corto del piano di sopra e la sua faccia di sopra copre l’altro. Si ordina prima per piano e poi lungo il titolo; i pezzi che volano verso di noi vengono dopo.
- Il nastro di un bottoncino disegnato nello stesso tracciato dell’ellisse di base gira in senso contrario: con la regola nonzero la parte dove si sovrappongono resta vuota e il bottoncino ha un buco. Si riempiono in due tracciati separati.
- Lettere con le curve (O, S, C fatte di quadretti con gli angoli vuoti) lasciavano mattoncini appesi nel vuoto mentre i piani salgono: le lettere sono squadrate e un mattoncino senza niente sotto si unisce al vicino.
- Il clic su una lettera poco prima che arrivi l’omino lasciava la lettera a pezzi davanti a lui: se l’esplosione non è finita, la timeline del giro si mette in pausa e riparte quando la lettera è intera.
- Il punto di partenza dei mattoncini dipende dalla finestra (devono partire fuori dallo schermo): nella timeline c’è solo f da 1 a 0, e quanto vale 1 in bottoncini si ricalcola a ogni cambio di misura, senza rifare il giro.
- Per registrare il video completo il giro deve tornare identico: tutto il caso (inclinazioni, voli, posti sulla base) si decide una volta all’inizio, con un seme fisso.
Librerie
GSAP 3.15.0, Fredoka (font variabile) 5.2.8.
Compressi con gzip, i tre file della demo pesano 13 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.
