Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il titolo di corda
Un rocchetto di legno cade e gira, e una corda intrecciata ne esce srotolandosi e scrive il titolo in corsivo, tutto di fila; dove la corda si incrocia si fa un nodo che si stringe con uno scatto, e il capo sfilacciato dondola. Poi qualcuno tira il capo: la corda corre fuori dalle sue lettere e tutto riparte. Un clic tira il capo.
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 rope title</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" data-scene>
<!-- the title, for screen readers: the rope only draws it -->
<h1 class="leggibile" data-reader>Bowline. Ropes, sails and rigging</h1>
<!-- the stage: the script sizes it to the window and draws the spool, the rope, the knots and their shadows -->
<svg class="palco" data-stage aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%" data-blur>
<feGaussianBlur stdDeviation="4" data-blur-amount />
</filter>
<radialGradient id="brass" cx="38%" cy="34%" r="70%">
<stop offset="0" class="t-brass-light" />
<stop offset="0.55" class="t-brass" />
<stop offset="1" class="t-brass-dark" />
</radialGradient>
<radialGradient id="wood" cx="42%" cy="38%" r="68%">
<stop offset="0" class="t-wood-light" />
<stop offset="0.7" class="t-wood" />
<stop offset="1" class="t-wood-dark" />
</radialGradient>
</defs>
<!-- the shadows of everything, blurred once -->
<g class="ombre" filter="url(#soft-shadow)" data-shadows>
<circle data-spool-shadow />
<path class="ombra-corda" data-rope-shadow />
<g data-knot-shadows></g>
</g>
<!-- the spool, seen face on: the wooden flange, the coils of rope still on it and the brass hub -->
<g data-spool>
<g data-spool-body>
<g data-spool-turn>
<circle class="flangia" data-flange />
<g class="venature" data-grain></g>
<g data-holes></g>
</g>
<g data-coils>
<path class="corda-fondo" data-coil-base />
<path class="corda-trefoli" data-coil-strands />
<path class="corda-luce" data-coil-light />
</g>
<g data-hub-turn>
<circle class="mozzo" data-hub />
<path class="mozzo-taglio" data-hub-slot />
</g>
</g>
</g>
<!-- the rope: a dark core, the twisted strands, the light on every strand, the frayed tip and the whipped end -->
<g data-rope>
<path class="corda-fondo" data-rope-base />
<path class="corda-trefoli" data-rope-strands />
<path class="corda-luce" data-rope-light />
<path class="sfilacci" data-fray />
<path class="legatura" data-whip />
</g>
<!-- the knots where the rope crosses itself, and the dots of the i and the j -->
<g data-knots></g>
</svg>
<p class="sotto" data-sub>Ropes, sails & rigging since 1962</p>
<p class="nota" data-hint>Click to pull the end</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.
25 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 di corda» da Animorio e adattala al mio sitoCosa fa
Su un fondo blu scuro da porto di notte cade dall’alto un rocchetto di legno visto di fronte, con le venature, i fori e il mozzo d’ottone con la croce: rimbalza, si schiaccia un attimo e oscilla prima di fermarsi. Sopra ha quattro giri di corda di canapa. Il rocchetto comincia a girare e la corda ne esce dall’alto: i trefoli intrecciati scorrono lungo la corda mentre avanza, il capo sfilacciato va per primo con i fili aperti a ventaglio, e la corda scrive in corsivo, tutto di fila, il nome di un negozio di nautica inventato, «bowline». Fa gli occhielli della b e della l, gira intorno alla o e alla e, e ogni volta che passa sopra un pezzo già scritto lì si fa un nodo: compare largo, gira su sé stesso e si stringe di colpo con un rimbalzo e uno sbuffo di fibre. Il puntino della i è un piccolo nodo che cade dall’alto e rimbalza al suo posto. Intanto sul rocchetto i giri di corda calano e compaiono i fori del legno. L’ultimo pezzo della corda viene lanciato in fuori e poi ricade, dondolando come un pendolo che si smorza; sotto il titolo le lettere della riga «Ropes, sails & rigging since 1962» salgono una dopo l’altra allargandosi. A riposo il capo dondola ancora un poco. Poi qualcuno tira il capo: il pezzo che pende si raddrizza verso destra con uno strappo, i nodi si allentano e spariscono, il puntino della i cade, la riga sotto scivola giù, e la corda corre fuori dalle sue stesse lettere sempre più veloce, mentre il rocchetto gira all’impazzata. Quando il rocchetto è vuoto l’altro capo, legato con tre giri di spago, si stacca e insegue il resto; il rocchetto saltella e rotola via a sinistra, e tutto ricomincia. Un clic tira il capo subito (se la corda sta ancora scrivendo, finisce in fretta e poi viene tirata).
Come funziona
Un corsivo da scrivere con la corda
Le lettere non vengono da un carattere: sono un corsivo legato disegnato per la demo, dalla a alla z, ognuna un tracciato SVG di sole curve (M e C) alto 100 unità all’occhio medio. Ogni lettera comincia dove la corda ci entra e finisce dove esce; fra una lettera e l’altra lo script aggiunge una curva che parte nella direzione dell’uscita e arriva in quella dell’entrata, così la parola è una riga sola. Le curve si appiattiscono in punti tutti alla stessa distanza, e i punti in cui la riga incrocia sé stessa diventano i nodi.
La corda intrecciata
La corda è disegnata da capo a ogni fotogramma su tre tracciati: l’anima scura (la riga dei punti con un tratto spesso), i trefoli e la luce sui trefoli. Ogni trefolo è una lente inclinata: quattro angoli presi ai due bordi della corda, spostati lungo la riga, con due curve che si gonfiano in avanti e indietro; sopra c’è una lente più sottile e chiara. I trefoli stanno a passo fisso contando dal capo, quindi quando la corda avanza scorrono con lei. Sotto, la stessa riga con un filtro di sfocatura fa l’ombra.
Il rocchetto
La corda che resta sul rocchetto è disegnata con la stessa funzione, ma lungo dei cerchi: tanti giri interi quanti ne restano e un ultimo giro parziale che finisce in cima, dove parte la corda. Il rocchetto gira di quanta corda è uscita diviso il raggio, e la prima curva della corda parte dal giro più esterno: man mano che il rocchetto si svuota, la partenza scende verso il mozzo e i fori del legno si scoprono. Lo stato è un solo oggetto (corda uscita, oscillazione del capo, posizione del rocchetto) che la timeline GSAP muove e una funzione disegna.
I nodi e il capo che dondola
Per ogni incrocio la timeline calcola quando il capo ci passa sopra, rovesciando la curva dell’andatura, e lì aggiunge il nodo: un anello di corda, sempre con la stessa funzione, che compare largo, gira e si stringe con back.out, mentre uno sbuffo di fibre si allarga intorno. L’ultimo pezzo, il capo che pende, è tenuto come una lista di direzioni: l’oscillazione le piega di più verso la punta, quindi la lunghezza resta giusta. Viene lanciato in fuori mentre si scrive e ricade con elastic.out.
Tirare il capo
Tirare vuol dire raddrizzare il capo verso destra e poi far correre la corda: dopo il capo la riga continua dritta fuori dallo schermo, e la corda uscita cresce con power2.in. L’altro capo resta sul rocchetto finché c’è corda, poi la segue a distanza fissa; da lì la prima curva resta ferma, così il rocchetto può rotolare via senza trascinarsi dietro la corda. Un clic durante la scrittura accelera la timeline e, arrivata al riposo, la porta subito allo strappo. Con il movimento ridotto il titolo finito compare e sparisce in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TITLE | script.js | 'bowline' | La parola che la corda scrive: lettere dalla a alla z e spazi (le maiuscole diventano minuscole, gli altri segni si saltano). |
SUBTITLE | script.js | 'Ropes, sails & rigging since 1962' | La riga sotto il titolo, che sale lettera per lettera (vuota = niente riga). |
SPEED | script.js | 1 | La velocità della corda, mentre scrive e mentre viene tirata: 2 il doppio, 0.5 la metà. |
ROPE | script.js | 1 | Lo spessore della corda (e del rocchetto): 1.4 una cima da ormeggio, 0.7 un cordino. |
KNOTS | script.js | true | Fa un nodo dove la corda si incrocia (spento: la corda passa sopra sé stessa senza nodi). |
REST | script.js | 2.6 | Quanti secondi il titolo finito resta fermo prima che qualcuno tiri il capo. |
Quando usarla
Per aprire il sito di un negozio di nautica, di una velaria, di un rifugio o di un negozio di montagna e arrampicata, di un marchio di borse o di abbigliamento outdoor, di un bar sul porto; per un titolo fatto a mano che si presenta e se ne va, in una pagina d’attesa o in un post.
Sul telefono
La stessa animazione con le misure adattate: la parola occupa tutta la larghezza, il rocchetto sta sotto a sinistra e la corda sale da lì alla prima lettera, la riga sotto il rocchetto. Corda, nodi e fibre si rimpiccioliscono con lo schermo. Un tocco tira il capo.
Con il movimento ridotto
Niente si muove: il titolo di corda compare già scritto in dissolvenza, con i nodi stretti, il rocchetto e la riga sotto, resta qualche secondo e sparisce in dissolvenza; poi ricomincia. Un clic lo fa sparire subito.
Trappole
- Le lettere con le punte (la base della n, il fondo della b, il centro della w) facevano tornare la corda indietro sulla stessa riga: i trefoli si accartocciavano e restava una macchia scura. Ogni punta è diventata una curva a U larga quanto la corda, o un piccolo occhiello.
- La punta del capo misurata dall’inizio del tracciato si spostava quando il rocchetto cadeva o si svuotava, perché la prima curva cambiava lunghezza: comparivano pezzi di corda dal nulla. Lo stato tiene la corda uscita, e il capo è l’inizio della curva più quella misura.
- Quando il rocchetto rotola via, la prima curva lo seguiva e trascinava la corda: appena il rocchetto è vuoto la curva resta ferma com’era.
- Un clic mentre la corda scrive non può saltare allo strappo (completerebbe di colpo la scrittura e i nodi): la timeline accelera e, al riposo, salta allo strappo.
- Il pezzo che pende, ruotato tutto intorno al suo attacco, si allungava e si spezzava: è tenuto come una lista di direzioni, e l’oscillazione cresce verso la punta.
- I nodi in programma con il tempo della scrittura: con un’andatura non lineare il momento giusto si trova rovesciando la curva con una ricerca a metà, non con una proporzione.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 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.
