La pagina coperta di adesivi

Transizioni, ImmaginiCanvasMediaPeso compresso: Demo 8,6 KBsenza librerieGratisScarica lo zip

Lasciata sola per qualche secondo, la pagina viene coperta dai suoi adesivi: salgono dal basso girando e si attaccano ovunque, prima i grandi, poi i medi, poi un tappeto fitto di piccoli. Al primo movimento volano via verso l’alto, e se li si interrompe a metà tornano indietro da dove sono.

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 sticker-bombed page</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/schibsted-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the page of a small studio. Leave it alone for a few seconds and its own stickers come flying up from below the
       screen, spinning, and slap down all over it, big ones first; move, touch or press a key and they fly off upwards -->
  <div class="pagina" data-pagina>
    <header class="testa">
      <span class="testa__marchio">Toast Studio</span>
      <nav class="testa__voci" aria-label="Main">
        <a href="#" data-voce>Work</a>
        <a href="#" data-voce>About</a>
        <a href="#" data-voce>Contact</a>
      </nav>
    </header>
    <main class="corpo">
      <p class="corpo__etichetta">A studio for warm things</p>
      <h1 class="corpo__titolo">We make nice things for nice people.</h1>
      <p class="corpo__nota">Stay still for a moment.</p>
    </main>
    <footer class="piede">
      <span>hello@toast.studio</span>
      <button class="attacca" type="button" data-attacca data-autoclic>
        <svg class="attacca__anello" viewBox="0 0 36 36" aria-hidden="true"><circle cx="18" cy="18" r="15" data-anello/></svg>
        <span>Stick now</span>
      </button>
    </footer>
  </div>
  <!-- the stickers live on one canvas above the page -->
  <div class="adesivi" data-adesivi aria-hidden="true"><canvas data-tela></canvas></div>
  <p class="sr" role="status" aria-live="polite" data-avviso></p>

  <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.

54 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 «La pagina coperta di adesivi» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La pagina rossa di uno studio inventato, Toast Studio, con il titolo grande e in basso a destra il tasto «Stick now», con un anello che si riempie mentre la pagina resta ferma. Dopo quattro secondi senza toccare niente gli adesivi dello studio salgono da sotto lo schermo, ognuno girato a caso, e si attaccano sulla pagina: prima pochi adesivi grandi, veloci, poi quelli medi, infine un tappeto di piccoli che copre ogni angolo. Sono undici disegni: il nome dello studio, un distintivo «Feel good», una stella, un fulmine, una fetta di pane tostato con la faccia, un fumetto «Hello!», un nastro, un sole, un biglietto, un fiore, un sigillo col nome tutto intorno; ognuno ha il bordo bianco fustellato, l’ombra e un riflesso lucido. Appena si muove il mouse, si tocca lo schermo, si scorre o si preme un tasto, gli adesivi volano via verso l’alto girando, i piccoli per primi; se si muove di nuovo mentre stanno arrivando, ognuno torna indietro dal punto in cui si trova. «Stick now» copre la pagina subito. Tornando alla scheda del browser dopo averla lasciata, la pagina è già coperta.

Come funziona

La griglia a tre strati

La cella della griglia è grande quanto il più piccolo degli adesivi del primo strato, in centesimi del lato corto dello schermo, e la griglia sporge di una cella su ogni lato. Il primo strato mette un adesivo su ogni cella, il secondo uno ogni due celle su metà dei posti, il terzo uno ogni tre celle su tre posti su dieci. Gli adesivi del primo strato sono abbastanza larghi da coprire, quelli degli altri due si spostano un poco dalla loro cella.

I disegni, una volta sola

Ogni adesivo è un tracciato disegnato su un canvas nascosto: prima il bordo bianco largo con l’ombra, poi il colore e i dettagli, infine un riflesso lucido ritagliato sulla forma. Ogni disegno si tiene in tre misure, ognuna metà della precedente, e al momento di disegnarlo si sceglie la più piccola che basta, così gli adesivi piccoli non sfarfallano.

Il volo

