Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
Gli aghi che scrivono
Un campo di trattini sottili, come aghi di bussola, che si girano tutti verso il puntatore con un ritardo a onda e un piccolo rimbalzo. Dove il puntatore si ferma, gli aghi intorno si stendono in righe e scrivono una parola in negativo; muovendolo, la lasciano andare. Dello stile minimal.
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>Needles that write</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the field: a grid of thin needles drawn on a canvas by the script -->
<canvas class="field" data-field aria-hidden="true"></canvas>
<!-- the mark: a small needle that turns with the others, and the name -->
<header class="mark" data-label>
<svg class="mark__needle" data-mark viewBox="-12 -12 24 24" aria-hidden="true">
<path class="mark__tail" d="M0 0 L-2.6 0 L0 10.5 L2.6 0 Z"/>
<path class="mark__tip" d="M0 0 L-2.6 0 L0 -10.5 L2.6 0 Z"/>
</svg>
<span class="mark__name" data-rise>Lodestone</span>
</header>
<!-- the hint: what to do, and what to do next once a word is written -->
<p class="hint" data-label>
<span class="hint__roll" data-roll>
<span class="hint__line" data-hint-idle>Rest the pointer anywhere.</span>
<span class="hint__line" data-hint-word>Move, and the needles let go.</span>
</span>
</p>
<!-- the word the needles are writing, for screen readers -->
<p class="sr" data-said></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.
17 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 «Gli aghi che scrivono» da Animorio e adattala al mio sitoCosa fa
Una pagina color carta coperta da una griglia di trattini sottili, tutti uguali, con in un angolo il marchio inventato Lodestone (una piccola lancetta di bussola accanto al nome) e nell’altro una riga che dice cosa fare. All’apertura gli aghi spuntano dal centro verso i bordi, ognuno con un piccolo scatto elastico, già girati verso nord. Poi ogni ago si gira verso il puntatore, come la lancetta di una bussola verso il magnete: quelli vicini subito, quelli lontani un po’ dopo, così ogni movimento attraversa il campo come un’onda, e ognuno va un filo oltre il suo segno prima di fermarsi. Vicino al puntatore gli aghi si allungano e la loro punta diventa rossa, come il nord di una bussola. Quando il puntatore resta fermo per un attimo, gli aghi intorno si girano in orizzontale e si stendono in righe fitte, mentre fra una riga e l’altra ne spuntano di nuovi, partendo dal puntatore verso fuori: la parola è quello che le righe lasciano vuoto, scritta in negativo dentro un blocco di tratteggio. Le lettere stanno su righe intere, quindi la cima e il piede sono netti, e ogni ago che tocca una lettera si accorcia e scivola di lato quanto basta per non entrarci. Appena il puntatore si rimuove, gli aghi lasciano andare la parola e tornano a guardarlo; alla sosta dopo scrivono la parola successiva (North, Still, Here). Anche la lancetta del marchio segue il puntatore, e la riga in basso cambia frase con un piccolo rotolo quando la parola è scritta. Senza nessun puntatore sulla pagina, un puntatore invisibile fa da solo il giro del campo e si ferma tre volte.
Come funziona
Il campo su un canvas
Gli aghi sono i punti di una griglia, a CELL pixel l’uno dall’altro (meno sul telefono, perché le parole abbiano abbastanza righe). Per ognuno lo script tiene in array tipizzati l’angolo, la lunghezza e uno spostamento lungo la sua riga, ognuno con la sua velocità. A ogni fotogramma li disegna tutti su un solo canvas, raggruppati per spessore: un tracciato per spessore, prima l’inchiostro e poi le punte rosse. Gli aghi dove stanno le due scritte non ci sono.
L’onda che viene dalla memoria
Lo script ricorda dove era il puntatore negli ultimi secondi. Ogni ago non guarda il puntatore di adesso ma quello di qualche istante fa, tanto più vecchio quanto più l’ago è lontano (WAVE millisecondi per pixel). Per non cercare nella memoria migliaia di volte, i ritardi sono divisi in 48 scaglioni: a ogni fotogramma si calcola la posizione di ogni scaglione e l’ago prende la sua.
Ogni ago è una molla
L’angolo, la lunghezza e lo spostamento seguono il loro bersaglio come molle smorzate, calcolate in piccoli passi di un centoventesimo di secondo: è questo che dà il leggero rimbalzo. BOUNCE abbassa lo smorzamento. L’angolo prende sempre la strada più corta (si toglie o si aggiunge un giro intero), così un ago non fa mai un giro completo per arrivare di poco più in là.
La parola in negativo
Quando il puntatore si ferma, lo script sceglie le lettere più grandi che ci stanno, prova tre larghezze del carattere variabile e le mette su righe intere di aghi. Dentro il blocco le righe sono il doppio: fra due righe di aghi ce n’è una terza che esce dal nulla, già in orizzontale, solo per costruire le lettere, così le diagonali della N e le curve della O e della R vengono continue. La parola si disegna in nero su un canvas nascosto e, per ogni ago del blocco, si guardano diciassette punti lungo la sua riga: il tratto più lungo libero dalle lettere è quello che resta dell’ago, che si accorcia e scivola lì. Gli aghi interamente dentro una lettera spariscono.
La scrittura a onda e il giro da solo
Un solo numero, write, va da 0 a 1 con GSAP; ogni ago lo sente in ritardo secondo la sua distanza dal centro della parola, quindi la scrittura parte dal puntatore e si allarga. Sopra un terzo l’ago gira in orizzontale. Lasciando la parola lo stesso numero torna a 0. Senza puntatore, una timeline GSAP che si ripete sposta un puntatore invisibile su tre soste e a ognuna chiama la scrittura; il primo movimento vero la ferma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['NORTH', 'STILL', 'HERE'] | Le parole che gli aghi scrivono, una a ogni sosta, a turno. Meglio corte e in maiuscolo: le lettere sono fatte di righe di aghi. |
CELL | script.js | 18 | La distanza fra due aghi su uno schermo largo, in pixel. Sul telefono diventa più piccola da sola. |
WAVE | script.js | 0.6 | Quanto in ritardo si girano gli aghi lontani: millisecondi per ogni pixel di distanza dal puntatore (0 = tutti insieme). |
BOUNCE | script.js | 0.5 | Quanto gli aghi vanno oltre il loro segno prima di fermarsi (0 = per niente). |
REACH | script.js | 6 | Fin dove, intorno al puntatore, gli aghi si allungano e prendono la punta rossa, in aghi. |
REST | script.js | 0.3 | I secondi che il puntatore deve restare fermo prima che la parola venga scritta. |
WRITE_TIME | script.js | 1 | I secondi che la scrittura impiega ad allargarsi dal puntatore fino al bordo del blocco. |
WEIGHT | script.js | 760 | Il peso delle lettere ritagliate, da 200 a 900: più leggere hanno più tratteggio dentro, più pesanti si leggono più forti. |
Quando usarla
In apertura di un sito di design, di uno studio di architettura o di un marchio che vuole una prima pagina silenziosa ma viva: il campo reagisce subito e premia chi si ferma con una parola (il nome, un motto, una data). Funziona anche come sfondo di una pagina «chi siamo», di una pagina di attesa o come intermezzo fra due sezioni.
Sul telefono
La stessa animazione con le misure adattate: gli aghi sono più fitti e un po’ più sottili, così le lettere hanno righe abbastanza, e il carattere si stringe per far stare la parola nella larghezza. Il dito è il puntatore: trascinando gli aghi lo seguono a onda, staccandolo la parola si scrive dove si è fermato, e un tocco nuovo la lascia andare. Dopo qualche secondo senza tocchi il giro da solo riparte.
Con il movimento ridotto
Niente gira e niente si sposta: gli aghi stanno fermi verso nord e la prima parola è già scritta in mezzo. Fermando il puntatore in un altro punto (o toccando), la parola sparisce in dissolvenza e ricompare lì, già scritta.
Trappole
- Con una sola riga di aghi ogni 18 pixel la parola sembrava fatta di sbarre rotte: la N a pezzi, la O e la R difficili da distinguere. Le righe raddoppiate dentro il blocco, le lettere più alte, un peso pieno ma non nerissimo, un po’ di spaziatura e la larghezza scelta fra tre (quella che dà più righe) le rendono leggibili al primo colpo, anche sul telefono.
- Un ago che si accorcia fino a pochi pixel, con le punte tonde, diventa un puntino: sotto una certa lunghezza non si disegna proprio, e un tratto libero più corto di un quarto d’ago non resta.
- Il puntatore che fa il giro da solo non va spento con killTweensOf sull’oggetto che muove: ucciderebbe anche i tween dentro la timeline del giro, che non ripartirebbe più. Si ferma la timeline e si toglie solo il tween del ritorno.
- Le lettere messe a caso in altezza venivano tagliate a metà da una riga di aghi, con la cima sfrangiata: la cima e il piede delle maiuscole cadono esattamente fra due righe (contando anche quelle in mezzo).
- Per l’angolo bisogna sempre prendere la strada più corta, togliendo o aggiungendo un giro intero al bersaglio: altrimenti un ago che passa da 179 a -179 gradi fa un giro completo.
- Il pilota delle anteprime col puntatore non si ferma mai: per mostrare la parola nel video la demo ha il suo giro da sola, guidato da una timeline GSAP, e la scheda usa il pilota loop.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
