The wind stroke background

Backgrounds, PhysicsGSAP, Canvas, CSS onlyAdvancedCompressed weight: Demo 6.9 KBGSAP 28 KBFreeDownload the zip

An animated background to put behind a heading or a section: many short ink strokes carried by the wind on warm white paper, like a weather map. The air flows round the heading as round a rock, no stroke crosses the words, and where the pointer goes the wind curls into an eddy; one stroke in thirty is blue. Minimal style.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Leeward</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the background: short ink strokes carried by the wind on a canvas behind the page, like a weather map; the air
       parts round the title as round a rock, and curls into an eddy where the pointer goes -->
  <main class="pagina" data-pagina>
    <canvas class="fondo" aria-hidden="true" data-fondo></canvas>

    <header class="testa">
      <p class="marchio">Leeward</p>
      <p class="testa__nota">Sailing school</p>
    </header>

    <section class="eroe">
      <div class="blocco" data-blocco>
        <p class="occhiello" data-entra>Weekend courses on the open water</p>
        <h1 class="titolo">
          <span class="riga"><span class="riga__dentro" data-riga>Learn to read</span></span>
          <span class="riga"><span class="riga__dentro" data-riga>the wind.</span></span>
        </h1>
        <div class="azione" data-entra>
          <a class="pillola" href="#">
            <span class="pillola__scritta" data-testo="Find a course">Find a course</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.

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

Connect Animorio to Claude Code

What it does

A whole page in warm white paper, the background of an invented sailing school, Leeward. Behind everything, on a canvas, a few hundred short ink strokes, each the trail of a speck of air following the wind: a current from left to right, rising slightly, which a slow noise turns a little here and there, so the strokes draw broad waves like the arrows on a weather map. Each stroke fades in, runs for a few seconds and disappears; one in thirty is blue, the only colour. In the middle the heading: Weekend courses on the open water, then two lines in narrow Bricolage Grotesque (Learn to read the wind.) and a black pill (Find a course) with its arrow; at the top the brand and Sailing school. Round the heading the air parts as round a rock: the strokes curve round it, run faster along its sides, leave a calm wake behind, and none crosses the words. Where the pointer goes the wind curls into an eddy and the strokes swirl round it; when nobody moves it, a fake pointer wanders round the page and the eddy is lighter. When the page opens the wind comes in from the left and fills the page, and the heading lines rise, narrowing and gaining weight.

How it works

The specks and their trails

On a full-page canvas there are as many specks as fit, one every FITTI square pixels (at most 1400). Each speck has a life of two to five seconds, a position and a trail: the last SCIA points in a Float32Array that shifts by one place each frame. The stroke is the polyline of the trail, and its opacity rises and falls with its life.

The wind

At every point the wind has speed VENTO and direction DIREZIONE, turned by ± GIRA degrees by a 2D Perlin noise whose coordinates go round in a circle in twenty-eight seconds: the strokes make broad waves that change slowly.

The rock

The heading is an obstacle: in the measure of its oval (x and y divided by the two radii) the wind is the flow round a cylinder, v = c − conj(c / z²), where c is the wind direction and z the point as a complex number. The air parts in front, speeds up along the sides and closes behind; a speck that ends up inside is reborn elsewhere. Away from the oval the effect fades.

The eddy

Round the pointer a turning velocity is added (perpendicular to the radius, MULINELLO px per second) with a little pull towards the centre, weighted by a Gaussian bell. The point follows the real pointer on a spring; without it, a fake walk tied to the round makes a lighter eddy.

Drawing and the opening

The trails go into six Path2D objects by opacity, plus six for the blue strokes: twelve strokes per frame. When the page opens a front crosses the page from the left and strokes light up only once it has passed. With reduced motion the specks run for a second and a half without being drawn and then a single still remains.

Values to change

Name	File	Default	What it changes
`VENTO`	script.js	`140`	The wind speed, in px per second.
`DIREZIONE`	script.js	`-6`	Where it blows from, in degrees (0 left to right, negative rises a little).
`GIRA`	script.js	`24`	How many degrees the noise turns the wind here and there.
`FITTI`	script.js	`2300`	One stroke for every so many square px of page (smaller, more strokes).
`SCIA`	script.js	`13`	How long each stroke's trail is, in frames.
`MULINELLO`	script.js	`120`	How hard the wind turns round the pointer, in px per second.
`BLU`	script.js	`30`	One blue stroke in how many (0 none).
`SPESSORE`	script.js	`1.1`	The thickness of the strokes, in px.

Try them in the Playground

When to use it

As the background of the first screen of a sailing or kitesurfing school, a weather or wind app, an outdoor jackets and gear brand, a landscape architecture studio or a regatta; in general behind a short heading when you want a light sheet that is always moving, with the air of a pen drawing. The colour of the strokes and the blue are set in the CSS.

On phones

The same animations with the sizes adapted: the strokes are a little denser for the small screen, the rock follows the smaller heading and the eddy narrows. The finger makes the eddy while it touches and drags; when it lifts the fake pointer comes back.

With reduced motion

The wind is still: a single picture of the strokes, already laid out round the heading's rock, not moving and with no eddy. The heading, the small line and the pill fade in.

Pitfalls

With twice the strokes, longer trails and noise turning the wind by sixty degrees the page became a tangle: fewer strokes, short trails and twenty degrees keep it airy and the current reads.
An eddy half the page wide tore the strokes apart and piled them up left of the rock: smaller and, with the fake pointer, lighter.
Strokes were also born inside the heading's oval and got stuck there: any speck born or arriving inside is reborn outside at once.

Libraries

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

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