The weather hour by hour

Weather, Physics, TransitionsCanvas, GSAPAdvancedCompressed weight: Demo 25 KBGSAP + Inertia + Draggable 44 KBFreeDownload the zip

The weather of a seaside town in a widget whose background is the real sky of the hour chosen, worked out the way the air does it: sunlight scattered along every line of sight on a round Earth, clouds lit by marching towards the sun, the sea mirroring it all with the sun's path of glitter. Scrolling the hours runs the day like a time-lapse: the sun slides down its arc and sinks into the sea, the clouds race with the wind, the rain comes, the stars come out, at dawn the fog turns gold and lifts.

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>The weather hour by hour</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/onest@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the weather of a seaside town hour by hour: the background is the sky of the hour chosen, worked out the way
         the air does it (sunlight scattered along every line of sight, clouds lit from the sun, the sea mirroring it
         all), and scrolling the hours runs the day like a time-lapse -->
    <section class="sky" aria-labelledby="sky-place" data-sky data-autoclic>
      <canvas class="sky__canvas" aria-hidden="true" data-canvas></canvas>

      <header class="now" data-now>
        <h2 class="now__place" id="sky-place" data-place></h2>
        <p class="now__when" data-when></p>
        <p class="now__temp"><span data-temp></span><span class="now__deg" aria-hidden="true">°</span><span class="sr"> degrees</span></p>
        <p class="now__cond" data-cond></p>
        <p class="now__range" data-range></p>
      </header>

      <div class="panel">
        <dl class="facts">
          <div class="fact">
            <dt>
              <svg class="fact__icon fact__wind" viewBox="0 0 16 16" aria-hidden="true" data-wind-icon><path d="M8 2.2v11.6M8 2.2 4.4 5.9M8 2.2l3.6 3.7"/></svg>
              <span class="sr">Wind</span>
            </dt>
            <dd data-wind></dd>
          </div>
          <div class="fact">
            <dt>
              <svg class="fact__icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.9c2.2 3 4.3 5.4 4.3 8a4.3 4.3 0 0 1-8.6 0c0-2.6 2.1-5 4.3-8Z"/></svg>
              <span class="sr">Chance of rain</span>
            </dt>
            <dd data-chance></dd>
          </div>
          <div class="fact">
            <dt>
              <svg class="fact__icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M1.4 8c1.7-2.9 4-4.4 6.6-4.4s4.9 1.5 6.6 4.4c-1.7 2.9-4 4.4-6.6 4.4S3.1 10.9 1.4 8Z"/><circle cx="8" cy="8" r="2.1"/></svg>
              <span class="sr">Visibility</span>
            </dt>
            <dd data-vis></dd>
          </div>
        </dl>
        <div class="hours" role="slider" tabindex="0" aria-label="Forecast hour" data-hours>
          <span class="hours__lens" aria-hidden="true"></span>
          <ol class="hours__track" aria-hidden="true" data-track></ol>
        </div>
      </div>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/Draggable.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/InertiaPlugin.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.

282 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 weather hour by hour” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a black background a widget with rounded corners, 380 pixels wide and 424 tall, and its background is a window on the sea at the hour chosen. At the top left Larkmouth, Now, 17° in big thin figures, Partly cloudy and the day's highest and lowest (H 17° L 12°). At the bottom a smoked glass: the wind (SW 14 km/h, with an arrow pointing where it blows), the chance of rain with a drop and the visibility with an eye; below, the hours from 11 today to 14 tomorrow, each with its icon and its temperature (and the rain in blue when it is at least 20%), plus the sunset (Sunset 18:49) and the sunrise (Sunrise 07:43). The hour inside the pale lens in the middle is the one shown; the hours gone are fainter. When the page opens the strip runs from 11, with the morning fog lifting, up to now: the sky catches up with the hour. Dragging the hours with the mouse or a finger (with inertia, and they stop on an hour), with the wheel, the keys or by clicking an hour, the sky follows without a jump, like a time-lapse. The afternoon is blue, with cumulus white on the sun's side and grey where they are thicker, the sun dazzling white and under it its path on the sea; going down the sun turns gold and then red, flattens near the horizon and sinks into the sea, while the sky turns mauve and orange and the low clouds light up pink from below. After sunset the low air falls into the shadow of the Earth and the sky goes from red to mauve to blue, the crescent moon appears lit from the sun's side and the clouds come in from the sea with the wind; at 21 the rain falls in grey curtains under the far clouds and in slanted streaks close by, and the clouds over the town take its light. After midnight the sky opens up, the stars come out between the clouds and slowly turn round the pole as the hours scroll; before dawn the fog settles on the sea in banks, at sunrise it lights up pink and gold on the sun's side and around ten it lifts. The clouds always drift with the wind of the hour, the sea glitters and the rain really falls. The figures, the sky, the wind, the rain and the visibility change with the hour in the lens, and the wind's arrow turns. The writing is white on a dark sky and turns dark when the sky behind it gets bright (fog, sunlit clouds), and the glass takes the tint of the sea under it.

