Le storie di una frase

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

Le storie di un piccolo museo del disegno fatte solo di tipografia, nello stile minimal: ogni storia è una frase grande. Le parole entrano una dopo l’altra mentre gli assi del carattere si aprono, e la storia si legge da sola nel suo tempo, lettera per lettera, mentre si riempie la barra sottile in alto: la parola nel colore d’accento prende colore e inclinazione solo quando viene letta. Tocco a destra avanti, a sinistra indietro, pressione lunga in pausa.

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, viewport-fit=cover">
  <title>One-sentence stories</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the stories of a small museum of drawing, Velum, made of type alone: every story is one sentence. Its words
         come in one after the other while the font's width and weight open up, and the story reads itself in its own
         time, letter by letter, while the thin bar at the top fills: the word in the accent colour takes its colour
         and its slant only when it is read. A tap on the right goes on, on the left back; holding stops the time.
         The sentences are written by script.js, from STORIES -->
    <section class="stories" aria-label="Stories from Velum" aria-roledescription="stories" data-stories data-autoclic>
      <div class="viewer" data-viewer>
        <div class="bars" aria-hidden="true" data-bars></div>

        <div class="head" data-head>
          <span class="head__name">Velum</span>
          <span class="head__when" aria-hidden="true">
            <span class="head__ago" data-ago></span>
            <span class="head__paused" data-paused-word>Paused</span>
          </span>
          <button class="head__pause" type="button" aria-label="Pause the stories" data-pause>
            <svg class="i-pause" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.5 5.5v13M15.5 5.5v13"/></svg>
            <svg class="i-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.8v12.4l10-6.2z"/></svg>
          </button>
        </div>

        <div class="text" aria-hidden="true" data-text>
          <div class="measure" data-measure></div>
        </div>
        <p class="sr" data-now></p>

        <button class="tap tap--back" type="button" aria-label="Previous story" data-back>
          <svg class="tap__sign" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 5.5L8 12l6.5 6.5"/></svg>
        </button>
        <button class="tap tap--next" type="button" aria-label="Next story" data-next>
          <svg class="tap__sign" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 5.5L16 12l-6.5 6.5"/></svg>
        </button>

        <div class="foot" data-foot>
          <span class="foot__rule" aria-hidden="true" data-rule></span>
          <p class="label" aria-hidden="true" data-label>
            <span class="label__what" data-what></span>
            <span class="label__when" data-when></span>
          </p>
          <button class="again" type="button" hidden data-again>
            <span class="again__word">Watch again</span>
            <svg class="again__sign" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.4 9.2A7 7 0 1 0 19 13.6"/><path d="M19.2 4.8v4.6h-4.6"/></svg>
          </button>
        </div>
      </div>
      <p class="sr" aria-live="polite" aria-atomic="true" 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.

37 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 «Le storie di una frase» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un visore di storie nelle proporzioni di un telefono, quasi nero e bordato da un filo sottile: in alto quattro barre sottilissime, Velum, 2 h e il pulsante della pausa; in basso un filetto e sotto un’etichetta in due parti, come quella di un museo (North wing, Saturday, 10 am). In mezzo, appoggiata sul filetto, una frase sola in Roboto Flex stretto, grande quanto il visore permette: The north wing reopens on Saturday. Le parole arrivano una dopo l’altra dal basso, strette e leggere, e salendo si allargano e prendono peso; il peso arriva un capello oltre e si assesta, la riga sale di un pixel e torna. La frase entra quasi spenta e, mentre la prima barra si riempie, si legge da sola: una testa morbida corre fra le lettere e ognuna prende inchiostro e grado (più piena, senza diventare più larga), con un piccolo colpo nella lettera sotto la testa. La parola fra asterischi, reopens, è un po’ più pesante e prende il vermiglio e l’inclinazione solo quando la testa ci passa sopra, lettera per lettera, con la virgola o il punto che si inclinano con lei. La frase è letta nei primi quattro quinti del tempo, così resta intera per un momento prima della storia dopo. Andando avanti le parole vecchie se ne vanno dalla prima all’ultima, salendo, stringendosi e perdendo peso, e ogni parola nuova aspetta esattamente che quelle che stanno sulla sua strada siano sparite: in nessun istante una parola si vede sopra un’altra. Anche l’etichetta e il tempo cambiano. Tornando indietro succede lo stesso al contrario, verso il basso e dall’ultima parola; sulla prima storia il tempo si riavvolge e la lettura con lui. Tenendo premuto il tempo frena in un quarto di secondo e si ferma, la frase resta com’è, e al posto di 2 h sale Paused. Dopo l’ultima storia il visore dice You are all caught up e offre Watch again.

