The slide-to-confirm button
Buttons, Physics, Transitions
NewFree
All components
The windsock forecast
The wind at a kite spot hour by hour, read off a striped windsock of real cloth: a tube of points moved with Verlet, blown up by the air and pulled down by its weight, drawn face by face with the light and the shadow of its folds. In a light air it hangs from its hoop and sways, in a fresh breeze it fills stripe after stripe and flaps at the tail, at every gust it snaps; the knots roll like an odometer and the arrow turns on a spring.
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>The windsock forecast</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/saira@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the wind at a kite spot hour by hour: the heart is a striped windsock of real cloth (a tube of points moved by
Verlet and held by links, inflated by the wind, pulled by gravity), hung from its hoop on a swivel. Choosing
an hour changes the wind: in a light air the sock hangs and sways, in a fresh breeze it fills and flaps, and
at every gust it snaps taut -->
<section class="sock" aria-labelledby="sock-place" data-sock data-autoclic>
<canvas class="sock__canvas" aria-hidden="true" data-canvas></canvas>
<header class="read">
<h2 class="read__place" id="sock-place">Pellow Sands</h2>
<p class="read__when" data-when></p>
<div class="read__main">
<p class="speed">
<span class="speed__num" aria-hidden="true" data-num></span>
<span class="speed__unit" aria-hidden="true">kn</span>
<span class="sr" data-speed-sr></span>
</p>
<dl class="facts">
<div class="fact fact--gust" data-gust-row>
<dt>Gusts</dt>
<dd><span data-gust></span> kn</dd>
</div>
<div class="fact">
<dt data-force></dt>
<dd class="fact__name" data-force-name></dd>
</div>
</dl>
</div>
</header>
<div class="dir">
<svg class="dir__rose" viewBox="0 0 60 60" aria-hidden="true">
<circle class="dir__ring" cx="30" cy="30" r="26"/>
<g class="dir__ticks" data-ticks></g>
<text class="dir__n" x="30" y="10.6">N</text>
<g data-arrow>
<path class="dir__arrow" d="M30 15.6 35 26 31.5 24.9V42.4H28.5V24.9L25 26Z"/>
<path class="dir__tail" d="M26.4 45.6 30 42.4 33.6 45.6"/>
</g>
</svg>
<p class="dir__text"><span class="dir__from">from</span> <span data-from></span></p>
</div>
<div class="panel">
<div class="hours" role="radiogroup" aria-label="Forecast hour" data-hours>
<span class="hours__pill" aria-hidden="true" data-pill></span>
</div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</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.
61 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 windsock forecast” from Animorio and fit it into my siteWhat it does
On a black background a dark widget with round corners, 380 pixels wide and 424 tall. At the top Pellow Sands and the hour (Now, 15:00), the knots in large thin figures (18 kn), the gusts (Gusts 24 kn) and the force on the Beaufort scale with its name coloured like the wind (Force 5 · Fresh breeze); on the right a small compass whose arrow shows where the wind goes, and where it comes from (from WSW). In the middle a metal pole with a windsock of five orange and white stripes, hung from its swivelling hoop; behind it light lines of air go by, as fast as the wind. At the bottom, on smoked glass, the hours from 7 am to 9 pm: for each a small bar (the mean wind full, the gusts fainter above it, in the colour of its strength), a small arrow, the knots and the hour. Choosing an hour the wind changes in a little over a second: the sock turns on its hoop to the new direction, goes slack and hangs swaying if the wind drops, fills and stretches out if it rises, and in a fresh breeze the tail flaps and the cloth makes folds that run towards the tail. Every few seconds a gust comes: the sock snaps, a ridge of air pulls it taut from the hoop to the tail, and the gust figure lights up in its colour. The knots roll to the new figure like an odometer (the tens turn only while the units go from 9 to 0), the compass arrow turns on a spring that goes a little past and comes back, the pill slides under the hour chosen with a bounce. The pointer going over the sock blows on it and pushes it aside; a tap blows from the point touched towards the sock.
How it works
A tube of points
The sock is made of rings of 18 points, four rings a stripe, from the widest at the hoop to the narrower tail. The points move by Verlet integration (the speed is the difference between the position now and the one before) in fixed steps of 1/120 of a second, at most four a frame; after each step five passes pull the links back to their length: along the tube, round each ring and diagonally across each face, so the cloth neither stretches nor shears, plus a few soft links (every other ring along the tube, every other point round it, across the tube) that round off the folds.
The wind drags it and blows it up
On each point the air pulls towards the speed of the wind (a drag proportional to the wind, weaker under 10 knots, when the air slips past a slack sock) and the weight pulls it down. From inside, the air pushes each point away from the middle of its ring: this pressure makes the tube a beam and holds it straight. As on an airfield, the wind fills about one stripe for every three knots: past where it reaches the pressure drops and the tail hangs. Under five or six knots the pressure turns negative and the cloth goes slack in folds.
Flapping and snapping
Two trains of waves run from the hoop to the tail, sideways and upwards, stronger and faster with the wind (their frequency grows with the knots) and nearly nothing at the hoop; the pressure inside varies round the tube in three travelling lobes, and leaves the folds between them. The gusts come by themselves every few seconds, more often when the gusts forecast are well above the mean wind: the wind rises in a third of a second and drops in one and a half, and at the start a ridge of air runs down the sock in 0.32 seconds and pulls it taut at once.
Drawn face by face
Every frame the points go into the camera (a little to one side and a little from below, with perspective) and the faces of the tube, the pieces of the hoop, the two arms and the pole are sorted from the back to the front and painted on a canvas. The normal of each face, turned outwards from its ring, says whether the cloth is seen from outside (wrapped light plus the sheen of the nylon) or from inside, through the mouth (dark, darker towards the tail); the seams between the stripes and the hem of the tail are a thin darker line. The hoop turns on the pole towards where the wind goes on a spring, stiffer in a strong wind.
The figures, the arrow and the breath
The units and the tens of the knots are two wheels of digits: a tween takes the value to the new number and the wheels follow it like an odometer, with the tens wheel growing out of nothing when the knots pass 10. The compass arrow is a spring worked out by hand that takes the shortest way. The speed of the pointer on the screen, turned into the camera's world, becomes a breath that pushes the points nearby and fades in a third of a second. The hours are a group of choices (arrows, Home and End); a click from a script (the library's preview) goes to the next hour worth seeing.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
HOURS | script.js | [['07', 6, 9, 60], …] | The forecast: the hour, the mean wind in knots, the gusts in knots, where it blows from in degrees. |
NOW | script.js | '15' | The hour it is now: it is shown first and in the row it is called Now. |
CHANGE | script.js | 1.2 | The seconds the wind takes to turn to the hour chosen. |
GUSTINESS | script.js | 1 | How often and how hard the gusts come: 0 never, 2 twice as much. |
FLAP | script.js | 1 | How much the cloth flaps in a strong wind. |
BLOW | script.js | 1 | How hard the pointer blows on the sock. |
STRIPES | script.js | 5 | The stripes of the sock, coloured and white in turn. |
SOCK_LENGTH | script.js | 124 | How long the sock is, in pixels. |
AIR | script.js | 1 | How many lines of air go by: 0 none. |
When to use it
For the app or the site of a kitesurfing, sailing or windsurfing school, a yacht club, an airfield or a paragliding site, a beach weather station, and in general for a wind you want to see, not only read.
On phones
The widget is 380 pixels wide and on a phone it narrows to the screen (358 on a 390 screen), always 424 tall; the knots figure gets a little smaller so the facts beside it keep clear of the compass. The hours are tapped with a finger; swiping a finger over the sock blows on it, a tap blows towards it, and vertically the page scrolls as usual (touch-action pan-y). The canvas is drawn at a density of 2 at most.
With reduced motion
The sock does not move by itself: for each hour its pose is worked out at once, out of sight, with no waves and no gusts, and the old picture fades into the new one in 0.45 seconds. The figures change at once, the arrow is in place at once, no lines of air, no breath from the pointer and no entrance; when nothing changes the canvas is not drawn again.
Pitfalls
- With the camera a little to one side the wrong way, a westerly wind showed the tail and not the mouth: turned the other way, the mouth opens towards the viewer and inside you see the dark cloth.
- In a light wind the slack cloth crumpled and nearly black inside faces showed through the creases, like holes: soft links round each ring (every other point) and a very soft one across the tube round off the folds, and the inside is less dark.
- A tube kept round by stiff links stood out like a cone even in three knots: the roundness has to come from the air pressure, which turns negative in a light wind, and the air's drag weakens under 10 knots, so the sock hangs.
- The flapping was nearly invisible: the same drag that pulls the sock along with the wind brakes every sideways move, and the force of the waves has to be chosen against it (at 1500 the tail moved five pixels).
- The pole going under the glass of the hours made a blurred bright stripe in the middle of the pill: it now fades into the dark a little above the glass.
- The hour bars in a light wind were five pixels tall and looked like dots: they start at nine pixels.
Libraries
GSAP 3.15.0, Saira (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 16 KB; the libraries: GSAP 28 KB.
Testing
Tested on 8 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.
