Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo composto dai pixel
L’intro di un logo in stile videogioco a 8 bit: il logo diventa una griglia di grandi pixel che cadono a blocchi, rimbalzano e si incastrano riga dopo riga, poi si dividono in pixel sempre più piccoli fino al logo nitido, con un’ombra a gradini. Nel Playground ci metti il tuo nome o carichi il tuo logo.
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 pixel-block logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures it, turns the logo into a grid of big pixels, drops them in as blocks and
sharpens them into the real logo -->
<svg class="palco" data-stage role="img" aria-label="Bitrun" xmlns="http://www.w3.org/2000/svg">
<defs data-defs>
<!-- the glint at rest shows only on the logo -->
<mask id="glint-mask" maskUnits="userSpaceOnUse" style="mask-type: alpha" data-glint-mask>
<use href="#crisp" />
</mask>
</defs>
<g data-world>
<!-- the board: a faint outline of every big pixel the logo needs -->
<g class="tavola" data-board></g>
<g data-logo>
<!-- the stepped shadow, a few copies of the logo one step further each -->
<g data-shadow></g>
<!-- the falling blocks -->
<g data-pieces></g>
<!-- the logo, from the biggest pixels to the sharp one: one layer each, clipped by a scan line -->
<g data-levels></g>
<!-- the scan line that sharpens the pixels -->
<rect class="scansione" data-scan />
<g mask="url(#glint-mask)"><path class="luccichio" data-glint /></g>
</g>
<g data-fx></g>
</g>
</svg>
<!-- the lines of an old screen: still, never flickering -->
<div class="crt" aria-hidden="true"></div>
<p class="nota">Click or tap to see it again</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.
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 «Il logo composto dai pixel» da Animorio e adattala al mio sitoCosa fa
Su uno schermo blu notte, con le righe ferme di un vecchio televisore, compare dal basso verso l’alto il contorno del tabellone: un quadratino tenue per ogni grande pixel che servirà al logo di un marchio inventato, Bitrun. Poi i pixel arrivano dall’alto a blocchi da due, tre o quattro, come i pezzi di un gioco a incastro, in quattro colori da console: rosso, giallo, verde acqua e crema, con il bordo chiaro in alto e scuro in basso. Alcuni scivolano di lato una casella alla volta mentre scendono, altri ruotano a scatti di un quarto di giro; tutti toccano terra con un piccolo rimbalzo. Il logo si costruisce dal basso: quando una riga è piena lampeggia di bianco due volte, diventa del colore del logo, sputa qualche briciola di pixel ai due lati e lo schermo dà un piccolo scossone. All’ultima riga lo scossone è più forte e il tabellone sparisce. Poi il logo si affina: una riga di scansione scende e sotto di lei ogni pixel si divide in quattro, poi ancora in quattro, con un piccolo sobbalzo a ogni passaggio, finché resta il logo vero, nitido. Dietro cresce a scatti un’ombra rossa a gradini, come le scritte dei vecchi giochi. Il logo resta in mostra con un riflesso che lo attraversa a scatti ogni tanto; poi l’ombra rientra, il logo torna ai pixel grandi, le righe lampeggiano e spariscono e tutto ricomincia, con blocchi ogni volta diversi. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: viene campionata negli stessi pixel, con i colori ridotti alla palette della console (o tutta nel colore del logo).
Come funziona
Il logo diventa una griglia
Il palco è un SVG con il viewBox grande quanto la finestra. Il logo si misura su una canvas con lo stesso carattere (measureText, actualBoundingBoxAscent e actualBoundingBoxLeft per la scatola vera dell’inchiostro) e si sceglie la grandezza del pixel: l’altezza di una lettera divisa per PIXEL, arrotondata a pixel interi perché i bordi restino netti, mai sotto i quattro pixel dello schermo (su un telefono con un nome lungo la griglia diventa più grossa). Poi il logo si disegna su una canvas nascosta, con sedici campioni per ogni grande pixel.
Quattro griglie in una volta
Dalla canvas si sommano l’alfa e i colori nella griglia più fine (due campioni per cella), poi ogni griglia più grossa somma quattro celle di quella sotto: così le quattro griglie costano una lettura sola. Una cella è piena se è coperta per metà, e il suo colore è la media dei suoi campioni ridotta alla palette: grigi, nero e bianco diventano il colore del logo (lo schermo è scuro), gli altri il colore con la tinta più vicina. Ogni griglia diventa un tracciato per colore, con le celle vicine di una riga unite in un rettangolo solo.
I pezzi del gioco
Le celle della griglia grossa si raggruppano in pezzi da due a quattro, partendo dal basso e crescendo solo nella stessa riga o in quella sopra, così il logo sale riga dopo riga. Ogni pezzo è un gruppo con dentro un altro gruppo: il primo si sposta (cade con power2.in e snap a mezzo pixel, scivola di lato con steps), il secondo ruota a scatti intorno al suo centro (svgOrigin). Tutti cadono per lo stesso tempo, quindi atterrano nell’ordine in cui sono partiti, e il rimbalzo è una serie di keyframes.
Le righe si incastrano
Per ogni riga si conosce l’istante in cui il suo ultimo pezzo si è fermato: lì compare sopra i pezzi la riga piatta del colore del logo, una copia bianca lampeggia due volte con quattro set, lo schermo trema di pixel interi e quattro briciole volano in arco ai due lati. Poi l’affinamento: ogni griglia ha un clipPath con un rettangolo; la riga di scansione allarga quello della griglia nuova e restringe quello della vecchia, con un ease steps che scende una riga di pixel alla volta.
La regia e il tuo logo
Tutta l’entrata è una timeline sola, con le etichette start, complete, reveal, rest e leave e timeScale per la velocità. L’ombra a gradini è fatta di quattro copie del logo che scendono di lato con steps(1), steps(2), steps(3), steps(4). Se IMAGE ha un indirizzo, il logo diventa quell’immagine: si campiona negli stessi pixel e, per il logo nitido, si ridipinge ogni suo punto con i colori della palette su una canvas grande quanto lo schermo; un’immagine senza trasparenza perde il suo fondo bianco. Nel Playground accanto al campo c’è il tasto per caricare un file.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Bitrun' | Il logo scritto: viene tagliato in grandi pixel e costruito blocco dopo blocco. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola. |
PIXEL | script.js | 12 | Quanti grandi pixel fanno l’altezza di una lettera: 6 dà blocchi grossi, 18 pixel fini e tanti pezzi. |
DROP | script.js | 1 | Quanto veloci cadono i blocchi e quanto rimbalzano: 0.5 lenti e morbidi, 2 rapidi e con un rimbalzo alto. |
SHAKE | script.js | 1 | Quanto trema lo schermo quando una riga si incastra e a ogni passaggio dell’affinamento (0 = resta fermo). |
TINT | script.js | false | Un’immagine tiene i suoi colori, ridotti alla palette della console; con true diventa tutta del colore del logo. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
REST | script.js | 4 | Quanti secondi il logo nitido resta in mostra prima che le righe si svuotino. |
LOOP | script.js | true | Se le righe si svuotano e il logo si ricostruisce. Con false il logo resta, col riflesso ogni tanto. |
Quando usarla
Per presentare un logo con l’aria di un vecchio videogioco: l’apertura del sito di uno studio di giochi, di una sala giochi, di un evento o di un marchio che gioca col retrò, un caricamento, l’anteprima per un cliente, un post per i social. Funziona con un marchio scritto e con un’immagine.
Sul telefono
La stessa animazione con le misure adattate: il logo è largo quasi quanto lo schermo e, se il nome è lungo, la griglia diventa più grossa perché i pixel non scendano sotto i quattro punti. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove e niente trema: il logo a grandi pixel compare in dissolvenza, poi al suo posto si dissolve il logo nitido e dietro l’ombra a gradini. Se l’animazione ricomincia, il logo se ne va in dissolvenza.
Trappole
- Con dieci pixel per lettera il puntino della i e l’asta si toccavano e la parola si leggeva male nei pixel grossi: il valore di partenza di PIXEL è 12, il minimo per cui i caratteri restano distinti.
- Con un nome lungo su un telefono i pixel diventavano di due punti e i pezzi in caduta sembravano polvere: sotto i quattro punti la griglia ha meno righe per lettera invece di pixel più piccoli.
- Un’immagine di un altro sito senza permesso CORS non si può leggere dalla canvas: si carica con crossOrigin anonymous e, se non arriva, resta il nome.
- Un logo nero su fondo bianco, ridotto alla palette, diventava un rettangolo crema pieno: in un’immagine senza trasparenza i punti quasi bianchi si tolgono, e il nero diventa il colore del logo, che sullo schermo scuro si legge.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 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.
