Lo sfondo di francobolli da timbrare

Sfondi, SVG, HoverGSAPImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

Uno sfondo animato e pieno di colori da mettere dietro al titolo di un diario di viaggio: un tavolo coperto di francobolli illustrati coi bordi dentellati, che si sollevano e arricciano un angolo sotto il puntatore o il dito. Un tocco li timbra con l'annullo rotondo e le righe ondulate, i francobolli sotto il colpo saltano e l'inchiostro resta.

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 postage stamp background</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the opening of a made-up travel journal, The Elsewhere Post. Behind the title, a desk covered in illustrated
       postage stamps with perforated edges: they lift and curl a corner under the pointer or the finger, a tap
       postmarks them with a round cancellation and wavy lines, and the ink stays. Everything is drawn by the script -->
  <main class="palco" data-palco>
    <div class="tavolo" data-tavolo aria-hidden="true"></div>
    <svg class="timbri" data-timbri aria-hidden="true"></svg>

    <header class="testata">
      <p class="marchio" data-marchio>The Elsewhere Post</p>
      <p class="nota">A travel journal</p>
    </header>

    <section class="biglietto" data-biglietto>
      <span class="nastro nastro--a" aria-hidden="true"></span>
      <span class="nastro nastro--b" aria-hidden="true"></span>
      <p class="biglietto__sopra">Letters from the road</p>
      <h1 class="biglietto__titolo">Letters from <em>small places.</em></h1>
      <p class="biglietto__testo">A journal written one postcard at a time, from villages, ferries and night trains.</p>
      <a class="tasto" href="#" data-tasto><span>Read the journal</span></a>
    </section>

    <p class="cenno" data-cenno>Move over the stamps, tap to postmark</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

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 «Lo sfondo di francobolli da timbrare» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

È l'apertura del sito di un diario di viaggio inventato, The Elsewhere Post. Il fondo è un tavolo verde petrolio coperto di francobolli illustrati, ognuno sulla sua carta bianca coi bordi dentellati, con il nome del paese inventato e il valore: montagne all'alba, una barca a vela, un faro di notte, una mongolfiera, un tram, una bicicletta col cestino di fiori, un'isola con la palma, un cactus nel deserto, un mulino a vento coi tulipani, che gira davvero, un razzo fra le stelle, tre tulipani e una tazza di tè fumante. All'inizio i francobolli cadono sul tavolo uno dopo l'altro e si attaccano con uno schiocco; poi arriva il biglietto color crema col titolo, fermato da due strisce di nastro adesivo, e il primo timbro batte. Sotto il puntatore o il dito i francobolli si sollevano su una molla, si raddrizzano, si girano verso la mano, gettano un'ombra più lunga e arricciano un angolo, mostrando il rovescio della carta; lontano dalla mano respirano piano. Un tocco timbra il francobollo con un annullo rotondo, col nome del giornale tutto intorno, il giorno e il mese di oggi al centro e cinque righe ondulate: il timbro batte, i francobolli sotto il colpo saltano con un elastico e il tavolo trema di un pelo. L'inchiostro resta, gli ultimi sette timbri; il più vecchio sbiadisce. Se nessuno tocca, una mano passa da sola sopra i francobolli e ogni tanto ne timbra uno.

Come funziona

Un francobollo è un SVG con la maschera dei buchi

Ogni francobollo è un piccolo SVG fatto dallo script: un rettangolo di carta con una maschera, bianca dappertutto e nera nei cerchi lungo i bordi, che fa la dentellatura; dentro, il disegno in un riquadro 100 per 100 con preserveAspectRatio slice, il nome del paese e il valore. I disegni sono dodici funzioni che restituiscono forme SVG coi colori di :root, così la Palette li ricolora.

Il tavolo coperto a griglia sciolta

La misura del francobollo viene dal lato corto della pagina (un sesto, fra 52 e 132 pixel). Lo script li posa in una griglia più larga della pagina, a righe sfalsate di mezza cella, con un piccolo spostamento e un'inclinazione a caso da un generatore con un seme fisso, così il tavolo è sempre lo stesso. Al resize il tavolo si rifà.

Sollevarsi con quickTo

Per ogni francobollo, la distanza dal puntatore diventa un numero da 0 a 1 con una curva morbida. Quel numero guida scala, rotazione verso la mano, piccolo salto in su, ombra spostata e più grande, e l'angolo che si arriccia, ognuno con un gsap.quickTo con back.out: la molla la fa GSAP, senza creare tween nuovi a ogni movimento. Il francobollo sollevato passa davanti agli altri con lo z-index.

Il timbro che batte

Un timbro è un gruppo SVG sopra i francobolli: due cerchi, il nome del giornale su un textPath circolare, il giorno e il mese di oggi, cinque righe ondulate e qualche schizzo d'inchiostro, con tratteggi irregolari che lo fanno sembrare battuto davvero. Entra da 1,45 a 1 con power4.in, rimbalza di un soffio, e i francobolli vicini al colpo saltano con elastic.out. Restano gli ultimi sette.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`BRAND`	script.js	`The Elsewhere Post`	Il nome del giornale, sull'etichetta e nei timbri.
`SIZE`	script.js	`1`	Quanto sono grandi i francobolli (1 = circa un sesto del lato corto).
`LIFT`	script.js	`0.16`	Quanto cresce un francobollo sotto il puntatore.
`REACH`	script.js	`1`	Fin dove dal puntatore i francobolli si sollevano ancora.
`TILT`	script.js	`8`	Quanto sono storti i francobolli sul tavolo, in gradi.
`POSTMARK_EVERY`	script.js	`1.8`	Ogni quanti secondi la mano che passa timbra da sola un francobollo.
`INK`	script.js	`0.8`	Quanto è scuro l'inchiostro dei timbri.
`FLUTTER`	script.js	`1`	Quanto respirano i francobolli sul tavolo.

Provali nel Playground

Quando usarla

Come sfondo dell'apertura di un blog o di un diario di viaggio, di un'agenzia di viaggi, di un negozio di cartoleria o di filatelia, di un servizio di cartoline o di una newsletter che arriva come una lettera; dietro al titolo di una pagina «Scrivici» o «Contatti».

Sul telefono

La stessa animazione: i francobolli si misurano sul lato corto, il biglietto sulla larghezza e sull'altezza. Il dito che passa li solleva, un tocco li timbra, e la pagina continua a scorrere in verticale; l'etichetta «A travel journal» si nasconde sotto i 520 px.

Con il movimento ridotto

I francobolli sono già sul tavolo, fermi: niente caduta, niente sollevamento, niente respiro e niente mano che passa. Il biglietto e le scritte compaiono in dissolvenza, e un tocco fa apparire il timbro in dissolvenza, senza colpo.

Trappole

Tanti francobolli con un tween nuovo a ogni movimento del puntatore riempiono GSAP di tween: con gsap.quickTo ogni proprietà ha il suo tween che si riaggiorna, e il sollevamento resta leggero anche con quaranta francobolli.
Ogni maschera SVG vuole un id unico nella pagina: con lo stesso id tutti i francobolli prendono i buchi del primo, misurati su un'altra altezza.
Il biglietto è centrato col transform del CSS; GSAP lo legge in pixel e lo riscrive: alla fine dell'entrata clearProps rimette il transform del CSS, che resta giusto anche dopo un resize.
L'ombra con filter: blur è cara se si ridisegna: sta in un elemento a parte che GSAP muove solo con transform e opacity, così il blur si calcola una volta.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

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

Collaudo

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