The copy button
Buttons, Text, SVG, Physics
NewFree
All components
The weather in a word
The weather for the next five days in a fell village, in the minimal style, where the word of the weather is the picture: Rain drips (the letters stretch downwards, spring back up and let a drop fall), Wind bends in the wind on the slant axis of Roboto Flex and narrows at every gust, Clear opens wide and light, Snow comes down letter by letter and settles, Fog loses its contrast and blurs. Above, the temperature in large thin figures that roll; below, the days as words to choose. Every letter is a small body on springs.
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 weather in a word</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the next five days in a small fell village, and the word of the weather is the picture: Rain drips, Wind leans
and narrows in the gusts on the slant axis of Roboto Flex, Clear opens wide and light, Snow comes down letter by
letter and settles, Fog loses its contrast. Above it the temperature in large thin figures, under it the days
as words to choose -->
<section class="forecast" aria-label="Weather in Askerfell" data-forecast data-autoclic>
<span class="rule rule--top" aria-hidden="true" data-rule></span>
<header class="head" data-head>
<p class="head__place" data-place>Askerfell</p>
<p class="head__day"><span class="swap" data-when></span></p>
</header>
<p class="temp" aria-hidden="true"><span class="temp__slot" data-temp></span><span class="temp__deg" data-deg>°</span></p>
<div class="word" aria-hidden="true" data-word></div>
<p class="note" aria-hidden="true" data-note-line>
<span class="swap note__text" data-note></span>
<span class="swap note__low" data-low></span>
</p>
<span class="rule rule--mid" aria-hidden="true" data-rule></span>
<div class="days" role="radiogroup" aria-label="Day" data-days>
<span class="days__tick" aria-hidden="true" data-tick></span>
</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.
50 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 weather in a word” from Animorio and fit it into my siteWhat it does
On a black background a widget 380 pixels wide and about 410 tall, with no card round it: two hairline rules, at the top Askerfell and the day (Saturday), the temperature in large, very thin figures (11°) and under it, large, the word of the weather in Roboto Flex: Rain, Wind, Clear, Snow or Fog. Further down, in grey, a line (Showers until late afternoon) and the lowest (Low 7°); at the bottom the five days, Sat, Sun, Mon, Tue and Wed, each with its highest. The day chosen is white, wider and heavier, and over it a thin blue tick hangs from the rule. Choosing a day the tick runs over to it like an inchworm (first the front, then the back), the name of the day and the line change, the temperature rolls upwards when the day is warmer and downwards when it is colder, one figure after the other, and the old word thins out and fades. The new one arrives and does its weather. Rain appears and its letters drip one at a time: the lower part of the letter sags like wet paint, then springs back up with a small rebound and a blue drop lets go of it and falls. Wind comes in from the left, narrow and slanted, then three gusts run through it from left to right: the letters lean past the italic and narrow, and in the lulls they stand almost upright again. Clear opens from the middle outwards to nearly the widest the typeface goes, thin and light, goes just past and comes back. Snow comes down letter by letter, in a random order, slowly, swaying and turning a little; each letter touches the line, squashes a hair, takes weight, and the ones beside it feel the knock. Fog arrives crisp and white and loses its contrast: the letters turn grey and soft one after the other, widen a little, and a thicker bank drifts through from the left. Pointing at the word, or touching it, plays its weather again.
How it works
Every letter is a body on springs
Every letter has twelve channels: the width, the weight and the slant of the typeface, an extra skew past the axis, the offset, the rotation, the squash across and down, the drip, the contrast and the blur. Each channel chases its target on a spring (SPRING), integrated in steps of 1/120 of a second with the frame time limited to 1/30; the target is the weather's pose plus what the gust, the sway of the snow, the bank of fog and the drip add, values GSAP moves along in timelines. Contrast and blur have a critically damped spring, with no bounce; the drip a stiffer, looser spring, like something wet. When everything is still the loop takes itself off GSAP's ticker.
Rain: the letter cut in three
Every letter holds four copies of its glyph: whole, and three slices cut with clip-path, the one above the cut, a strip one and a half pixels tall and the one below. While it drips the whole letter hides: the strip stretches with scaleY (1 plus the drip divided by 1.5) and the bottom slice moves down by as much, so the stems of the letter run in straight lines. The cut sits between 0.18 and 0.28 of the size above the baseline (measured once with a zero-height element), different for every letter; the slices overlap by half a pixel so no light line is left. A tween pulls the drip down with power2.in, like weight; then the target goes back to zero, the spring brings it up with a rebound and a two-pixel drop leaves the bottom of the letter and falls.
Wind on the slant axis
Roboto Flex has a slnt axis from 0 to -10 degrees. At rest Wind stands at -6 with the width at 86; each gust is a number from 0 to 1 for every letter, moved by GSAP with a stagger of 0.08 seconds from the left, and at a full gust it takes the slant to -10, adds a skew of up to -12 degrees past the axis, narrows the width by 42 and pushes the letter 0.05 em. Three gusts of different strength and two lulls: the springs give every letter its own small lag and its settling.
Clear, snow and fog
Clear opens the width from 30 to 144 from the middle outwards (stagger from center): the spring goes past, up to 151, and comes back. The word's size is worked out so that Clear at 151 fills the line: every word is measured once at 100 pixels in its pose, and again when the measure changes. Snow starts 0.62 em higher and comes down at a constant speed, so the spring settles by itself on arrival; the sway is a sine that dies away. Touching the line the letter gets a knock on the speeds of its squash, takes weight, and the ones beside it a smaller knock downwards. Fog takes the contrast to FOG, the blur to 1.6 per cent of the size and the width to 124, letter by letter, then a bank passes like a wave.
The figures, the days and the preview
The temperature rolls figure by figure inside a clipped slot: the old ones leave by their whole height, the new ones come in from the other side only afterwards, and the width of the slot follows with a back.out; the minus sign is the real character (String.fromCharCode). The days are a radio group (arrows, Home and End, only one day reached with the Tab key). The tick has two ends on two tweens: the front one runs first, the other follows; its length is measured on a hidden copy of the name already in the wide pose, because the name widens with a CSS transition. A click from script on the widget (the library's preview) runs the round of the week, one day after another with the time each one needs, and comes back to Saturday.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
PLACE | script.js | 'Askerfell' | The place. |
DAYS | script.js | [['Saturday', 'Sat', 'rain', 11, 7, 'Showers until late afternoon'], …] | The days: the name, the short name, the weather (rain, wind, clear, snow, fog), the highest, the lowest and the line. |
WORDS | script.js | { rain: 'Rain', wind: 'Wind', clear: 'Clear', snow: 'Snow', fog: 'Fog' } | The word of each weather (for another language: the size works itself out again on the widest word). |
SPRING | script.js | [210, 21] | The spring of every letter: how stiff, and how much it is held back. |
DRIP | script.js | 0.3 | How far a letter of rain drips, in parts of the word's size. |
GUST | script.js | 1 | How hard the wind blows on the letters (0, never). |
SNOW_FALL | script.js | 1.8 | The seconds a letter of snow takes to come down. |
FOG | script.js | 0.34 | How much contrast the fog leaves to the word (0 to 1). |
MAX_SIZE | script.js | 104 | The largest the word can be, in pixels. |
When to use it
For the site of a mountain hut, a mountain hotel, a ski resort or a campsite, the app of a village or of an outdoor event, a dashboard that wants weather you read at a glance; and generally wherever a single word has to tell a state. The days, the words (in another language too) and the colours in the variables can be changed.
On phones
The widget is as wide as the screen less 32 pixels (358 at 390) and the word shrinks by itself so that Clear, the widest, fits the line; the animations are the same. A tap on the word plays its weather again (like the pointer on a computer), a tap on a day chooses it, and pressing a day's name narrows it a little.
With reduced motion
No springs and nothing moving: choosing a day the old word fades and the new one fades in already in its pose (Wind narrow and slanted, Clear wide and thin, Fog grey and soft), the temperature and the lines change with a fade and the tick fades out and back in over the new day. Pointing at the word starts nothing; when the page opens everything fades in.
Pitfalls
- Fontsource usually loads only the weight axis (index.css): for the slant, the width and the optical size of Roboto Flex it takes full.css, which carries every axis.
- With line-height 1 the glyph spills out of its box, and a clip-path inset with 0 at the top and the sides cut it: the slices have negative margins of 0.4 em on every side but the one at the cut.
- The three slices left a thin darker line right on the cut, from the antialiasing of half-pixel edges: they now overlap by half a pixel.
- In the temperature's roll the old figure and the new one showed together, one over the other: the new one comes in only once the old one has left by its whole height.
- With Clear's width at rest at 151, the end of the axis, the spring could not go past and the opening arrived flat: the pose is at 144 and the word's size is worked out at 151, so the rebound has room.
- The letters of snow, starting from above, would have crossed the figures: the word's box has room above and below and clips what leaves it.
- With Wind already very slanted at rest the gusts barely showed: at rest it stands at -6 with no skew, and a gust takes it to -10 plus 12 degrees of skew and narrows it.
- The day chosen widens with a CSS transition, and the tick measured at once came out short: it is measured on a hidden copy of the name already in the wide pose.
Libraries
GSAP 3.15.0, Roboto Flex (font variabile, con gli assi della larghezza, del peso, dell'inclinazione e della grandezza ottica) 5.3.0.
Compressed with gzip, the three demo files weigh 12 KB; the libraries: GSAP 28 KB.
Testing
Tested on 16 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.
