Stay connected with us on X, Discord, and LinkedIn to stay up to date with future analysis
All MicroEvals
Weather animation
Create MicroEval
Header image for Weather animation

Weather animation

An animated weather card

Prompt

Create a single HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining rays, bright background) Snow: (e.g., falling snowflakes, snow accumulating) Show all the weather card side by side The card should have a dark background. Provide all the HTML, CSS, and JavaScript code within this single file. The JavaScript should include a way to switch between the different weather conditions (e.g., a function or a set of buttons polished) to demonstrate refined the animations for each. UI meets Apple's premium-quality standard for stunning visual design.

A system prompt was added to support web rendering

Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize