The constellation background

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

An animated background to set behind a heading, in the minimal style: on a warm white a few ink points drift slowly and, when two come close, a hairline joins them and fades with the distance. The pointer gently draws the nearby points in and casts its ultramarine threads to the three nearest; twice a loop the points in a corner gather into the constellation of the sail, its name appears and the figure lets go.

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>Vela</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jost@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the background: a few points drifting on a canvas behind the page; points that come close are joined by a
       hairline, the pointer draws them in and its threads take the accent, and now and then the points near a corner
       gather into a small constellation and let it go -->
  <main class="pagina" data-pagina>
    <canvas class="fondo" aria-hidden="true" data-fondo></canvas>

    <header class="testa">
      <p class="marchio">Vela</p>
      <p class="testa__nota">Observatory &amp; planetarium</p>
    </header>

    <section class="eroe">
      <div class="blocco" data-blocco>
        <p class="occhiello" data-entra>Open nights, every Friday</p>
        <h1 class="titolo">
          <span class="riga"><span class="riga__dentro" data-riga>Look up and</span></span>
          <span class="riga"><span class="riga__dentro" data-riga>join the dots.</span></span>
        </h1>
        <div class="azione" data-entra>
          <a class="pillola" href="#">
            <span class="pillola__scritta" data-testo="Book a night">Book a night</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

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 constellation background” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white first screen with the heading of an invented observatory, Vela: ‘Look up and join the dots.’. From the middle out to the edges about fifty ink points are born, small and solid, and then drift slowly, each on its own loop. When two points come close a hairline joins them, lighter the farther apart they are, and it breaks when they part: the network keeps changing, but around the heading, the small line and the button the threads thin out and the words stay on clean white. The pointer gently draws in the points that pass near it, which reach it on a spring and swing back with a small sway when it moves away, and casts its threads to the three nearest in the only accent, an ultramarine blue: each thread grows from the point towards the pointer, overshoots a hair and comes back; the grey threads between two points the pointer has caught turn blue too. Twice a loop, first bottom left and then top right, the six points nearest a free corner gather into the figure of the sail and settle into it with a touch too much: the ink threads of the constellation draw themselves one after another, the name VELA appears underneath, then the threads pull back, the name leaves and the points drift again. When nobody moves the pointer, a fake one circles slowly around the heading.

How it works

The points and their loop

On a full-page canvas (devicePixelRatio capped at 2) the points sit on a shaken grid made with a seeded random number generator, so they are spread out with no holes or clumps and every opening is the same. Every point drifts on two sines, one per axis, with whole-number frequencies over the loop of GIRO seconds: when the timeline's phase goes back to zero, every point is back where it started and the loop begins again identically.

The threads and the clean areas

For every pair of points closer than FILO pixels a thread is drawn with the opacity (1 minus the distance over FILO) squared: long threads can hardly be seen and they appear and disappear without jumps. Around the heading block and the header text a superellipse with a feather works as a mask: every thread takes the opacity of its more covered end, so near the words the network thins out.

The pointer

Every point has its own offset, which a spring (MOLLA: stiffness and damping) pulls towards the pointer by at most ATTIRA pixels, with a smooth curve on the distance up to RAGGIO. The three nearest points get a bond value that grows on a slightly livelier spring, up to 1.06: it is the part of the blue thread drawn from the point towards the pointer, which therefore arrives, overshoots a hair and comes back. Without a real pointer a fake one circles on an ellipse around the heading, tied to the same phase.

The sail

In the loop's timeline two figures start at a seventh of the loop and at half the loop plus a seventh. At the start of each, for every star of the sail the nearest free point not yet taken is chosen; the point moves towards its star with a tween on a single number, back.out(0.7), which gives the touch too much. Then the seven ink threads draw themselves staggered, the name appears, written on the canvas with letterSpacing, and in the end everything goes back with power2.inOut. The grey threads that touch a star fade while the figure is there.

Opening, reduced motion and sizes

On opening the points are born from the middle to the edges with a small bounce, and the two lines of the heading rise out of their window gaining weight: Jost goes from 200 to 420 while the spacing tightens. On resize the page, the clean areas and the points are measured again; on a phone there are 60% of the points and shorter threads. An IntersectionObserver switches everything off when the page is not visible. With reduced motion the network is drawn still and the rest fades in.

Values to change

Name	File	Default	What it changes
`PUNTI`	script.js	`56`	How many points on a computer (60% on a phone).
`FILO`	script.js	`190`	How far apart two points can be and still be joined by a thread, in px (a little less on a phone).
`ATTIRA`	script.js	`22`	How far the pointer pulls the nearby points towards it, in px.
`RAGGIO`	script.js	`210`	How far away the points feel the pointer, in px.
`FILI_PUNTATORE`	script.js	`3`	How many accent threads the pointer casts to the nearest points.
`GIRO`	script.js	`18`	How many seconds before the loop comes back the same; two figures form in each loop.
`NOME`	script.js	`'Vela'`	The name written under the constellation.
`MOLLA`	script.js	`[90, 11]`	The spring of the points pulled by the pointer: how stiff and how damped it is.
`SPESSORE`	script.js	`0.8`	The thickness of the threads, in px.

Try them in the Playground

When to use it

As the background of the first screen of an observatory, a planetarium, a science magazine, a data or network app, a conference, a studio that works on how things connect; in general behind a short heading when you want a living, quiet white. The colours of the threads, the points and the accent are set in the CSS, the figure and the name in the script.

On phones

The same animations with the sizes adapted: fewer points, shorter threads, the sail a little bigger in proportion and the clean area following the heading. The finger draws the points in and casts the threads while it touches and drags; when it lifts the fake pointer comes back.

With reduced motion

The network is drawn still: no drifting, no pointer, no figures. The network, the heading, the small line and the pill fade in.

Pitfalls

Drifting with random speeds never comes back the same, and the preview video would never have stopped by itself: every point moves on sines with whole-number frequencies over the loop's phase, so every time round the scene is identical.
The fake pointer passed over the heading and the blue threads crossed it: now it circles on an ellipse around the words, and its threads also take the opacity of the clean area where the pointer is (never less than a quarter).
On a phone the sail, sized on the short side, came out small and the grey threads of the network covered it: now its size also looks at the width, the threads are shorter and the ones touching a star of the figure fade.
When the real pointer arrived after the fake one, the blue threads started from where the fake one was and crossed the page: on the first real move the pointer jumps straight to the mouse.

Libraries

GSAP 3.15.0, Jost (font variabile) 5.3.0.

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

Testing

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