Four weather cards — CSS only

Build four side-by-side weather cards — Sun, Rain, Snow, Thunderstorm — where each card's weather is fully animated in pure CSS. No JavaScript, no SVG, no images: every raindrop is an element or pseudo-element.

The cards

• Sun: a radiant disc with slowly rotating rays and a pulsing warm glow; a small cloud may drift past and briefly dim it.
• Rain: a grey cloud shedding staggered raindrops that fall and splash at a puddle line; vary the offsets so the loop never looks mechanical.
• Snow: flakes of different sizes drifting down with horizontal sway, slower than the rain, with a hint of accumulation at the bottom.
• Thunderstorm: a darker cloud, heavy rain, and a lightning flash that lights the whole card for a frame or two at irregular-feeling intervals — chain several keyframe timings so the pattern doesn't obviously repeat every second.

Build

• The cards share one design system: same size, radius, and typography; each is labeled (SUN / RAIN / SNOW / STORM) with a temperature; day-sky versus storm-sky backgrounds set each card's mood.
• A responsive row that wraps to a 2×2 grid on narrow windows.
• Staggered animation delays so the four cards never pulse in unison.

What separates great from passable

• Loop seams are invisible — stare at any card for 30 seconds and find no reset jump.
• The lightning genuinely startles (timing plus brightness) without strobing constantly.
• Consistent art direction: four cards, one product.