The sticker-bombed page

Transitions, ImagesCanvasMediumCompressed weight: Demo 8.6 KBno librariesFreeDownload the zip

Left alone for a few seconds, the page gets covered by its own stickers: they fly up from below, spinning, and stick everywhere, the big ones first, then the middle ones, then a dense carpet of small ones. At the first movement they fly off upwards, and cut short halfway they turn back from wherever they are.

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

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.

54 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 sticker-bombed page” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The red page of a made-up studio, Toast Studio, with its big headline and, bottom right, the «Stick now» button, with a ring that fills while the page stays still. After four seconds without touching anything the studio’s stickers come up from below the screen, each turned at random, and stick onto the page: first a few big stickers, fast, then the middle ones, last a carpet of small ones that covers every corner. There are eleven designs: the studio’s name, a «Feel good» badge, a star, a lightning bolt, a slice of toast with a face, a «Hello!» bubble, a ribbon, a sun, a ticket, a flower, a seal with the name all round it; each has a white die-cut edge, a shadow and a glossy shine. As soon as you move the mouse, touch the screen, scroll or press a key, the stickers fly off upwards, spinning, the small ones first; move again while they are arriving and each turns back from the point where it is. «Stick now» covers the page at once. Coming back to the browser tab after leaving it, the page is already covered.

How it works

The three-layer grid

A grid cell is as big as the smallest sticker of the first layer, in hundredths of the short side of the screen, and the grid sticks out by a cell on every side. The first layer puts a sticker on every cell, the second one every two cells on half the places, the third one every three cells on three places in ten. The stickers of the first layer are wide enough to cover, those of the other two move a little off their cell.

The designs, once

Every sticker is a path drawn on a hidden canvas: first the wide white edge with its shadow, then the colour and the details, last a glossy shine clipped to the shape. Each design is kept in three sizes, each half the one before, and when it is drawn the smallest one that is big enough is picked, so small stickers do not shimmer.

The flight

Every sticker starts below the screen, a little to one side and turned up to 100 degrees, and arrives at its place turned up to 40, along the curve 0.76 / 0 / 0.24 / 1. The big ones leave at once and fly in 250-400 milliseconds, the middle ones after 60 in 450-700, the small ones after 120 in 750-1000, each with an extra random delay. On the way out they only go up, past the top edge, and the order flips: the small ones leave first.

Cutting it short

When a flight changes direction before it ends, every sticker writes down its position and turn at that instant and the new flight starts from there. Each frame a single setTransform turns and moves the canvas onto the sticker, and what is off screen is not drawn. When they are all stuck the canvas is not redrawn any more.

The stillness

Keys, pointer, touch and wheel restart the count of seconds; the time is measured in the frame loop, not with a timer, and the ring of the button shows it going. With the page covered the sticker layer takes the clicks, so the first tap takes the stickers off instead of following a link. Resizing the window clears the stickers at once and the count starts again.

Values to change

Name	File	Default	What it changes
`IDLE`	script.js	`4`	The seconds of stillness before the stickers come (on the site it is 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 }]`	The three layers: sticker size in hundredths of the short side, how many cells each takes, how many places are used, flight time and delays in milliseconds.
`MARGIN`	script.js	`[20, 120]`	How far beyond the edge of the screen a flight starts and ends, in pixels.
`SPIN`	script.js	`[100, 40]`	The most a sticker is turned off screen and once stuck, in degrees.
`DRIFT`	script.js	`30`	How far a sticker drifts sideways on its way up, in pixels.
`EASE`	script.js	`[0.76, 0, 0.24, 1]`	The curve of every flight.
`INKS`	script.js	`['#ffd23f', '#3ddc97', '#6ec1ff', '#7b5cff', '#ff5a36', '#1a1310']`	The sticker inks: lemon, mint, sky, violet, tomato, ink.

Try them in the Playground

When to use it

For the site of a studio, a brand or an event that has its own stickers and a cheerful tone: a screensaver that rewards whoever leaves the page open, or a greeting set off with a button.

On phones

The same: the grid is measured on the short side, so on a phone the stickers are smaller and denser, and a tap sends them flying.

With reduced motion

No flights: the stickers appear already in place with a fade and leave the same way.

Pitfalls

The first layer must really cover: wide, low stickers like the studio’s name have to be widened until their short side is at least as big as a cell, or the page shows between the rows.
Drawing a big sticker shrunk ten times makes it shimmer while it turns: so each design is kept in three sizes and the smallest one that is big enough is used.
The sticker canvas must take the clicks only with the page covered: always on it would block the page, never on and the tap meant only to remove the stickers would follow a link.
Right after «Stick now» the mouse still moves a little and would clear the stickers just called: for a moment a movement only counts if it goes past eight pixels.
The count of stillness runs in the frame loop, not with a timer: that way it slows and stops with everything else when the site’s workbench slows the preview down.
With the keyboard, Enter or Space on the button while the page is covered clears it, and the click the key sends right after would cover it again: that click is skipped.

Libraries

Schibsted Grotesk (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 8.6 KB, and no libraries are needed.

Testing

Tested on 6 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.