How it works

The light scattered by the air

For 64 heights of the line of sight, closer together near the horizon, the script marches in 16 steps through the air of a round Earth (a 6360 km radius, 60 km of air) and at each step adds up the sunlight scattered by the molecules (Rayleigh, the blue) and by the haze (Mie), dimmed along the way by the air, the haze and the ozone. Rayleigh and Mie are kept apart, so each point of the sky only multiplies them by its own phase function, that is by its angle to the sun; the table is rebuilt only when the hour changes. The Earth hides the sun from the low air: after sunset the sky goes from red to mauve to blue by itself, with the shadow of the Earth above the horizon, and the ozone keeps the twilight sky blue.

The clouds on a layer in perspective

The clouds lie on a layer at 1.6 km: each point of the sky meets it at a point (x, z), where a fractal noise that tiles without seams, cut by the hour's cloud cover, says how much cloud there is. Where a point of the grid spans many texels the fine octaves are left out, and the density is also worked out at the four corners of every point and averaged, so the edges do not come out in steps. The light: three steps towards the sun through the layer say how much the cloud is in shadow; from below you see the sun through the thin edges (Henyey-Greenstein phase, the silver lining), the light spread inside (greyer where it is thick), the base lit from below when the sun is low, the sky and, at night, the town's light on the clouds above it. Far away the haze comes in front.

The sea

Every point of the sea knows how far it is from a camera 15 metres above the water: there the slope of the waves comes from two trains of ripples moving with the wind, and the reflected direction takes the sky from that same table, weighted by Fresnel (Schlick). Where the waves are smaller than a point their average is used, which tips the mirror up towards a higher sky. The sun's path is the chance that the facets of the waves throw the sun at the eye (Beckmann, with Cox and Munk's width given by the wind); on top, sharp glints flash on and off where the path is strong.

Fog, rain, stars and moon

The fog is a layer 120 metres thick crossed in fine steps, lit by the sun (gold at dawn, strongest on its side) and by the whole sky, and its thickness changes in banks that drift. The rain is grey curtains under the far clouds (the density taken along the line of sight below the base) and streaks slanted by the wind close by. The stars have a fixed place on the sphere and turn round the pole with the hours: the latitude, which stays inside the code, comes from the sun's height at midday and the length of the day. The moon is a crescent lit on the side where the sun is, with earthshine on its dark part.

From the sums to the pixels

The sky is worked out on a grid of DETAIL pixels a point (about 10,000 points) and stretched smooth, the sea on another grid, so the horizon stays sharp. The light is linear: an exposure that opens up as the light goes (the eye adapts, but not all the way), the ACES filmic curve and the sRGB gamma in a single table. On top the sun with its glow, the moon, the stars, the glints and the rain are drawn sharp. The ink of the writing looks at the brightness behind it (and at the brightest stretch under the glass), with two thresholds so it does not flicker, and turns over in a third of a second; the glass takes the tint of the sea, darkened.

The hours, the hands and the preview

