Showcase · 8s loop

Weather Cycle

Sun is covered by a passing cloud that rains and rolls on — a full dawn-to-shower-to-dawn loop

By Lottie Max Added Jun 12, 2026

540×400 · 30fps · 8.00s · loops

Inspiration

A complete weather story in 8 seconds — sun, cloud arrives, brief shower, sun returns. Demonstrates how lock-step timing of multiple elements can create narrative motion without any explicit storyboarding.

How it was made

The sun stays static at centre with a slowly rotating ray group above it. The cloud rolls in from off-canvas left at 1.5s, settles over the sun at 2.8s, holds for 2.7 seconds while rain falls, then rolls off right at 6.8s. Rays fade out as the cloud passes over and fade back in as it leaves. Ten rain drops appear from the cloud's underside on staggered phases (starting at 3.2s) for the duration of the eclipse — each falls 200px before fading. Every transition is locked against every other transition so the sequence reads as one continuous weather event.

Embed it anywhere

Paste the snippet into any HTML page. The animation loads from /templates/weather-cycle.json — host it yourself or hot-link from lottiemax.com.

Embed · Weather Cycle

<script src="https://unpkg.com/lottie-web@latest/build/player/lottie.min.js"></script>
<div id="lottie-weather-cycle" style="width:540px;height:400px;"></div>
<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie-weather-cycle'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'https://lottiemax.com/templates/weather-cycle.json',
  });
</script>