Il codice che va a capo

Codice, Testo, TransizioniGSAP, Solo CSSImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

Il blocco di codice della documentazione di un piccolo SDK per pubblicare articoli, nello stile minimal: filetti sottili, grigi e un blu solo per i valori. Premendo Wrap lines le righe lunghe vanno a capo dal vivo: le righe sotto fanno spazio, poi la coda di ogni riga lunga esce da sotto il bordo destro, scende di una riga e scivola nel suo rientro, parola dopo parola, ognuna sulla sua molla, più leggera mentre corre e più piena quando si posa. I numeri delle righe seguono, e nel margine si disegna un filetto accanto alle righe della stessa riga. Copy mette il codice negli appunti e disegna una spunta.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The code that wraps</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/recursive@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- a code block from the docs of a small publishing SDK, Slugline. Wrap lines bends the long lines live: the tail
         of each one comes out from under the right edge, drops a row and slides into its hanging indent, word after
         word, while the lines below make room and their numbers follow. Copy puts the code on the clipboard and
         draws a tick -->
    <section class="snippet" aria-label="Publish a post with the Slugline SDK" data-snippet data-autoclic>
      <header class="snippet__bar">
        <span class="file" data-file>publish.ts</span>
        <div class="tools">
          <button class="tool wrap" type="button" role="switch" aria-checked="false" data-wrap>
            <svg class="wrap__icon" viewBox="0 0 20 20" aria-hidden="true">
              <path class="wrap__edge" d="M15.5 3.5V16.5"/>
              <path class="wrap__line" d="M3 7L19 7C19 7 19 7 19 7L19 7" data-wrap-line/>
              <path class="wrap__head" d="M17 5L19 7L17 9" data-wrap-head/>
            </svg>
            <span class="tool__label" data-wrap-label>Wrap lines</span>
          </button>
          <button class="tool copy" type="button" data-copy>
            <svg class="copy__icon" viewBox="0 0 20 20" aria-hidden="true">
              <g data-sheets>
                <rect x="7" y="7" width="9.5" height="9.5" rx="2"/>
                <path d="M13 7V5.5a2 2 0 0 0-2-2H5.5a2 2 0 0 0-2 2V11a2 2 0 0 0 2 2H7"/>
              </g>
              <path class="copy__tick" pathLength="1" d="M4.5 10.4l3.6 3.6 7.6-7.8" data-tick/>
            </svg>
            <span class="copy__label"><span data-copy-label>Copy</span></span>
          </button>
        </div>
      </header>
      <div class="code" role="region" aria-label="publish.ts" tabindex="0" data-code>
        <div class="code__gutter" aria-hidden="true" data-gutter></div>
        <div class="code__view" data-view>
          <div class="code__sheet" aria-hidden="true" data-sheet></div>
        </div>
        <pre class="sr" data-text></pre>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </section>
  </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.

28 valori da cambiare

Apri il Playground

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 codice che va a capo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianca un blocco di codice quasi bianco, con un filetto grigio intorno. In alto il nome del file, publish.ts, in grigio, e a destra due comandi: Wrap lines, con una piccola icona di una riga che corre oltre un margine, e Copy, con due fogli. Sotto, dieci righe di codice di Slugline (un SDK inventato per pubblicare gli articoli di un blog) in Recursive monospaziato: le parole del linguaggio nere e più piene, i nomi neri, i segni e il commento in grigio (il commento in corsivo), i testi e i valori in blu. A sinistra i numeri delle righe, piccoli e grigi. Tre righe sono troppo lunghe e finiscono sotto una sfumatura sul bordo destro; il codice scorre di lato. Premendo Wrap lines l'icona si piega (la riga torna indietro prima del margine) e diventa blu, la scritta prende peso, e le righe vanno a capo: prima le righe sotto scendono per fare spazio, una dopo l'altra; insieme la coda di ogni riga lunga scende di una riga, poi scivola a sinistra fino al suo rientro (quello della riga più due spazi), la prima parola davanti e le altre dietro a pochi millesimi l'una dall'altra, come un trenino che si allunga e si richiude. Mentre corrono le parole si alleggeriscono sull'asse del peso; quando si posano vanno un pixel oltre, tornano e prendono peso per un momento. I numeri restano sulla prima riga di ogni riga, il blocco si allunga, e nel margine si disegna dall'alto un filetto grigio accanto alle righe andate a capo. Premendolo di nuovo le code tornano indietro: prima scivolano a destra, la testa davanti, poi salgono; poi le righe sotto risalgono e il blocco si accorcia. Copy mette il codice negli appunti: i fogli si stringono e spariscono, si disegna una spunta blu e la scritta rotola in Copied; dopo un poco torna Copy.

