Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo dalla moneta che gira
Un’intro di logo nello stile minimal: una moneta di linee sottili vermiglie, con l’iniziale del marchio, cade girando, tocca terra di taglio e gira come un disco di Eulero, sempre più inclinata e più veloce, finché si posa piatta. Piatta è una riga: si allunga e da lei si alzano le lettere del nome. Nel Playground ci metti il tuo nome.
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 spinning coin logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" role="img" aria-label="tondo" data-stage>
<!-- the coin and the line it becomes: drawn by the script -->
<svg class="scene" aria-hidden="true">
<path class="line" data-line d="" />
<g data-coin>
<circle class="rim" r="1" vector-effect="non-scaling-stroke" data-rim />
<circle class="rim rim--in" r="0.84" vector-effect="non-scaling-stroke" data-rim-in />
<text class="mono" data-mono text-anchor="middle" dominant-baseline="central"></text>
</g>
</svg>
<!-- the name: one box per letter, built by the script -->
<p class="name" data-name aria-hidden="true"></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.
10 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 dalla moneta che gira» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianco caldo, vuota, cade dall’alto una moneta disegnata con due cerchi sottili vermigli e l’iniziale del marchio, una «T», nel mezzo. Cade girando su se stessa, così si vede ora di faccia, ora di taglio come una linea, ora di schiena senza lettera. Tocca terra di taglio, fa un piccolo saltello e continua a girare come un disco di Eulero: si inclina sempre di più, diventa un’ellisse sempre più schiacciata, oscilla e gira sempre più in fretta, finché si posa piatta con un ultimo tremito. Vista di taglio, una moneta piatta è una riga vermiglia: la riga si allunga dai due lati fino a essere larga quanto il nome, e da lei si alzano le lettere di «tondo», prima quella al centro e poi verso i bordi, pesanti e larghe, che crescono un pixel oltre la loro altezza e tornano, mentre si assottigliano fino al loro peso. Il logo resta fermo sulla sua riga per qualche secondo; poi le lettere tornano giù nella riga, dai bordi al centro, la riga si ritira e cade un’altra moneta.
Come funziona
Una moneta fatta di due scale
La moneta è un gruppo SVG con due cerchi e una lettera, scalato in larghezza dal coseno dell’angolo del giro e in altezza dal coseno dell’inclinazione. I cerchi hanno vector-effect non-scaling-stroke, così la linea resta sottile anche quando la moneta è schiacciata. La lettera si vede solo quando il coseno del giro è positivo: di schiena la moneta è vuota.
Il disco di Eulero
Il giro sul tavolo è un solo numero p da 0 a 1 mosso a velocità costante. L’inclinazione è p alla 1,7; l’angolo cresce come (p + 2p³) / 3, cioè sempre più in fretta, sette volte più veloce alla fine che all’inizio, come una moneta vera che si posa. Il giro totale è un numero intero di giri, così piatta la moneta è larga esattamente il suo diametro.
Dalla moneta alla riga
Nell’istante in cui la moneta è piatta, la si nasconde e al suo posto compare una riga dello stesso colore, larga quanto il diametro: non si vede il cambio. La riga trema di un pixel e mezzo con un elastic.out e si allunga fino al nome con un expo.inOut.
Le lettere dalla riga
Ogni lettera è una scatola con l’origine della trasformazione sulla linea di base (misurata con una scatola alta zero allineata alla base): scaleY da 0 a 1,03 con un power3.out e poi 1 con un elastic.out, dal centro verso i bordi, 70 millesimi l’una. Intanto peso e larghezza scendono da 900 e 150 ai valori scelti, e il nome si ricentra a ogni fotogramma.
Le misure
La grandezza del nome è quella che lo fa stare nel 56% della larghezza (78% sul telefono) e in un quarto dell’altezza; il raggio della moneta segue il nome, al massimo 0,85 volte la grandezza del carattere e un quinto della larghezza del nome. Tutto si ricalcola al cambio di misura della finestra, anche a metà giro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'tondo' | Il nome del marchio: la prima lettera va sulla moneta (fino a 12 lettere). |
WEIGHT | script.js | 640 | Il peso del nome a riposo (100 a 900). |
WIDTH | script.js | 112 | La larghezza del nome a riposo, asse wdth (50 a 150). |
TURNS | script.js | 8 | Quanti giri fa la moneta prima di posarsi. |
SPEED | script.js | 1 | 2 = due volte più veloce, 0.5 = la metà. |
REST | script.js | 3 | Secondi in cui il logo resta fermo. |
LOOP | script.js | true | Le lettere tornano nella riga e l’intro ricomincia. |
Quando usarla
Per un marchio che parla di soldi, scelte o fortuna con un gesto leggero: l’apertura di un’app di pagamenti o di risparmio, di una banca giovane, di un negozio che vende monete o oggetti da collezione, di un gioco, il caricamento di un portafoglio digitale.
Sul telefono
La stessa animazione con le misure adattate: il nome riempie il 78% della larghezza, la moneta è grande in proporzione e cade dallo stesso punto, sopra lo schermo.
Con il movimento ridotto
Niente cade e niente gira: il nome sulla sua riga vermiglia compare in dissolvenza e resta fermo.
Trappole
- Nelle prime prove la moneta era piccola accanto al nome e sembrava un bottone: il raggio ora segue la grandezza del nome (0,85 volte il carattere, al massimo un quinto della larghezza del nome).
- Prima che arrivasse il carattere le lettere si vedevano un attimo intere: nel CSS partono con scaleY(0) e il movimento ridotto le rimette a 1.
- Un giro totale con una frazione lascerebbe la moneta piatta più corta del suo diametro, e la riga che prende il suo posto farebbe un salto: i giri sono sempre interi (TURNS si arrotonda).
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,7 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
