Le storie incollate

Storie, Transizioni, ImmaginiCanvas, GSAPImpegnativaPeso compresso: Demo 18 KBGSAP 28 KBGratisScarica lo zip

Le storie di una sala concerti sul porto, e ogni storia è un manifesto attaccato al muro con la colla: andando avanti il manifesto nuovo entra da destra e viene schiaffato sopra il vecchio, pieno di bolle d’aria che una mano spinge fuori dall’alto in basso. La carta bagnata è più scura, luccica sui rigonfiamenti e lascia trasparire il manifesto di sotto; il tempo della storia è la colla che asciuga. Tornando indietro, il manifesto viene strappato dal muro.

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>The pasted stories</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sofia-sans@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sofia-sans-extra-condensed@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the stories of a concert hall, each one a poster pasted on the wall with wheat paste: going on, a new poster
         is slapped over the last one, the hand smooths the air out of it and the wet paper lets the old poster show
         through while the paste dries, which is the story's time; going back, the top poster is torn off. The posters
         are drawn by script.js on the canvas, from STORIES -->
    <section class="stories" aria-label="Stories from Ferry House" aria-roledescription="stories" data-stories data-autoclic>
      <div class="viewer" data-viewer>
        <canvas class="wall" aria-hidden="true" data-wall></canvas>
        <p class="sr" data-now></p>

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

        <div class="top" data-chrome>
          <div class="bars" aria-hidden="true" data-bars></div>
          <div class="head">
            <span class="head__mark" aria-hidden="true">
              <svg viewBox="0 0 32 32">
                <circle class="mark__ground" cx="16" cy="16" r="16"/>
                <path class="mark__house" d="M9 15.5l7-6 7 6v4.5H9z"/>
                <path class="mark__door" d="M14 20v-4h4v4"/>
                <path d="M5.5 23.2c1.8 0 1.8-1.4 3.6-1.4s1.8 1.4 3.6 1.4 1.8-1.4 3.6-1.4 1.8 1.4 3.6 1.4 1.8-1.4 3.6-1.4 1.8 1.4 3.6 1.4" class="mark__sea"/>
              </svg>
            </span>
            <span class="head__name">Ferry House</span>
            <span class="head__when">3 h</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"><rect x="6.5" y="5" width="3.6" height="14" rx="1.2"/><rect x="13.9" y="5" width="3.6" height="14" rx="1.2"/></svg>
              <svg class="i-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.6c0-.9 1-1.5 1.8-1l9.4 5.9c.7.5.7 1.5 0 2l-9.4 5.9c-.8.5-1.8-.1-1.8-1z"/></svg>
            </button>
          </div>
        </div>

        <div class="foot" data-foot>
          <form class="reply" data-reply>
            <label class="sr" for="story-reply">Reply to Ferry House</label>
            <input id="story-reply" type="text" placeholder="Reply to Ferry House" autocomplete="off" enterkeyhint="send" maxlength="140">
          </form>
          <button class="react" type="button" aria-pressed="false" aria-label="Stick a See you there sticker on this story" data-react>
            <svg viewBox="0 0 28 28" aria-hidden="true">
              <path class="react__sheet" d="M7 4.5h10.6l6 6V21a2.5 2.5 0 0 1-2.5 2.5H7A2.5 2.5 0 0 1 4.5 21V7A2.5 2.5 0 0 1 7 4.5z"/>
              <path class="react__fold" d="M17.6 4.5V8a2.5 2.5 0 0 0 2.5 2.5h3.5"/>
              <path class="react__face" d="M10.6 11.4v1.8M15.4 11.4v1.8M10 16.6c1.8 2 4.2 2 6 0"/>
            </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.

