Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il titolo che arriva a pixel
L’apertura di uno studio di videogiochi, nello stile minimal: due parole in un carattere a pixel crescono dal centro dello schermo mentre le lettere cadono al loro posto, una dall’alto e la successiva dal basso, in ordine sparso. Ogni lettera cade fatta di puntini tondi e sottili e atterra in pixel quadrati e pieni. Poi la carta del filmato arriva su un elastico e si posa storta.
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 headline that arrives in pixels</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bitcount-prop-single@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the opening of a made-up games studio, Pixmoor: two words in a pixel typeface grow out of the middle of the
screen while their letters drop in from above and below in a random order, round dots that turn square as they
land. Then a card with the reel swings in on an elastic and settles at a tilt -->
<main class="palco" data-palco>
<header class="testa">
<span class="marchio">Pixmoor</span>
<span class="nota">Independent games studio</span>
</header>
<h1 class="titolo" aria-label="Extra life">
<span class="riga riga--prima" data-riga><span class="riga__dentro" data-dentro>Extra</span></span>
<span class="riga riga--seconda" data-riga><span class="riga__dentro" data-dentro>Life</span></span>
</h1>
<a class="carta" href="#" data-carta aria-label="Play the reel">
<span class="carta__fondo">
<svg class="carta__play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" /></svg>
<span class="carta__nome">Reel</span>
</span>
</a>
<p class="piede">Worlds, characters and trailers for games people keep playing.</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.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 «Il titolo che arriva a pixel» da Animorio e adattala al mio sitoCosa fa
Pixmoor, uno studio di videogiochi inventato, si presenta con due parole, Extra Life, su fondo nero. Le due righe partono a un decimo della loro misura e crescono dal centro dello schermo, non dal proprio, quindi si allargano verso i bordi. Intanto le lettere cadono al loro posto in ordine sparso: le pari arrivano dall’alto, le dispari dal basso, veloci all’inizio e con una frenata lunga. Mentre cadono sono fatte di puntini tondi e sottili; atterrando i puntini diventano pixel quadrati e il peso sale fino al nero pieno. Poi da destra in basso arriva la carta del filmato, nel solo colore della pagina, su un elastico che la fa oscillare una volta prima di posarsi storta. Il mouse allarga appena le due parole, una a sinistra e l’altra a destra. Dopo una pausa le lettere se ne vanno come sono arrivate, più veloci, e si ricomincia.
Come funziona
Il carattere
Bitcount è un carattere a pixel variabile: oltre al peso ha l’asse ELSH, la forma dei puntini (0 tondi, 50 quadrati). Ogni lettera ha le sue proprietà CSS --forma e --peso, lette da font-variation-settings e font-weight, così GSAP le cambia una per una.
La crescita
Ogni riga cresce da START_SCALE a 1 in GROW secondi con una curva fatta con CustomEase (0.5, 0, 0, 1). Il punto d’origine non è il centro della riga ma il centro dello schermo, misurato a ogni giro: per questo le parole si aprono verso i bordi.
Le lettere
SplitText divide le parole in lettere. Ognuna parte da yPercent -100 se è pari e 100 se è dispari e torna a zero in DROP secondi con la curva 0, 0, 0, 1, cioè tutta frenata. L’ordine è mescolato a ogni giro; lo stesso ordine decide quando i puntini diventano quadrati, così ogni lettera si fa piena proprio quando atterra.
La carta e il mouse
La carta parte da CARD_FROM e arriva con elastic.out(1, 1) in CARD_TIME secondi, mentre compare in un secondo. L’elemento che si muove è il link; l’inclinazione è del figlio, nel CSS, così GSAP non la cancella. Il mouse sposta le due parole con quickTo, in versi opposti, al massimo di PARALLAX pixel.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GROW | script.js | 1 | I secondi in cui le parole crescono dal centro dello schermo. |
START_SCALE | script.js | 0.1 | Quanto sono piccole le parole all’inizio. |
DROP | script.js | 0.7 | I secondi della caduta di ogni lettera. |
STAGGER | script.js | 0.03 | Il distacco fra una lettera e l’altra, in ordine sparso. |
FALL_SHAPE | script.js | 0 | La forma dei puntini mentre la lettera cade: 0 tondi, 50 quadrati, 100 con gli angoli tagliati. |
LAND_SHAPE | script.js | 50 | La forma dei puntini a lettera ferma. |
LIGHT | script.js | 200 | Il peso con cui la lettera cade; atterra a 700. |
CARD_FROM | script.js | [600, 150] | Da dove arriva la carta, in pixel verso destra e verso il basso. |
CARD_TIME | script.js | 1.5 | I secondi dell’arrivo elastico della carta. |
PARALLAX | script.js | 14 | Di quanto il mouse allarga le due parole, in pixel. |
HOLD | script.js | 2.6 | I secondi in cui il titolo resta fermo prima di andarsene e tornare. |
Quando usarla
Per l’apertura di uno studio di videogiochi, di un’app, di un evento o di un marchio che parla con i pixel: due parole e un filmato da far partire.
Sul telefono
Uguale, con le parole più piccole e la carta sotto al titolo.
Con il movimento ridotto
Niente cade e niente cresce: le parole e la carta compaiono in dissolvenza, già al loro posto, e il mouse non le sposta.
Trappole
- Il punto d’origine della crescita va misurato con la riga alla sua misura vera: prima si tolgono le trasformazioni, poi si legge getBoundingClientRect.
- Per avere la stessa sequenza nella caduta e nel cambio di forma non basta stagger con from: 'random', che mescola in modo diverso a ogni tween: l’ordine si mescola una volta e si usa per tutti e due.
- L’asse ELSH di Bitcount non va da tondo a quadrato come si direbbe: 0 è tondo, 50 quadrato, 100 un’altra forma ancora. Va provato prima di animarlo.
- L’inclinazione della carta sta nel CSS del figlio: messa sul link, il transform in linea di GSAP la cancellerebbe.
Librerie
GSAP 3.15.0, Bitcount Prop Single (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,5 KB; le librerie: GSAP + SplitText + CustomEase 35 KB.
Collaudo
Provata il 17 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.