Come funziona

Il codice su una griglia

Ogni riga del file è tagliata in parole e spazi da una regex (commenti, testi fra virgolette o accenti gravi, cifre, nomi, segni); un nome è del linguaggio se è in un elenco, una funzione se dopo c'è una parentesi, un nome di proprietà se prima c'è un punto. Gli spazi non diventano elementi: contano solo come colonne. Recursive con l'asse MONO a 1 è monospaziato e non cambia larghezza col peso né con l'inclinazione, quindi una misura sola (60 zeri, getBoundingClientRect) dà la larghezza di un carattere, e ogni parola sa dove sta: colonna per larghezza, riga per altezza. Le parole sono span in position absolute, spostate con un transform.

Andare a capo come un editor

Con Wrap lines acceso, una riga che supera le colonne del riquadro si spezza nel posto più tardo possibile: dopo uno spazio nella seconda metà della riga, se no dopo una virgola o una parentesi aperta, se no prima di un punto; gli spazi in testa alla riga nuova si saltano. Le righe dopo la prima cominciano al rientro della riga più HANG spazi (mai oltre metà riga). Spento, ogni riga sta su una riga sola, il foglio è largo quanto la riga più lunga e il riquadro scorre di lato, con una sfumatura sul bordo (una mask-image con due @property animate) che dice che c'è altro codice.

FLIP su molle

Al cambio ogni parola tiene dove sta e riceve il posto nuovo, più due istanti: quando comincia a scendere e quando comincia a scivolare. Una molla smorzata per asse (SPRING: rigidezza e smorzamento, 0,86 vuol dire un pixel oltre e il ritorno) la porta lì, con passi di al massimo 1/120 di secondo e mai più di 1/30 per fotogramma. Se si preme di nuovo a metà, le molle cambiano meta da dove sono, senza salti; anche il riquadro che cambia larghezza dà le mete nuove, e le parole seguono.

La coreografia

Andando a capo, ogni riga parte ROW_STAGGER dopo quella sopra, così quelle sotto fanno spazio per prime; la coda di una riga lunga scende con la sua riga e un poco dopo, LEAD secondi più tardi, comincia a scivolare a sinistra: il percorso gira l'angolo. Nella coda la parola di testa parte per prima e le altre dietro di WORD_STAGGER. Tornando indietro l'ordine si rovescia: le code scivolano a destra (la parola più a destra davanti), poi salgono, e solo dopo le righe sotto risalgono e il blocco si accorcia. I numeri delle righe hanno la loro molla e seguono la prima riga di ogni riga.

Il peso che corre e si posa

A ogni fotogramma la velocità di una parola toglie fino a THIN al suo peso (asse wght di Recursive); quando una parola che viaggiava arriva a meno di un pixel dalla meta, per 0,42 secondi prende fino a LAND di peso in più, su un arco di seno. Il carattere resta largo uguale, quindi niente si sposta; font-variation-settings si riscrive solo quando cambia. Quando niente si muove il ciclo si ferma.

Copy, la tastiera e l'anteprima

