The woven thread background
Backgrounds, Hover
NewFree
Back to the library
The background of turning squares
An animated background in the minimal style, to put behind a heading: a grid of thin ink squares on warm white paper that a slow wave turns over in 3D, one after another, like roof slates. On the back every square has a single diagonal and a few have vermilion; the pointer pushes the nearby squares, which tilt on a spring and settle.
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>Ordo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the background: a grid of thin square tiles that turn over in 3D like slates, in a slow wave crossing the page.
The back of every tile has a single diagonal; a few backs carry the accent. The pointer, or a finger, pushes the
tiles nearby: they tilt on a spring and settle back -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">Ordo</p>
<p class="testa__nota">Architecture studio</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>Houses, schools and quiet courtyards</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Built in</span></span>
<span class="riga"><span class="riga__dentro" data-riga>quiet rows.</span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="See the work">See the work</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.
22 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 background of turning squares” from Animorio and fit it into my siteWhat it does
A warm white page, the background of an invented architecture studio, Ordo. Behind everything, on a canvas, a grid of thin ink squares, each in the middle of its cell, like roof slates seen from above. At the opening the squares are born from the middle towards the edges, edge-on, and a spring lays them down. In the middle the heading, Built in quiet rows., rises from its line narrowing and gaining weight; around it the squares thin out and leave the paper clean. Every six seconds a wave starts from a corner and crosses the page diagonally: the squares it reaches turn half over around their vertical axis, in 3D, with a hint of perspective, go a little past and settle. On the back every square has a single diagonal, and a few, scattered, are filled with vermilion. The next wave starts from the opposite corner and turns them back. Passing with the pointer, or a finger, the nearby squares tilt one way or the other depending on the direction of the movement, the more the faster the pointer runs, and slowly return to place. When nobody moves the pointer, a fake pointer strolls across the page.
How it works
A turned square, with a hint of perspective
Each tile has an angle around its vertical axis. The four corners of the square are worked out by hand: horizontally they narrow with the cosine, and perspective lengthens the side coming forward and shortens the one going back (D / (D ± h·sine)). When the cosine is negative the tile shows its back: a single diagonal, or solid vermilion for the few picked by a seeded generator (ACCENT_SHARE).
One stroke per group
There are hundreds of tiles: they are grouped by transparency into five groups, and each group is a single path with a single stroke. Around the heading and the header the transparency is measured with a superellipse and a feather, so the words sit on clean paper. The accent backs are drawn last, on top.
The diagonal wave and the spring
A repeating GSAP timeline drives two waves per round, one every WAVE_EVERY seconds, from two opposite corners. The front is a diagonal (the distance is the sum of the two distances times 0.707): the tiles it passes in that frame get an extra half turn. The real angle chases it with a spring integrated by hand on GSAP’s ticker (SPRING), in two half steps to stay stable.
The push of the pointer
On every frame we measure how far the pointer has run. Tiles within REACH pixels get a speed proportional to that run, falling with the square of the distance, with a sign given by which side of the movement they are on: in front they tilt one way, behind the other. The spring brings them back to the wave’s angle. A fake pointer on a Lissajous curve takes the real one’s place after 2.4 seconds of stillness.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TILE | script.js | 60 | The grid step, in px (a little less on a phone). |
SIZE | script.js | 0.46 | The side of the square, relative to the step. |
LINE | script.js | 1 | The thickness of the edge, in px. |
WAVE_EVERY | script.js | 6 | How many seconds between waves (two per round). |
TRAVERSA | script.js | 3.6 | How many seconds the wave takes to cross the page. |
PUSH | script.js | 0.9 | How much the pointer tilts the nearby tiles. |
REACH | script.js | 120 | How far the pointer’s push reaches, in px. |
SPRING | script.js | [150, 11] | The tiles’ spring: how stiff and how damped it is (less friction, more swing). |
ACCENT_SHARE | script.js | 0.035 | How many tiles have the accent on their back, from 0 to 1. |
When to use it
As the background of the first screen of an architecture or engineering studio, a builder, a maker of tiles, slates or panels, a design exhibition; in general behind a short heading when you want an orderly but living motif. The edge colour and the accent are set in the CSS.
On phones
The same animations with the sizes adapted: the grid is a little tighter and the clean area narrower, so the tiles show around the heading too, the heading is smaller and the clean area follows it. The finger pushes the tiles while it drags; when it lifts the fake pointer comes back.
With reduced motion
The grid is still, with every square face up: no waves, no pushes, no birth from the middle. The heading, the small line and the pill fade in.
Pitfalls
- A square turned fully edge-on becomes a line: that is fine, it is the best moment of the wave, but the perspective has to be divided by D ± h·sine with D large enough (3.2 times the side), otherwise the side coming forward blows up.
- A tile already reached by the front must not get another half turn in the same pass: the front only turns the tiles between last frame’s radius and this one’s, and the target is rounded to the half turn.
- The video script stops after one round of the fake pointer, before the second wave turns the squares back: the preview video has a fixed length, the entrance plus both waves.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 6.8 KB; the libraries: GSAP 28 KB.
Testing
Tested on 22 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.
