Il menu a onda di peso
Menu, Testo, Hover, Fisica
NuovaGratis
Tutti i componenti
La card dell’articolo che fa posto
La card di un saggio in una piccola rivista online, con un’unica illustrazione: una luna vermiglia posata nel testo. Il puntatore la porta in giro per l’estratto (il dito la trascina o la posa dove tocca, le frecce la spostano) e ogni riga le fa posto: il testo è impaginato dallo script riga per riga intorno al cerchio, le parole scivolano al loro posto nuovo su molle senza mai urtarsi, quelle che vanno a capo entrano dal lato giusto, e l’estratto si chiude coi puntini quando la luna si prende troppo spazio. Attraversando la colonna la luna cambia fase, da falce a sinistra a piena a destra.
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 article card that makes room</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the card of an essay in a small online magazine. Its only picture is a moon, set in the text: the pointer (or a
finger, or the arrow keys) carries it through the excerpt and every line makes room for it, the words
gliding to their new places on springs, the nearest first. The moon changes phase as it crosses the column,
from a crescent on the left to full on the right. The words are laid out by the script, line by line around
the moon -->
<article class="essay" aria-labelledby="essay-title" data-essay>
<p class="essay__meta"><span class="essay__mag">Nightfall</span><span>Essay · 6 min read</span></p>
<h2 class="essay__title" id="essay-title">Everything leans toward the moon</h2>
<div class="essay__body" data-body>
<p class="sr" data-text>The sea is not pulled up so much as gathered. Twice a day the water leans toward the moon, and the whole coast leans with it: the harbour empties, the boats settle on their keels, the gulls walk where an hour ago they swam. Nothing here was asked to move, and everything did. I have lived by this water for eleven years and I still check the tide table before I check the weather, because the weather only changes the day, and the moon changes the shape of the town. This is an essay about living somewhere that rearranges itself around a light in the sky.</p>
<div class="words" aria-hidden="true" data-words></div>
<button class="moon" type="button" data-moon aria-label="The moon. Move it through the text with the arrow keys">
<svg viewBox="-60 -60 120 120" aria-hidden="true">
<circle class="moon__ring" r="48" data-ring />
<circle class="moon__dark" r="38" data-dark />
<path class="moon__lit" data-lit />
</svg>
</button>
</div>
<footer class="essay__foot">
<span class="essay__by">Words by Ines Marlow</span>
<a class="read" href="#essay-title" data-read>
<span class="read__word">Read the essay</span>
<svg viewBox="0 0 18 12" aria-hidden="true"><path d="M1 6h15M11.5 1.5 16 6l-4.5 4.5" /></svg>
</a>
</footer>
</article>
</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 «La card dell’articolo che fa posto» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una card color carta larga 340 pixel. In alto il nome della rivista, NIGHTFALL, e Essay · 6 min read, sopra una riga sottile; poi il titolo in Newsreader, Everything leans toward the moon, e l’estratto su nove righe. In alto a destra, dentro il testo, una luna piena vermiglia: le righe le girano intorno. Quando il puntatore passa sul testo la luna lo segue su una molla, intorno le compare un cerchio tratteggiato sottile (lo spazio che le parole le lasciano) e il testo si rifà a ogni fotogramma: ogni riga viene tagliata dove la luna la attraversa e le parole riempiono il pezzo a sinistra e quello a destra. Le parole che restano sulla loro riga scivolano di lato su molle, stringendosi un poco ma senza mai sovrapporsi né uscire dal loro pezzo; quelle che vanno a capo lasciano la riga e entrano nella nuova dal lato da cui sono state spinte, con una dissolvenza veloce. Quando la luna occupa più spazio l’estratto finisce prima, con i puntini. A sinistra della colonna la luna è una falce, al centro un quarto, a destra piena: la parte in ombra è color crema. Uscendo dal testo la luna torna galleggiando al suo posto e le parole tornano con lei. In fondo, sotto un’altra riga, Words by Ines Marlow e Read the essay con una freccia: in hover la scritta prende peso e si fa vermiglia, e la freccia va avanti.
Come funziona
Le parole misurate una volta
Il testo vero sta in un paragrafo nascosto per i lettori di schermo; lo script ne fa uno span per parola, li misura una volta sola nel loro carattere (aspetta che Newsreader sia caricato con document.fonts.load) e misura anche lo spazio e i puntini. Da lì in poi l’impaginazione è solo aritmetica, abbastanza veloce da rifarla a ogni fotogramma.
Ogni riga tagliata dalla luna
Per ogni riga si cerca dove la luna, allargata di ROOM, è più larga dentro l’altezza della riga: la corda del cerchio alla distanza minima dal centro. La riga diventa uno o due pezzi, a sinistra e a destra della luna, e i pezzi più stretti di 30 pixel si saltano. Le parole riempiono i pezzi in ordine di lettura; se non ci stanno tutte si rifà l’ultimo pezzo tenendo il posto per i puntini.
Molle che non si urtano
Ogni parola ha una molla verso il suo posto, più rigida vicino alla luna e più morbida lontano (RIPPLE), così il testo cede dalla luna verso fuori. Dopo ogni passo un vincolo tiene le parole dello stesso pezzo in ordine, a mezzo spazio l’una dall’altra e dentro il pezzo, con un giro avanti e uno indietro: si stringono ma non si accavallano mai.
Chi va a capo non attraversa il testo
Una parola che cambia riga, con una molla sola, volerebbe in diagonale sopra le altre: invece salta subito sulla riga nuova, sedici pixel prima o dopo il suo posto (dal lato da cui è stata spinta), con l’opacità a 0,3, e da lì la molla la porta al suo posto mentre torna piena.
La luna e la sua fase
La luna è un button con un SVG: un disco in ombra e la parte illuminata, un path di due archi (mezzo cerchio e il terminatore, un’ellisse col raggio orizzontale |1 − 2f|·R). La frazione illuminata f va dal 22% a sinistra al 100% a destra (PHASES). Segue il puntatore su una molla (FOLLOW) e, quando nessuno la tiene, torna in alto a destra; il ticker di GSAP si ferma quando luna e parole sono ferme.
Tastiera e tocco
Col Tab si arriva alla luna (il cerchio diventa una riga piena): le frecce la spostano di 14 pixel, con Maiuscolo di 40, Esc e Home la rimandano a posto. Col dito la si trascina (touch-action: none solo sulla luna, il resto della card scorre la pagina) oppure si tocca il testo e lei ci va; un tocco fuori dalla card la rimanda a posto.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RADIUS | script.js | 36 | Il raggio della luna, in pixel. |
ROOM | script.js | 10 | Lo spazio che le parole lasciano intorno alla luna, in pixel. |
FOLLOW | script.js | [120, 0.8] | La molla della luna: quanto è rigida e quanto è frenata (1 = senza rimbalzi). |
WORDS | script.js | [320, 0.72] | La molla di ogni parola vicino alla luna: rigidità e freno. |
RIPPLE | script.js | 0.3 | Quanto sono più morbide le molle delle parole lontane dalla luna (0 = tutte uguali). |
PHASES | script.js | true | La luna cambia fase attraversando la colonna; spento, è sempre piena. |
LINES | script.js | 9 | Quante righe ha l’estratto. |
Quando usarla
Per l’anteprima di un articolo in un blog, in una rivista online o nella newsletter di uno studio: la card di un saggio, di un racconto, di un’intervista. L’illustrazione può essere qualunque forma rotonda: un piatto per una ricetta, un disco per una recensione, un sole per un diario di viaggio.
Sul telefono
La card è larga 340 pixel, o lo schermo meno 32, e l’impaginazione si rifà sulla larghezza vera. Il dito trascina la luna, e la pagina sotto non scorre solo quando il dito parte dalla luna; un tocco sul testo la porta lì e lei resta finché non si tocca fuori dalla card. Le molle sono quelle del computer.
Con il movimento ridotto
La luna non segue il puntatore: si sposta con un clic sul testo, con il dito o con le frecce, e il testo si ricompone di colpo dietro una breve dissolvenza, già al suo posto. Niente molle e niente entrata.
Trappole
- Con una molla per parola, le parole che andavano a capo volavano in diagonale sopra le altre e, mentre la luna si muoveva, il testo diventava un mucchio illeggibile: ora chi cambia riga salta subito sulla riga nuova e ci entra di lato.
- Anche sulla stessa riga le molle diverse facevano accavallare le parole vicine: serve un vincolo dopo ogni passo che le tiene in ordine a mezzo spazio di distanza.
- Il vincolo spingeva le ultime parole di una riga fuori dal bordo della card: ogni spinta in avanti è limitata alla fine del pezzo di riga, e dopo il giro avanti c’è quello indietro.
- Misurate prima che il carattere arrivasse, le parole avevano la larghezza di Georgia e alla fine le righe sforavano: l’impaginazione aspetta document.fonts.load per Newsreader e si rifà se arriva un carattere dopo.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0, Inter Tight (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,0 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.
