The background of watching crosses

Backgrounds, HoverGSAP, Canvas, CSS onlyMediumCompressed weight: Demo 6.3 KBGSAP 28 KBFreeDownload the zip

An animated background to put behind a heading or a section: a grid of thin crosses on solid black. The ones near the pointer turn towards it and stretch the arm that looks at it, like compass needles; every few seconds a wave runs across the grid and turns them a quarter on a spring, lighting them up orange for a moment. 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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Norma</title>
  <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 background: a grid of thin crosses on a canvas behind the page; the crosses near the pointer turn and
       stretch one arm towards it, and every few seconds a wave runs across the grid and turns them a quarter -->
  <main class="pagina" data-pagina>
    <canvas class="fondo" aria-hidden="true" data-fondo></canvas>

    <header class="testa">
      <p class="marchio">Norma</p>
      <p class="testa__nota">Architecture &amp; interiors</p>
    </header>

    <section class="eroe">
      <div class="blocco" data-blocco>
        <p class="occhiello" data-entra>A small studio for houses and rooms</p>
        <h1 class="titolo">
          <span class="riga"><span class="riga__dentro" data-riga>Quiet buildings,</span></span>
          <span class="riga"><span class="riga__dentro" data-riga>drawn to the millimetre.</span></span>
        </h1>
        <div class="azione" data-entra>
          <a class="pillola" href="#">
            <span class="pillola__scritta" data-testo="See the projects">See the projects</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.

21 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 background of watching crosses” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A whole black page, the background of an invented architecture studio, Norma. Behind everything, on a canvas, a grid of thin paper-coloured crosses, one every 34 pixels, like the marks on a technical drawing sheet. In the middle, small, the heading: A small studio for houses and rooms, then two lines in narrow Instrument Sans (Quiet buildings, drawn to the millimetre.) and a light pill (See the projects) with its arrow; the brand and Architecture & interiors at the top. Round the heading and the two header texts the crosses fade until they disappear, always whole and never shrunk, so the words sit on clean black. The crosses near the pointer turn towards it and stretch the arm that looks at it, longer the nearer they are, like a field of compass needles; further away they go back small and all alike. Every five seconds a wave starts from a different point on the edge (bottom left, top right, top centre) and runs across the grid: each cross it touches makes a quarter turn on a spring, passing through the ×, goes a hair too far and settles, and for a moment turns orange, which fades behind the front. When nobody moves the pointer, a fake pointer wanders round the page on a curve that comes back the same. When the page opens the crosses are born from the middle towards the edges with a small bounce, and the two heading lines rise from their window, narrowing and gaining weight.

How it works

The grid and the clean areas

On a full-page canvas (devicePixelRatio capped at 2) a cross goes every PASSO pixels, centred. The heading block and the two header texts are measured, and for every cross the distance from a very rounded rectangle round each of them (a superellipse) is worked out: inside it disappears, on the edge it fades with a 60 px feather (26 for the header). The faded crosses are drawn with their transparency but always whole: shrunk, they would turn into dots.

Needles towards the pointer

Every cross has an angle that follows a spring (MOLLA), integrated by hand on GSAP's ticker with the step capped at 1/30 of a second, and always the short way round (the difference between angles brought back between −π and π). Within GUARDA pixels of the pointer the wanted angle turns towards it as much as the cross is close, and the arm that looks at it stretches by ALLUNGA times; further away it goes back to its own angle and size.

The wave

A repeating GSAP timeline lasts three times ONDA_OGNI: it holds the phase of the fake pointer's walk and three waves, each a number from 0 to 1 over TRAVERSA seconds. The wave's radius is that number times the page diagonal; every frame the crosses between the previous radius and the current one get an extra quarter turn on their resting angle, a push on their size and the light, which then drops with e^(−2.6·t).

Drawing in three passes

All the normal crosses are a single path and a single stroke; then the faded ones, one by one with globalAlpha; then, on top, the ones touched by the wave in the accent colour, with the transparency of their light, so the orange fades over the grey instead of leaving a hole.

The opening, the fake pointer, the pause

When the page opens a timeline brings the crosses to life from the middle to the edges with a bounce, and the heading lines rise with back.out while font-stretch goes from 100% to 84% and the weight from 360 to 500. After 2.4 seconds without the real pointer the point follows a Lissajous curve tied to the round's phase, on a soft spring. IntersectionObserver and visibilitychange stop the ticker and the round when the page is not visible.

Values to change

Name	File	Default	What it changes
`PASSO`	script.js	`34`	The distance between crosses, in px (a little less on a phone).
`BRACCIO`	script.js	`5`	The length of half an arm, in px.
`GUARDA`	script.js	`230`	How far from the pointer the crosses feel it, in px.
`ALLUNGA`	script.js	`1.6`	How much the arm looking at the pointer stretches (0 it does not).
`ONDA_OGNI`	script.js	`5`	How many seconds between waves; three start in each round.
`TRAVERSA`	script.js	`3.4`	How many seconds the wave takes to cross the whole page.
`MOLLA`	script.js	`[120, 11]`	The spring of the crosses: how stiff and how damped. Less damping, more wobble after the wave.
`SPESSORE`	script.js	`1`	The thickness of the crosses, in px.

Try them in the Playground

When to use it

As the background of the first screen of an architecture or engineering practice, a typographer, a design studio, a technical conference or a developer product; in general behind a short heading when you want a precise, living black with the air of a drawing sheet. The colour of the crosses and the accent are set in the CSS.

On phones

The same animations with the sizes adapted: the crosses are a little closer, the heading smaller and the clean area follows it. The finger turns the crosses while it touches and drags; when it lifts the fake pointer comes back.

With reduced motion

The grid is still, every cross upright: no waves, no needles towards the pointer, no birth from the middle. The heading, the small line and the pill fade in.

Pitfalls

The waves had their duration written as a function (to make it depend on the page width): GSAP does not accept it, the wave ended at once and was never seen. Now each wave is a number from 0 to 1 over TRAVERSA seconds and the radius is worked out when drawing, so it also follows a change in window size.
The crosses lit by the wave were drawn only in an ever more transparent orange: behind the front they left a trail darker than the rest. Now they are always drawn in grey and the orange goes on top.
Round the heading the crosses used to shrink until they turned into dots (and dots are not allowed): now they are always whole and fade with transparency.
The crosses ran over the brand and the header text: those two have their own clean area as well.

Libraries

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 6.3 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.