Seven zero-dependency canvas weather animations in pure JavaScript, and a set of time and weather cards built from them. No libraries, no assets, works offline — even from file://.
file://
The effects put to work as UI: clock cards with the local sky living behind them, across all ten conditions and at both card and list size. Each card shows the real current time for its city, and the time of day is scrubbable.
Slanted rain streaks with splashes, lightning bolts and thunder flashes. Adjustable angle and intensity.
Four parallax layers with depth-of-field blur, wind gusts and snow settling on the ground.
Day sky with volumetric clouds, dawn-to-night phases, a sun that dims behind cover and passing bird flocks.
Layered strata fog drifting with the wind, with a hazy sun breaking through.
Ice stones that bounce and scatter, shed chips on impact and melt on the ground under a green storm sky.
Gust lines that sweep through in bursts, curl mid-air and dissolve, with tumbling autumn leaves.
Mixed rain, half-melted flakes and ticking ice pellets that build a slush layer on the ground.