Copy scrive negli appunti con navigator.clipboard, se no con un campo nascosto ed execCommand, se no seleziona il testo; la conferma passa da aria-live, e il codice vero sta in un pre leggibile dagli screen reader. Wrap lines è un button con role=switch e aria-checked, e risponde anche ad Alt+Z come negli editor. Un clic da script sul blocco (l'anteprima della libreria) fa il giro intero in una timeline: va a capo, copia, torna com'era.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`CODE`	script.js	`["// Publish a draft, then refresh every page that lists it", "import { createClient } from '@slugline/sdk';", …]`	Il codice, una riga del file per ogni voce. Le tabulazioni diventano due spazi.
`START_WRAPPED`	script.js	`false`	Se le righe lunghe partono già a capo.
`HANG`	script.js	`2`	Di quanti spazi più dentro cominciano le righe di una riga andata a capo.
`SPRING`	script.js	`[150, 0.86]`	La molla su cui si muove ogni parola: quanto è rigida e quanto è smorzata (1 = nessun rimbalzo).
`ROW_STAGGER`	script.js	`0.014`	I secondi fra una riga e quella sotto.
`WORD_STAGGER`	script.js	`0.01`	I secondi fra una parola e la successiva della stessa coda.
`LEAD`	script.js	`0.2`	Di quanto la discesa comincia prima dello scivolo: più è grande, più il percorso fa l'angolo.
`THIN`	script.js	`150`	Quanto peso perde una parola mentre corre, sull'asse wght.
`LAND`	script.js	`170`	Quanto peso prende per un momento una parola quando si posa.
`COPIED`	script.js	`1.6`	I secondi che Copied resta prima di tornare Copy.

Provali nel Playground

Quando usarla

Per la documentazione di un SDK, di un'API o di uno strumento da riga di comando, la guida d'installazione di un prodotto, il blog tecnico di uno studio o di uno sviluppatore: ovunque ci siano esempi di codice con righe lunghe da leggere sul telefono.

Sul telefono

Sotto i 480 pixel il codice scende a 12 pixel e il margine dei numeri si stringe, così stanno circa 40 caratteri per riga: spento, il codice scorre di lato col dito; acceso, le righe vanno a capo anche due o tre volte, con le stesse molle e la stessa coreografia. Sotto i 360 pixel il nome del file si nasconde per lasciare spazio ai due comandi. I tocchi non aspettano il doppio tocco (touch-action manipulation), e niente sfora di lato.

Con il movimento ridotto

Le parole vanno subito al posto nuovo e il codice riappare con una dissolvenza; il filetto nel margine compare senza disegnarsi, l'icona di Wrap lines cambia senza piegarsi, la spunta e la scritta di Copy cambiano senza muoversi, e l'entrata è una dissolvenza sola.

Trappole

Le code che scendevano e scivolavano insieme tagliavano in diagonale la riga sotto, che non aveva ancora fatto spazio: ora la coda scende insieme alla sua riga (le righe sotto partono un attimo prima) e scivola LEAD secondi dopo, quando la riga è libera.
Con la discesa dopo la riga, la coda restava ferma sopra mentre la sua riga scendeva e sembrava staccata: la discesa della coda parte con quella della sua riga, e lo spostamento è uguale a quello della riga sotto, quindi non si toccano.
Il ResizeObserver sul riquadro scattava a ogni fotogramma mentre il blocco cresceva in altezza e rimetteva di colpo l'altezza finale, che saltava: conta solo quando cambia la larghezza.
Con lo scorrimento laterale a metà, andando a capo le parole saltavano a sinistra: lo scorrimento torna a zero e la stessa distanza si toglie alla posizione e alla meta di ogni parola, che parte da dove si vedeva.
Prima che arrivi il carattere le parole stavano tutte nell'angolo in alto: restano nascoste finché document.fonts.load non ha caricato Recursive e la griglia non è misurata.
Mentre il blocco va a capo il foglio si stringe, ma le parole ancora a destra allargherebbero l'area da scorrere e farebbero comparire lo scorrimento: acceso, il riquadro non scorre (overflow hidden), spento sì.

Librerie

GSAP 3.15.0, Recursive (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 16 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.