The woven thread background
Backgrounds, Hover
NewFree
Back to the library
The poster shapes background
An animated background to put behind a heading or a section: five big flat shapes as in a printed poster, a vermilion disc, a black bar and half-disc, a sand rectangle and a hairline. Every few seconds they slide into a new composition, one layer after another, each on its own spring, and they shift a little with the pointer like layers in parallax; the heading always stays on paper. Minimal style.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Plakat</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the background: five big flat shapes on a canvas behind the page, like a printed poster; every few seconds they
slide into a new composition on springs, one layer after the other, and they lean a little with the pointer -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">Plakat</p>
<p class="testa__nota">Poster gallery</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>A season of printed posters</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Flat colour,</span></span>
<span class="riga"><span class="riga__dentro" data-riga>loud ideas.</span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="Book a ticket">Book a ticket</span>
<svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
</a>
</div>
</div>
</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
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.
19 values to change
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 poster shapes background” from Animorio and fit it into my siteWhat it does
A whole page in paper colour, the background of an invented poster gallery, Plakat. Behind everything, on a canvas, five big flat shapes as in a printed poster: a vermilion disc, a black bar and a black half-disc, a sand-coloured rectangle and a thin black line. At the bottom left the heading: A season of printed posters, then two lines in narrow, heavy Anybody (Flat colour, loud ideas.) and a black pill (Book a ticket) with its arrow; the brand and Poster gallery at the top. The shapes hold a composition for three and a half seconds, barely breathing; then they all slide into a new composition, one after another from the bottom layer up, each on its own spring, the disc last with a touch more bounce, turning as they move. There are three compositions and then it starts again the same, fifteen seconds in all; on a phone, with a tall page, the three compositions are redrawn to sit above the heading. The shapes shift a little with the pointer, the nearer ones more (the disc and the half-disc) and the line hardly at all, like layers in parallax. Round the heading and the header texts there is a margin of paper the shapes never cross: if they pass there, they are cut as if by the edge of the print. When the page opens the shapes are printed one after another with a small bounce, and the heading lines rise from their window, narrowing from wide to condensed.
How it works
The shapes and the compositions
Each shape is a small object with a position (fractions of the page), sizes (fractions of the shorter side), angle and scale; the three compositions are three tables of these numbers, one version for a wide page and one for a tall one. A full-page canvas (devicePixelRatio capped at 2) draws them in order from the bottom: rectangle, bar, line, half-disc, disc.
The round of compositions
A repeating GSAP timeline lasts three times TIENI + CAMBIA. At each change, after TIENI seconds, every shape moves to the next composition in CAMBIA seconds with back.out (the disc a little more), staggered by SFALSA seconds from the one before; the third brings back the first, so the round closes the same. The target values are functions, so if the page switches from wide to tall mid-round the shapes jump to the right composition and the timeline reads them again.
Breathing and parallax
When drawing, every shape moves by RESPIRO pixels on sines of the round's phase (whole turns, so they come back the same) and by PARALLASSE pixels times its depth in the direction of the pointer, which the point follows on a soft spring; when the pointer leaves it goes back to the middle.
The paper margin
The heading block and the two header texts are measured and the canvas is clipped with an evenodd path: the whole page minus the rectangles round the texts (MARGINE pixels for the heading, 12 for the header). The compositions are designed to keep away from the heading; the clip is the safety net, and where it acts it reads as the edge of the print.
The opening and the pause
When the page opens the scale of each shape goes from 0 to 1 with back.out, one every 0.12 seconds, and the heading lines rise with back.out while font-stretch goes from 130% to 78%. The round only starts once the opening is over; IntersectionObserver and visibilitychange stop it, along with the ticker, when the page is not visible.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TIENI | script.js | 3.4 | How many seconds each composition holds. |
CAMBIA | script.js | 1.5 | How many seconds the shapes take to move to the next composition. |
SFALSA | script.js | 0.11 | How many seconds between one shape and the next when they change. |
MOLLA | script.js | 1.25 | How far they overshoot before settling: 1 none, 2 a lot. |
PARALLASSE | script.js | 22 | How many px the nearest shapes move with the pointer. |
RESPIRO | script.js | 6 | How many px the shapes breathe between changes. |
MARGINE | script.js | 28 | How many px of paper are kept round the heading, which the shapes never cross. |
When to use it
As the background of the first screen of an exhibition, a gallery, a graphic design or music festival, a print shop or a design studio; in general behind a short heading when you want a page that gets noticed like a poster. The four colours are set in the CSS, the compositions in the tables at the top of the script.
On phones
The same animations with three compositions redrawn for the tall page: the shapes sit in the upper part and the heading, smaller, stays at the bottom on paper. The finger shifts the layers while it touches and drags.
With reduced motion
The first composition stays, still: no changes, no breathing, no parallax. The heading, the small line and the pill fade in.
Pitfalls
- With the bar and the line as long as the page, the bar passed under the heading and the clip left a box of paper round the words that looked like a panel: now bar and line have a length and the compositions keep them away from the heading.
- In two compositions the bar and the half-disc, both black, touched and became one shape (a hammer, a letter h): the positions were moved so there is always paper between shapes of the same colour.
- The header texts ended up under the disc or the bar: they too have a small margin the shapes never cross.
- The round could start before the shapes were measured (the IntersectionObserver answers before the fonts are ready): it only starts once the opening is over.
Libraries
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 6.1 KB; the libraries: GSAP 28 KB.
Testing
Tested on 19 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.