57 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 incollate» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco un visore di storie nelle proporzioni di un telefono: in alto cinque barre sottili, il tondo della sala (una casetta sul mare), Ferry House, 3 h e il pulsante della pausa; in basso il campo Reply to Ferry House e il pulsante dell’adesivo. Ogni storia è un manifesto stampato a due o tre colori su carta con la grana: un sole che tramonta sul mare per MARROW & Kite Weather, una porta illuminata in un muro di mattoni per Doors at 8, un biglietto Admit one per Last 30 tickets, la buca di una chitarra con sei corde (una vibra) per Open jam, una pinta con la schiuma che trabocca per New on tap. All’inizio sul muro c’è il manifesto della settimana prima; il primo arriva da destra, staccato dal muro e un po’ storto, con la sua ombra sul vecchio, e mentre rallenta si posa. Appena tocca il muro è bagnato: più scuro, con qualche bolla d’aria che si gonfia con un piccolo rimbalzo e luccica, le pieghe della carta, e sotto, sfocato, il manifesto vecchio. Subito una mano invisibile lo liscia dall’alto in basso: un’onda di carta corre giù, spinge davanti a sé le bolle, che si schiacciano e si allargano, e le fa uscire dal fondo. Poi, mentre la barra si riempie, la colla asciuga a strisce, quelle delle pennellate, prima le più sottili e i bordi: il manifesto vecchio sparisce, la carta schiarisce e smette di luccicare, e restano solo le pieghe più leggere. Un tocco sul terzo sinistro torna indietro: il manifesto viene strappato dall’angolo in alto a sinistra e se ne va ruotando, con l’orlo strappato bianco; una striscia sottile resta attaccata al bordo destro e si sfalda, e sotto c’è il manifesto di prima com’era. Tenendo premuto il tempo si ferma (anche la colla smette di asciugare) e spariscono barre, testata e risposta. Il pulsante dell’adesivo attacca sul manifesto un adesivo smerlato See you there, che scende ruotando e si posa con un rimbalzo; resta lì, sotto i manifesti incollati dopo, e lo si ritrova strappandoli. Dopo l’ultima storia il primo manifesto viene incollato di nuovo sopra l’ultimo.

Come funziona

Manifesti disegnati sulla tela

Ogni manifesto si disegna una volta sola in una tela grande quanto il visore in pixel veri (densità al massimo 2), in unità sue di 320 per 568: il fondo, il disegno con archi, curve e Path2D, le parole centrate e allargate fino a 276 unità con measureText. Sopra, una piastrella di grana e fibre moltiplicata e una sfumatura in soft-light dal lato della luce. Il muro si compone ogni fotogramma da queste tele, senza ridisegnare i manifesti.

Lo schiaffo

Andando avanti il muro com’è viene copiato in una tela sotto. Il manifesto nuovo entra da destra staccato dal muro (scala 1,07, sei gradi, la sua ombra), con x in power2.out per SLAP secondi, mentre nella seconda metà scala e distacco tornano a zero con power2.in: rallenta e si posa nello stesso istante. L’ombra è sfocata una volta sola, col trucco della forma disegnata lontano e della sola ombra spostata sulla tela, perché shadowOffset non segue le trasformazioni.

Il rilievo della carta

La carta è una mappa di altezze su una griglia di 80 per 142 celle: pieghe lunghe (gaussiane lungo un segmento che sfumano alle punte), grumi di colla (rumore liscio) e BUBBLES bolle d’aria ellittiche, che all’impatto si gonfiano con elastic.out. Il fronte della mano scende in SMOOTH secondi con power1.inOut, un po’ ondulato e storto; davanti a sé spinge le bolle, che schiacciate si allargano più di quanto si alzino, e un’onda di carta; dietro, le pieghe si appiattiscono al 38%. Ogni fotogramma le differenze centrali danno la pendenza: il prodotto con LIGHT fa luce e ombra (una piccola tela grigia stesa in overlay) e, dove è bagnata, la direzione a metà fra luce e occhio fa il luccichio.

La colla che asciuga

Ogni cella ha il suo momento di asciugarsi: lo spessore della colla, fatto di strisce come le pennellate più un rumore, per la distanza dal bordo. L’umidità va da 1 a 0 con uno smoothstep largo mentre il tempo della storia scorre, e la carta è asciutta prima che la barra sia piena. Bagnata, la carta moltiplica il colore per un grigio caldo più scuro e lascia passare il manifesto di sotto: rimpicciolito a un settimo e riallargato (la carta lo sfoca), ritagliato con destination-in da una maschera alta SHOW_THROUGH per il quadrato dell’umidità, e moltiplicato. Senza tempo che scorre (pausa, pressione, focus) la colla non asciuga e non si ridisegna niente.

Lo strappo

Tornando indietro il muro si congela in una tela e il manifesto di sotto si ricalcola asciutto. La linea dello strappo corre vicino al bordo destro, fatta di tre sinusoidi e di un po’ di rumore; da lì due Path2D, il pezzo e quello che resta. Il pezzo ruota fino a 24 gradi attorno all’angolo in alto a sinistra mentre esce con power2.in in TEAR secondi, con la sua ombra e l’orlo bianco della carta strappata; la striscia rimasta si sfalda scendendo un poco. Alla fine il manifesto rivelato è proprio quello calcolato per la tela di sotto: nessuno scatto.

Pulsanti, tempo e anteprima