Come funziona

Una frase misurata in un gemello nascosto

Ogni frase si scrive prima in un gemello invisibile, largo quanto lo spazio della frase, con gli assi finali (wdth WIDTH, wght WEIGHT, la parola d’accento più pesante e già inclinata) e text-wrap: balance, così il browser va a capo e pareggia le righe. Una ricerca per bisezione trova la misura più grande, fino a BIGGEST, in cui la frase sta in altezza e nessuna parola sfora. Poi ogni parola si rifà vera, in posizione assoluta dove il gemello l’aveva messa: da lì gli assi possono muoverla senza che la riga si muova.

Gli assi che lavorano, dentro la propria casella

Ogni parola ha tre proprietà personalizzate, --wd, --wg e --wa, che GSAP anima e che le lettere leggono in font-variation-settings. Le parole nuove partono da una larghezza NARROW mai più larga di quella finale e da un peso sottile, salgono di TRAVEL em con back.out(1,5), un pixel oltre e indietro, e il peso arriva con back.out(1,8): un capello pesante, poi si assesta. Siccome una parola ferma alla sua sinistra si allarga solo verso la sua larghezza finale, non tocca mai la vicina. Quelle vecchie salgono, si stringono e perdono peso in power2.in.

Nessuna parola sopra un’altra

La coreografia si calcola dalla geometria: per ogni parola vecchia si tiene il rettangolo che occupa uscendo (posto più corsa) e l’istante in cui sarà del tutto trasparente; ogni parola nuova, nel suo ordine di lettura e con STAGGER secondi dalla precedente, aspetta il più tardo di quelli che il suo rettangolo d’entrata tocca. Andando avanti le parole vanno dalla prima, tornando indietro dall’ultima e in basso.

La storia che si legge da sola

Il tempo della storia è un tween GSAP di DURATION secondi; da lui si riempie la barra e corre la testa di lettura, con un indice per lettera (gli spazi contano come un respiro). Ogni lettera va con uno smoothstep largo 3,2 lettere da UNREAD all’inchiostro pieno e dal grado -150 a 0: l’asse GRAD di Roboto Flex cambia lo spessore senza cambiare la larghezza, quindi niente si sposta; la lettera sotto la testa prende un colpo di grado in più. Le lettere d’accento passano dall’inchiostro al vermiglio e da slnt 0 a -10 con la stessa curva. Kerning e legature sono spenti, perché lettere con impostazioni diverse non si spostino di frazioni di pixel.

Tenere premuto, frenare, riavvolgere