Ogni adesivo parte da sotto lo schermo, un poco spostato di lato e girato fino a 100 gradi, e arriva al suo posto girato fino a 40, con la curva 0,76 / 0 / 0,24 / 1. I grandi partono subito e volano in 250-400 millisecondi, i medi dopo 60 in 450-700, i piccoli dopo 120 in 750-1000, ognuno con un ritardo in più a caso. All’uscita vanno solo in su, oltre il bordo alto, e l’ordine si rovescia: i piccoli partono per primi.

Interrompere a metà

Quando un volo cambia verso prima di finire, ogni adesivo si segna posizione e rotazione di quell’istante e il volo nuovo parte da lì. A ogni fotogramma un solo setTransform gira e sposta il canvas sull’adesivo, e quello che è fuori dallo schermo non si disegna. Quando tutti sono attaccati il canvas non si ridisegna più.

La quiete

Tasti, puntatore, tocco e rotella fanno ripartire il conto dei secondi; il tempo si misura nel ciclo dei fotogrammi, non con un timer, e l’anello del tasto ne mostra l’avanzare. A pagina coperta lo strato degli adesivi prende i clic, così il primo tocco toglie gli adesivi invece di seguire un link. Ridimensionando la finestra gli adesivi spariscono di colpo e il conto riparte.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`IDLE`	script.js	`4`	I secondi di quiete prima che arrivino gli adesivi (nel sito sono 15).
`LAYERS`	script.js	`[{ size: [15, 20], span: 1, density: 1, duration: [750, 1000], enter: 120, exit: 0, spread: 100 }, { size: [20, 35], span: 2, density: 0.5, duration: [450, 700], enter: 60, exit: 200, spread: 160 }, { size: [35, 45], span: 3, density: 0.3, duration: [250, 400], enter: 0, exit: 400, spread: 220 }]`	I tre strati: misura degli adesivi in centesimi del lato corto, quante celle prende ognuno, quanti posti si usano, durata del volo e ritardi in millisecondi.
`MARGIN`	script.js	`[20, 120]`	Quanto oltre il bordo dello schermo comincia e finisce un volo, in pixel.
`SPIN`	script.js	`[100, 40]`	Quanto è girato al massimo un adesivo fuori dallo schermo e una volta attaccato, in gradi.
`DRIFT`	script.js	`30`	Quanto si sposta di lato un adesivo mentre sale, in pixel.
`EASE`	script.js	`[0.76, 0, 0.24, 1]`	La curva di ogni volo.
`INKS`	script.js	`['#ffd23f', '#3ddc97', '#6ec1ff', '#7b5cff', '#ff5a36', '#1a1310']`	I colori degli adesivi: limone, menta, cielo, viola, pomodoro, inchiostro.

Provali nel Playground

Quando usarla

Per il sito di uno studio, di un marchio o di un evento che ha i suoi adesivi e un tono allegro: un salvaschermo che premia chi lascia la pagina aperta, o un saluto da far partire con un tasto.

Sul telefono

Uguale: la griglia si misura sul lato corto, quindi al telefono gli adesivi sono più piccoli e più fitti, e un tocco li fa volare via.

Con il movimento ridotto

Niente voli: gli adesivi compaiono già al loro posto con una dissolvenza e se ne vanno allo stesso modo.

Trappole

Il primo strato deve coprire davvero: gli adesivi larghi e bassi, come il nome dello studio, vanno allargati finché il lato corto è grande almeno quanto una cella, altrimenti fra le righe resta la pagina.
Disegnare un adesivo grande rimpicciolito di dieci volte lo fa sfarfallare mentre gira: per questo ogni disegno è tenuto in tre misure e si usa la più piccola che basta.
Il canvas degli adesivi deve prendere i clic solo a pagina coperta: sempre attivo bloccherebbe la pagina, mai attivo farebbe seguire un link al tocco che doveva solo togliere gli adesivi.
Subito dopo «Stick now» il mouse si muove ancora un poco e toglierebbe gli adesivi appena chiamati: per un attimo un movimento conta solo se supera otto pixel.
Il conto della quiete si fa nel ciclo dei fotogrammi e non con un timer: così rallenta e si ferma insieme al resto quando il banco del sito rallenta l’anteprima.
Con la tastiera, Invio o Spazio sul tasto mentre la pagina è coperta la scoprono, e il clic che il tasto manda subito dopo la ricoprirebbe: quel clic si salta.

Librerie

Schibsted Grotesk (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 8,6 KB, e non servono librerie.

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.