The postage stamp background

Backgrounds, SVG, HoverGSAPAdvancedCompressed weight: Demo 12 KBGSAP 28 KBFreeDownload the zip

A colourful animated background to put behind the title of a travel journal: a desk covered in illustrated postage stamps with perforated edges, which lift and curl a corner under the pointer or the finger. A tap postmarks them with a round cancellation and wavy lines, the stamps under the blow jump and the ink stays.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the 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

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

25 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The postage stamp background” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

It is the opening of the website of an invented travel journal, The Elsewhere Post. The background is a teal desk covered in illustrated postage stamps, each on its white paper with perforated edges, with the name of an invented country and the value: mountains at sunrise, a sailboat, a lighthouse at night, a hot air balloon, a tram, a bicycle with a basket of flowers, a palm island, a cactus in the desert, a windmill in the tulip fields, which really turns, a rocket among the stars, three tulips and a steaming cup of tea. At first the stamps drop onto the desk one after another and stick with a slap; then the cream title card arrives, held by two strips of tape, and the first postmark lands. Under the pointer or the finger the stamps lift on a spring, straighten up, turn towards the hand, throw a longer shadow and curl a corner, showing the back of the paper; away from the hand they gently breathe. A tap postmarks the stamp with a round cancellation, with the journal's name all around, today's day and month in the middle and five wavy lines: the stamp hits, the stamps under the blow jump on an elastic and the desk shakes a hair. The ink stays, the last seven postmarks; the oldest fades. When nobody touches, a hand passes over the stamps by itself and postmarks one now and then.

How it works

A stamp is an SVG with a mask of holes

Each stamp is a small SVG made by the script: a paper rectangle with a mask, white everywhere and black in circles along the edges, which makes the perforation; inside, the picture in a 100 by 100 box with preserveAspectRatio slice, the country's name and the value. The pictures are twelve functions returning SVG shapes in the :root colours, so the Palette recolours them.

The desk covered in a loose grid

The stamp size comes from the page's short side (a sixth, between 52 and 132 pixels). The script lays them in a grid wider than the page, with rows offset by half a cell, a little shift and a random tilt from a seeded generator, so the desk is always the same. On resize the desk is laid again.

Lifting with quickTo

For each stamp, the distance from the pointer becomes a number from 0 to 1 on a soft curve. That number drives the scale, the rotation towards the hand, a small hop upwards, a shifted and bigger shadow and the curling corner, each through a gsap.quickTo with back.out: GSAP makes the spring without creating new tweens on every move. The lifted stamp comes in front of the others with z-index.

The postmark that hits

A postmark is an SVG group above the stamps: two circles, the journal's name on a circular textPath, today's day and month, five wavy lines and a few ink specks, with irregular dashes that make it look really struck. It comes in from 1.45 to 1 with power4.in, bounces a breath, and the stamps near the blow jump with elastic.out. The last seven stay.

Values to change

Name	File	Default	What it changes
`BRAND`	script.js	`The Elsewhere Post`	The journal's name, on the label and in the postmarks.
`SIZE`	script.js	`1`	How big the stamps are (1 = about a sixth of the short side).
`LIFT`	script.js	`0.16`	How much a stamp grows under the pointer.
`REACH`	script.js	`1`	How far from the pointer the stamps still lift.
`TILT`	script.js	`8`	How crooked the stamps lie on the desk, in degrees.
`POSTMARK_EVERY`	script.js	`1.8`	Every how many seconds the passing hand postmarks a stamp by itself.
`INK`	script.js	`0.8`	How dark the postmark ink is.
`FLUTTER`	script.js	`1`	How much the stamps breathe on the desk.

Try them in the Playground

When to use it

As the opening background of a travel blog or journal, a travel agency, a stationery or stamp-collecting shop, a postcard service or a newsletter that arrives like a letter; behind the title of a «Write to us» or «Contact» page.

On phones

The same animation: the stamps are sized on the short side, the card on both width and height. A passing finger lifts them, a tap postmarks them, and the page still scrolls vertically; the «A travel journal» label hides below 520 px.

With reduced motion

The stamps are already on the desk, still: no drop, no lifting, no breathing and no passing hand. The card and the labels fade in, and a tap makes the postmark fade in, with no blow.

Pitfalls

Many stamps with a new tween on every pointer move fill GSAP with tweens: with gsap.quickTo each property has its own tween that gets updated, and the lifting stays light even with forty stamps.
Each SVG mask needs an id unique in the page: with the same id every stamp takes the first one's holes, measured on another height.
The card is centred with the CSS transform; GSAP reads it in pixels and rewrites it: at the end of the entrance clearProps restores the CSS transform, which stays right after a resize too.
A shadow with filter: blur is expensive if it is redrawn: it lives in a separate element that GSAP moves only with transform and opacity, so the blur is computed once.

Libraries

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

Compressed with gzip, the three demo files weigh 12 KB; the libraries: GSAP 28 KB.

Testing

Tested on 23 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.