Le zone del tocco sono due pulsanti veri, Previous story e Next story. Una pressione oltre HOLD secondi non cambia storia: la velocità del tempo va a zero in 0,26 s con power2.out (timeScale del tween), così barra e lettura frenano insieme, e riparte con power1.in. Indietro sulla prima storia il tempo si riavvolge in 0,45 s e la lettura con lui. Il tempo e Paused si scambiano in una fessura: uno esce in alto, l’altro sale da sotto. Un clic da script sul visore (l’anteprima della libreria) fa un giro: prima storia, avanti, indietro, una pressione lunga, avanti fino alla fine.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DURATION`	script.js	`5`	I secondi che dura ogni storia: la frase si legge nei primi quattro quinti.
`HOLD`	script.js	`0.2`	I secondi che deve durare una pressione per fermare il tempo invece di cambiare storia.
`STAGGER`	script.js	`0.05`	I secondi fra l’entrata di una parola e quella dopo.
`TRAVEL`	script.js	`0.3`	Di quanto salgono o scendono le parole entrando e uscendo, in em.
`NARROW`	script.js	`34`	La larghezza del carattere (da 25 a 151) da cui le parole entrano e a cui escono; mai più larga di WIDTH.
`WIDTH`	script.js	`60`	La larghezza del carattere della frase posata, da 25 a 151: più stretta, la frase viene più grande.
`WEIGHT`	script.js	`540`	Il peso della frase, da 100 a 1000.
`ACCENT_WEIGHT`	script.js	`690`	Il peso della parola fra asterischi, quella che prende il colore d’accento.
`UNREAD`	script.js	`0.34`	Quanto inchiostro hanno le lettere prima che la storia le legga, da 0 a 1.
`BIGGEST`	script.js	`72`	La misura più grande che una frase può avere, in pixel su un visore largo 320.
`STORIES`	script.js	`[['The north wing reopens on Saturday.', 'North wing', 'Saturday, 10 am', '2 h'], …]`	Le storie: la frase (la parola fra asterischi prende l’accento), l’etichetta, la sua seconda metà e quanto tempo fa.
`LAST`	script.js	`You are all caught up.`	La frase dopo l’ultima storia, sopra Watch again.

Provali nel Playground

Quando usarla

Per le storie di un museo, di una galleria, di una rivista o di una casa editrice, dove la cosa da dire è una frase: un’apertura, una mostra, un orario, un numero nuovo. O come annunci a tempo in cima a una pagina, senza immagini da preparare.

Sul telefono

Il visore è largo 320 pixel e alto come un telefono, e su schermi bassi si stringe tenendo le proporzioni: le misure dentro sono in cqw e la frase si rimisura. Si tocca a destra e a sinistra e si tiene premuto col dito; il tocco lungo non apre il menu del sistema e non seleziona il testo. Stesse animazioni del computer.

Con il movimento ridotto

Il tempo parte fermo (il pulsante dice Play) e le storie non vanno avanti da sole. Le parole non salgono e non cambiano assi: la frase vecchia svanisce, poi la nuova compare sfumando parola per parola, già letta, con la parola d’accento già colorata e inclinata. Il tempo frena e riparte senza rallentare.

Trappole

Leggere con l’asse del peso avrebbe allargato le lettere e fatto camminare la riga: la lettura usa l’asse GRAD, che cambia lo spessore e non la larghezza, più l’opacità.
Una parola che entra o esce da una larghezza più grande di quella finale invade la vicina: NARROW e i pesi sottili sono tagliati a WIDTH e WEIGHT, e le parole sono ferme alla loro sinistra.
Con una pausa uguale fra le parole, quelle nuove comparivano sopra le vecchie dove le due frasi hanno altezze diverse: ora ogni parola nuova aspetta le vecchie che il suo rettangolo d’entrata tocca.
Il tempo e Paused nello stesso posto, in dissolvenza incrociata, si leggevano 2 hused a metà strada: ora si scambiano in una fessura, prima esce uno e poi sale l’altro.
La virgola dopo la parola inclinata restava dritta e sembrava staccata (first ,): la punteggiatura attaccata alla parola d’accento si inclina con lei, senza prendere il colore.
La frase dopo l’ultima storia non ha tempo che scorre e restava spenta: si legge da sola in 1,3 s appena arriva.
Lo span delle barre è in linea: senza display: block l’altezza di 1,5 pixel non valeva e le barre non si vedevano.
L’anello del focus sulle due grandi zone del tocco tagliava la frase con una riga: per la tastiera la freccia compare intera, più spessa, con un filo sotto.

Librerie

GSAP 3.15.0, Roboto Flex (font variabile, con gli assi della larghezza, del peso, del grado e dell’inclinazione) 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.