Le zone del tocco sono due pulsanti veri, Previous story e Next story, con la freccia che compare al mouse e alla tastiera; la pausa è un pulsante nella testata, e le frecce della tastiera vanno avanti e indietro. Una pressione oltre HOLD secondi ferma il tempo e nasconde tutto tranne il manifesto, senza far cambiare storia. Il tempo si ferma anche quando la tastiera entra nelle storie o si scrive una risposta (il pulsante dice Play, e premuto fa ripartire); una regione aria-live dice la storia nuova, l’adesivo e la risposta. Un clic da script (l’anteprima della libreria) va avanti, attacca un adesivo, va avanti, strappa, e va avanti due volte.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DURATION`	script.js	`6`	I secondi che dura ogni storia: entro questo tempo la colla è asciutta.
`SLAP`	script.js	`0.4`	I secondi in cui il manifesto nuovo entra e viene schiaffato sul muro.
`SMOOTH`	script.js	`0.62`	I secondi in cui la mano liscia il manifesto dall’alto in basso.
`TEAR`	script.js	`0.5`	I secondi in cui il manifesto viene strappato, tornando indietro.
`HOLD`	script.js	`0.22`	I secondi che deve durare una pressione per fermare il tempo invece di cambiare storia.
`BUBBLES`	script.js	`8`	Le bolle d’aria sotto un manifesto appena incollato.
`SHOW_THROUGH`	script.js	`0.22`	Quanto il manifesto di sotto traspare dalla carta bagnata, da 0 a 1.
`SHINE`	script.js	`0.8`	Quanto luccica la carta bagnata sui suoi rigonfiamenti, da 0 a 1.
`LIGHT`	script.js	`[-0.55, -0.83]`	Da dove viene la luce, in orizzontale e in verticale: così dall’alto a sinistra.
`STORIES`	script.js	`[['sun', 'MARROW', '& Kite Weather', 'Friday 20 November, doors at 8', '#e4472b', '#f6ecd8', '#f0b53c'], …]`	I manifesti: il disegno (sun, door, ticket, strings, pint), le parole grandi (la barra \| va a capo), quelle più piccole, l’ultima riga, il fondo, l’inchiostro e il colore d’accento.

Provali nel Playground

Quando usarla

Per le storie di un locale, di un teatro, di un festival o di una libreria che appende locandine: concerti, serate, biglietti agli sgoccioli, novità al banco. O come galleria a tempo per una campagna di manifesti.

Sul telefono

Il visore è largo 320 pixel e alto come un telefono, e su schermi bassi si stringe tenendo le proporzioni. 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. La tela si disegna al massimo a densità 2.

Con il movimento ridotto

Il tempo parte fermo (il pulsante dice Play) e le storie non vanno avanti da sole. Niente volo, bolle, mano o strappo: un manifesto svanisce sul muro e l’altro compare, già asciutto, senza che le loro parole si sovrappongano; l’adesivo compare sfumando.

Trappole

Il manifesto di sotto, fatto trasparire nitido, raddoppiava i titoli (le lettere vecchie dentro quelle nuove): la carta bagnata lo sfoca, quindi si rimpicciolisce a un settimo e si riallarga, e la sua forza va col quadrato dell’umidità, così sparisce prima che la carta schiarisca.
Un manifesto staccato dal muro ma grande quanto il visore sembra uguale a uno incollato (l’ombra gli resta sotto): con l’ingresso e la posa in sequenza restava un quarto di secondo fermo. Ora rallenta e si posa nello stesso istante.
Una Path2D dopo rect() e arc() unisce l’angolo del rettangolo all’inizio dell’arco con una riga: il ritaglio evenodd delle tacche del biglietto tagliava uno spicchio. Serve un moveTo prima di ogni arco.
Una bolla spinta in fondo dalla mano diventava più alta e il suo luccichio copriva le parole sotto il titolo: schiacciata, una bolla si allarga molto e si alza poco.
La striscia che resta sul muro dopo lo strappo copriva il manifesto rivelato: è stretta (dieci-trenta unità) e si sfalda prima che il pezzo se ne vada.
shadowBlur e shadowOffset non seguono le trasformazioni della tela: l’ombra del manifesto in volo e del pezzo strappato si sfuma una volta sola su una tela a parte, disegnando la forma lontano e spostando solo l’ombra, e poi si disegna con la stessa trasformazione del foglio.
Col movimento ridotto una dissolvenza incrociata metteva le parole di due manifesti una sopra l’altra a metà strada: prima uno svanisce sul muro, poi compare l’altro.
Su iPhone un tocco lungo può non mandare il clic: il segno che fa ignorare il clic dopo una pressione si azzera a ogni nuova pressione, o il tocco dopo andrebbe perso.

Librerie

GSAP 3.15.0, Sofia Sans (font variabile) 5.3.0, Sofia Sans Extra Condensed (font variabile) 5.3.0.

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

Collaudo

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