Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo dal punto che rimbalza
Un’intro di logo in stile minimal: un solo punto rosso cade su una linea sottile, rimbalza due volte sempre più basso e al terzo contatto si posa; l’asta della i cresce sotto di lui e lo solleva, e il punto diventa il puntino della i. Le altre lettere escono da dietro la i verso i due lati, strette e leggere, e si allargano a molla una dopo l’altra. Senza una i, il punto salta in fondo al nome e diventa il punto finale. 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 bouncing-dot logo</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>
<main class="scena">
<!-- the stage: the script measures it, drops the dot on the floor line and lets the name out from behind it -->
<svg class="palco" data-stage role="img" aria-label="calimo" xmlns="http://www.w3.org/2000/svg">
<defs data-defs></defs>
<!-- the hairline the dot bounces on -->
<path class="pavimento" data-floor />
<!-- the letters left and right of the dot, each side clipped where it comes out -->
<g data-left></g>
<g data-right></g>
<!-- the letter that wears the dot (its own dot is cut away) -->
<g data-stem></g>
<!-- the dot -->
<ellipse class="punto" data-dot />
</svg>
<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.
15 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 dal punto che rimbalza» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo e vuoto, una linea grigia sottilissima si disegna dal centro verso i lati. Dall’alto cade un punto rosso, sempre più veloce e un poco allungato dalla velocità: tocca la linea, si schiaccia, la linea cede sotto di lui e vibra, e il punto rimbalza. Il secondo rimbalzo è più basso, il terzo contatto è morbido e il punto resta lì, arrotondandosi con un piccolo elastico. Dopo un attimo l’asta della i cresce dalla linea proprio sotto il punto e lo solleva: il punto si schiaccia appena mentre sale, si stacca dalla cima, va un filo più su e si assesta al suo posto, il puntino della i di calimo, il marchio inventato. Poi le altre lettere escono da dietro la i, verso sinistra e verso destra, strettissime e sottili; una dopo l’altra, dalla i verso fuori, si allargano e prendono peso con una molla, superano la loro misura di un pixel e tornano, e ognuna spinge un poco più in là le lettere che vengono dopo. La linea si ritira dentro la i e il punto fa un piccolo cenno. Dopo qualche secondo le lettere si stringono, rientrano dietro la i, il punto ricade sull’asta e l’asta scende nella linea; la linea si apre sotto il punto, il punto cade giù e tutto ricomincia. Un clic la fa ripartire. Se il nome non ha una i (o una j), le lettere escono da dietro il punto stesso, e alla fine il punto salta sopra il nome e atterra in fondo, come punto finale. Un’immagine fa lo stesso: si apre in due metà da dietro il punto, che poi diventa il suo punto finale.
Come funziona
Una sola misura
Il palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel. Ogni lettera si misura nella pagina, in uno span nascosto con lo stesso carattere (Archivo, variabile in larghezza e peso), in tre punti del suo cammino: stretta e leggera, a metà e al suo posto. In mezzo la larghezza si ricava in linea retta fra le tre misure, oltre l’ultima si prolunga: così la molla che supera la misura di un pixel spinge davvero le vicine. La grandezza del carattere si sceglie perché il nome intero stia nella larghezza, anche sul telefono.
Dov’è il puntino della i
La i viene disegnata grande su una canvas e letta riga per riga dall’alto: il primo blocco di inchiostro sopra una riga vuota è il suo puntino, il blocco dopo è l’asta. Da lì si sanno il centro e la misura del punto, dove comincia l’asta e quanto è larga. La i vera viene tagliata da un clipPath che non mostra mai il suo puntino: il rettangolo del taglio sale dalla linea e sembra l’asta che cresce, mentre il punto rosso, disegnato a parte come un’ellisse, sta sopra. Fra le i e le j del nome si sceglie quella più vicina al centro.
Il punto che cade
La caduta e i rimbalzi sono parabole vere: una gravità in pixel al secondo quadrato, la discesa con power1.in e la salita con power1.out (sono curve di secondo grado), e ogni rimbalzo alto un quinto del precedente, quindi anche più breve. Il punto si disegna dal suo punto più basso: quando tocca si schiaccia in altezza e si allarga in proporzione, e la linea sotto di lui è un tracciato con un avvallamento morbido, che scende di qualche pixel e poi torna con un elastico che la fa vibrare.
Le lettere da dietro la i
Le lettere a sinistra e quelle a destra sono due gruppi, ognuno con il suo taglio che finisce sul bordo dell’asta: partono tutte nascoste dietro la i e scorrono fuori come due trenini. Poi ogni lettera ha un numero solo, da 0 (stretta e leggera) a 1 (al suo posto), che muove insieme gli assi wdth e wght di font-variation-settings e la sua larghezza; una funzione dopo ogni fotogramma rimette in fila le lettere a partire dalla i, quindi quando una si allarga le altre vengono spinte. Ogni lettera va a 1.05 e torna a 1 con un elastic.out.
La regia e il tuo logo
Tutta l’entrata è una timeline sola, con le etichette start, fall, land, stem, open, widen, reveal, rest e leave, e timeScale per la velocità. Senza una i, o con FULL_STOP, il nome si divide a metà, le due parti escono da dietro il punto e alla fine il punto salta sopra le lettere fino in fondo, mentre il buco che lascia si chiude. Se IMAGE ha un indirizzo, al posto delle lettere ci sono le due metà dell’immagine, schiacciate e poi allargate allo stesso modo. Nel Playground accanto al campo c’è il tasto per caricare un file, che entra nel codice come indirizzo data:.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'calimo' | Il logo scritto: il punto diventa il puntino della sua i (o j), oppure il punto finale. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola e il punto diventa il suo punto finale. |
BOUNCES | script.js | 2 | Quante volte il punto rimbalza prima di fermarsi (0 = cade e resta). |
SQUASH | script.js | 1 | Quanto il punto si schiaccia quando tocca la linea (0 = resta rotondo). |
NARROW | script.js | 62 | Quanto sono strette le lettere quando escono, sull’asse della larghezza: 62 è il minimo, 100 la larghezza normale. |
FULL_STOP | script.js | false | Con true il punto diventa sempre il punto finale del nome, anche quando c’è una i. |
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 resta in mostra prima di ricominciare. |
LOOP | script.js | true | Se il nome si richiude e il punto cade di nuovo. Con false il logo resta, e ogni tanto il punto fa un piccolo cenno. |
Quando usarla
Per presentare un logo con un gesto piccolo e simpatico ma pulito: l’apertura del sito di uno studio, di un’app, di un marchio che ha una i o un punto nel nome, un portfolio, un caricamento, l’anteprima per un cliente, un post per i social. Sta bene dove il resto della pagina è sobrio. Funziona con un marchio scritto e con un’immagine.
Sul telefono
La stessa animazione con le misure adattate: il nome è più piccolo per stare nella larghezza, il punto e i rimbalzi in proporzione. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: il punto compare in dissolvenza al suo posto, poi il nome compare intorno a lui. Se l’animazione ricomincia, anche il logo se ne va in dissolvenza.
Trappole
- Il puntino vero della i non deve vedersi mai, ma la i senza puntino (ı) e la j senza puntino (ȷ) non ci sono in tutti i caratteri: la i resta la lettera normale, tagliata da un rettangolo che si ferma sopra la cima dell’asta, nel vuoto fra asta e puntino. Il rettangolo scende anche sotto la linea, per la coda della j.
- Misurare le lettere su una canvas non basta: la canvas non conosce font-variation-settings, quindi le larghezze a metà strada si misurano in uno span vero della pagina. Il puntino invece si legge sulla canvas con il peso finale e la larghezza normale, che è proprio come la i resta alla fine.
- Il salto del punto verso la fine del nome all’inizio era basso e passava attraverso le lettere alte (l, d, f): ora sale quasi un’altezza di carattere intera, sia all’andata sia al ritorno.
- Con un’immagine divisa in due metà che si toccano esattamente restava una riga chiara sottile in mezzo (l’antialiasing dei due bordi): ogni metà entra di un pixel nell’altra, che mostra lo stesso disegno.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 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.