The strip is a Draggable with inertia that stops on an hour; its position is the time, interpolated between one hour and the next, so the sky moves while you drag. Where the clouds are: the wind added up hour after hour (going back brings back the same clouds) plus the drift while you watch. With the keys it is a slider (arrows, Page Up and Down, Home, End) that speaks the hour, the sky, the temperature, the rain, the wind and the visibility; the wheel scrolls the hours and at either end lets the page scroll. A click from a script (detail 0, the library's preview) runs to the next fine moment: sunset, evening, rain, night, fog, sunrise, morning, now.

Values to change

Name	File	Default	What it changes
`PLACE`	script.js	`'Larkmouth'`	The town.
`DAYS`	script.js	`['Tuesday', 'Wednesday']`	Today and tomorrow: tomorrow's name shows at midnight in the strip of hours.
`NOW`	script.js	`14`	The hour it is now: the hours before it are the morning gone, fainter.
`SUNSET`	script.js	`'18:49'`	The time of sunset.
`SUNRISE`	script.js	`'07:43'`	The time of sunrise.
`SUN_HEIGHT`	script.js	`33`	How high the sun climbs at midday, in degrees: with sunrise and sunset it gives its whole arc (and the turning of the stars).
`HOURS`	script.js	`[[11, 'fogClearing', 13, 0, 9, 200, 3], …]`	The forecast: the hour, the sky (a name from SKIES), the temperature, the chance of rain in %, the wind in km/h, where it blows from in degrees and how far you can see in km. After midnight the clock starts again and the strip goes on into the next day.
`SKIES`	script.js	`{ sunny: ['Sunny', 0.03, 0.2, 0, 0], … }`	The skies: the name you read, how much of the sky is cloud, how thick the clouds are, the rain and the fog, from 0 to 1. The sky worked out and the icons come from these numbers.
`TIME_LAPSE`	script.js	`3`	How many km the clouds travel with the wind, at 15 km/h, for each hour scrolled: higher, and they race faster as the hours scroll.
`DRIFT`	script.js	`4`	How fast the clouds drift while you watch, times the real wind.
`DETAIL`	script.js	`3`	How many pixels each point of the sky worked out covers: smaller is finer and slower.
`STARS`	script.js	`260`	How many stars come out at night.
`RAIN`	script.js	`150`	How many drops fall in the heaviest rain.
`CHANGE`	script.js	`1.2`	The seconds the sky takes to run to an hour picked with a click or a key.

Try them in the Playground

When to use it

For the app or the site of a seaside resort, a harbour, a campsite or a sailing school, an app for photographers waiting for the right light, the page of an outdoor event, and in general for a forecast where what the sky looks like matters, not only the figures.

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 sky is worked out again for the new size. The hours are dragged with a finger, with inertia, and vertically the page scrolls as usual (touch-action pan-y). The canvas is drawn at a density of 2 at most, and if a slow phone takes more than 14 milliseconds for a frame the sky is worked out on a slightly coarser grid instead of stuttering.

With reduced motion

The hours do not run: an hour picked with a click, the keys or the preview arrives at once and the old sky fades into the new one in 0.4 seconds. A finger still drags the strip (the hand moves it), but without inertia; the clouds do not drift, the sea does not glitter, the drops close by do not fall and there is no entrance.

Pitfalls

The clouds worked out on a coarse grid and then stretched came out in steps, because the density went from none to full inside a single point: the density is also worked out at the four corners of every point and averaged, and the fine octaves of the noise are left out where a point spans many texels.
With the light taken from the sun's geometric place, at the minute of sunrise the fog was still dark and at sunset the disc could not be seen: the air lifts a low sun by half a degree (refraction), and the light is worked out from the sun as seen.
An ink mixed halfway between white and dark, on a sky of middling brightness, gave the worst contrast there is: the ink is one or the other, chosen with two thresholds so it does not flicker, and turns over in a third of a second.
The sun's path under the glass, much brighter than the sea on average, left the hours white on white: to choose the glass's ink the brightest stretch counts too, and the glass takes the tint of the sea, darkened.
The sun's disc, drawn over an added glow, looked darker than its own glow (a white ring round a cream middle): the bloom has to be added afterwards, over the disc too.
The clouds mirrored in the far sea, where a point of the grid spans kilometres of water, came out in pink blocks: beyond a few hundred metres the sea mirrors only the sky, and the waves, smaller than a point, tip the mirror on average.
The night's glow and the clouds mirrored in the water passed in front of the fog, and a line was left on the horizon between sky and sea: everything behind the fog is multiplied by its transparency, and sky and sea in the fog take the same colour.
A far hour reached at once (End, or with reduced motion) left the hour before in bold, because only the hours near the lens were updated: all of them are checked, but only what changes is written.

Libraries

GSAP 3.15.0, Onest (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 25 KB; the libraries: GSAP + Inertia + Draggable 44 KB.

Testing

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