Claude Haiku 4.5
by AnthropicReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 5 s
- Cost
- $0.097
- Output tokens
- 19,332
- Spent thinking
- 15,475 tokens
- Speed
- 302.1 tok/s
- Console errors
- 0
- First token after
- 970 ms
- First visible text after
- 1 min 1 s
- Prompt tokens
- 565
- Code size
- 12.5 KB
- Finish reason
- stop
- Served by
- Amazon Bedrock
- Model id
anthropic/claude-haiku-4.5- Reasoning sent
{"enabled":true}- Max output
- 64,000 tokens
- Generated
- Nov 10, 2026
What it was asked
The prompt
Create a set of four animated weather cards (sunny, rainy, snowy, stormy), made with HTML and CSS only. Requirements: - Absolutely no JavaScript: the file must not contain any <script> tag or inline event handler. - No images, no SVG, no icon fonts: every weather icon is built from HTML elements and pseudo-elements styled with CSS. - Each card shows an animated icon (rotating sun rays, falling rain drops, drifting snowflakes, flashing lightning), a city name, a temperature and a short description. - Each card has its own background gradient matching the weather. - The cards are displayed in a responsive grid (4 per row on desktop, stacked on mobile) and lift up on hover. - Smooth infinite animations using @keyframes, and respect prefers-reduced-motion.
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task. Output rules: - Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block. - Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task. - Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw. - The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar. - Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction. - Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session. - Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing. - The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message. - The code must run with zero errors in the console of the latest Chrome.
Code run-1.html · 465 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Weather Cards</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
max-width: 1200px;
width: 100%;
}
.weather-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
@media (max-width: 1024px) {
.weather-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.weather-cards {
grid-template-columns: 1fr;
}
}
.card {
padding: 30px;
border-radius: 20px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
@media (prefers-reduced-motion: reduce) {
.card {
transition: none;
}
.card:hover {
transform: none;
}
}
.card.sunny {
background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
}
.card.rainy {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
.card.snowy {
background: linear-gradient(135deg, #e0f4f7 0%, #90c4d4 100%);
}
.card.stormy {
background: linear-gradient(135deg, #474747 0%, #2c3e50 100%);
}
.weather-icon {
height: 100px;
margin-bottom: 20px;
position: relative;
}
/* SUNNY ICON */
.sunny-icon {
display: flex;
align-items: center;
justify-content: center;
}
.sun-body {
width: 50px;
height: 50px;
background: #ffd89b;
border-radius: 50%;
position: relative;
box-shadow: 0 0 30px rgba(255, 200, 0, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
.sun-body {
animation: sun-glow 3s ease-in-out infinite;
}
.sunny-icon {
animation: rotate-sun 20s linear infinite;
}
}
@keyframes sun-glow {
0%, 100% { box-shadow: 0 0 20px rgba(255, 200, 0, 0.4); }
50% { box-shadow: 0 0 40px rgba(255, 200, 0, 0.8); }
}
@keyframes rotate-sun {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.sun-ray {
position: absolute;
width: 8px;
height: 15px;
background: #ffd89b;
left: 50%;
top: -25px;
margin-left: -4px;
border-radius: 10px;
}
.sun-ray:nth-child(2) { transform: rotate(45deg); }
.sun-ray:nth-child(3) { transform: rotate(90deg); }
.sun-ray:nth-child(4) { transform: rotate(135deg); }
.sun-ray:nth-child(5) { transform: rotate(180deg); }
.sun-ray:nth-child(6) { transform: rotate(225deg); }
.sun-ray:nth-child(7) { transform: rotate(270deg); }
.sun-ray:nth-child(8) { transform: rotate(315deg); }
/* RAINY ICON */
.rainy-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 10px;
}
.cloud {
width: 80px;
height: 30px;
background: #90c4d4;
border-radius: 20px;
position: relative;
margin-bottom: 15px;
box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
}
.cloud::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #90c4d4;
border-radius: 50%;
left: -10px;
top: -10px;
}
.cloud::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #90c4d4;
border-radius: 50%;
right: -10px;
top: -10px;
}
.rain-drops {
display: flex;
gap: 8px;
justify-content: center;
}
.rain-drop {
width: 3px;
height: 10px;
background: #90c4d4;
border-radius: 3px;
}
@media (prefers-reduced-motion: no-preference) {
.rain-drop {
animation: fall 1.5s ease-in infinite;
}
}
.rain-drop:nth-child(1) { animation-delay: 0s; }
.rain-drop:nth-child(2) { animation-delay: 0.2s; }
.rain-drop:nth-child(3) { animation-delay: 0.4s; }
.rain-drop:nth-child(4) { animation-delay: 0.6s; }
@keyframes fall {
0% {
transform: translateY(-10px);
opacity: 1;
}
80% {
opacity: 1;
}
100% {
transform: translateY(25px);
opacity: 0;
}
}
/* SNOWY ICON */
.snowy-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 10px;
}
.snowflake {
width: 15px;
height: 15px;
position: relative;
}
.snowflake::before,
.snowflake::after {
content: '';
position: absolute;
background: #90c4d4;
}
.snowflake::before {
width: 2px;
height: 15px;
left: 50%;
top: 0;
margin-left: -1px;
}
.snowflake::after {
width: 15px;
height: 2px;
left: 0;
top: 50%;
margin-top: -1px;
}
.snowflakes {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 15px;
}
@media (prefers-reduced-motion: no-preference) {
.snowflake {
animation: drift 3s ease-in-out infinite;
}
}
.snowflake:nth-child(1) { animation-delay: 0s; }
.snowflake:nth-child(2) { animation-delay: 0.5s; }
.snowflake:nth-child(3) { animation-delay: 1s; }
@keyframes drift {
0%, 100% {
transform: translateY(0) translateX(0);
opacity: 1;
}
50% {
transform: translateY(20px) translateX(-5px);
opacity: 0.8;
}
100% {
transform: translateY(40px) translateX(0);
opacity: 0;
}
}
/* STORMY ICON */
.stormy-icon {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.storm-cloud {
width: 80px;
height: 30px;
background: #2c3e50;
border-radius: 20px;
position: relative;
box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.3);
}
.storm-cloud::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #2c3e50;
border-radius: 50%;
left: -10px;
top: -10px;
}
.storm-cloud::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #2c3e50;
border-radius: 50%;
right: -10px;
top: -10px;
}
.lightning {
position: absolute;
width: 3px;
height: 25px;
background: #fff;
left: 50%;
bottom: -30px;
transform: skewX(-20deg);
}
@media (prefers-reduced-motion: no-preference) {
.lightning {
animation: flash 2s ease-in-out infinite;
}
}
.lightning:nth-of-type(1) { animation-delay: 0s; }
.lightning:nth-of-type(2) { left: 40%; animation-delay: 0.5s; }
.lightning:nth-of-type(3) { left: 60%; animation-delay: 1s; }
@keyframes flash {
0%, 10%, 15%, 100% { opacity: 0; }
11%, 14% { opacity: 1; }
}
/* TEXT STYLES */
.city {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.temp {
font-size: 32px;
font-weight: bold;
margin-bottom: 5px;
}
.description {
font-size: 14px;
opacity: 0.8;
}
.card.sunny .city,
.card.sunny .temp,
.card.sunny .description {
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.card.rainy .city,
.card.rainy .temp,
.card.rainy .description {
color: #2c3e50;
}
.card.snowy .city,
.card.snowy .temp,
.card.snowy .description {
color: #2c3e50;
}
.card.stormy .city,
.card.stormy .temp,
.card.stormy .description {
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="weather-cards">
<div class="card sunny">
<div class="weather-icon sunny-icon">
<div class="sun-body"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
</div>
<h3 class="city">Sunny City</h3>
<div class="temp">25°C</div>
<div class="description">Clear skies</div>
</div>
<div class="card rainy">
<div class="weather-icon rainy-icon">
<div class="cloud"></div>
<div class="rain-drops">
<div class="rain-drop"></div>
<div class="rain-drop"></div>
<div class="rain-drop"></div>
<div class="rain-drop"></div>
</div>
</div>
<h3 class="city">Rainy Town</h3>
<div class="temp">18°C</div>
<div class="description">Light showers</div>
</div>
<div class="card snowy">
<div class="weather-icon snowy-icon">
<div class="cloud"></div>
<div class="snowflakes">
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
</div>
</div>
<h3 class="city">Snowy Peak</h3>
<div class="temp">-5°C</div>
<div class="description">Snow falling</div>
</div>
<div class="card stormy">
<div class="weather-icon stormy-icon">
<div class="storm-cloud"></div>
<div class="lightning"></div>
<div class="lightning"></div>
<div class="lightning"></div>
</div>
<h3 class="city">Storm Valley</h3>
<div class="temp">12°C</div>
<div class="description">Thunderstorms</div>
</div>
</div>
</div>
</body>
</html>Reasoning trace (15,475 tokens)
The user wants me to create weather cards with HTML and CSS only. Let me break down the requirements:
1. No JavaScript - absolutely no <script> tag or event handlers
2. No images, no SVG, no icon fonts - build everything from HTML elements and CSS
3. Four cards: sunny, rainy, snowy, stormy
4. Each has:
- Animated icon
- City name
- Temperature
- Short description
5. Background gradient matching weather
6. Responsive grid (4 per row on desktop, stacked on mobile)
7. Lift up on hover
8. Smooth infinite animations with @keyframes
9. Respect prefers-reduced-motion
For the animations:
- Sunny: rotating sun rays
- Rainy: falling raindrops
- Snowy: drifting snowflakes
- Stormy: flashing lightning
Let me design each weather icon:
**Sunny:**
- A circle for the sun body
- Multiple rays around it that rotate
**Rainy:**
- A cloud shape
- Raindrops falling below it
**Snowy:**
- A cloud shape
- Snowflakes drifting down
**Stormy:**
- A cloud shape
- Lightning bolts (maybe flashing)
Let me structure the HTML:
```html
<div class="weather-cards">
<div class="card sunny">
<div class="weather-icon">
<!-- Sun icon -->
</div>
<h3 class="city">Sunny City</h3>
<div class="temp">25°C</div>
<div class="description">Clear skies</div>
</div>
<!-- More cards -->
</div>
```
For the sunny icon, I can create:
- A circle (sun body)
- 8 divs positioned around it for the rays
- Rotate them
For rain:
- A cloud shape (use div with border-radius, maybe multiple boxes)
- Raindrops as small divs falling in sequence
For snow, a similar cloud shape with drifting snowflake divs styled to look star-like.
For storm, the cloud plus angled lightning bolt shapes with a flash keyframe animation.
I'll sketch the sun markup first:
```html
<div class="weather-icon sunny-icon">
<div class="sun-body"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
```
Then I realize pseudo-elements could handle this more elegantly instead of stacking so many ray divs—worth reconsidering the approach entirely.
Breaking it down per card: sunny needs a central circle with 8-12 rotating rays; rainy needs a cloud (built from overlapping circles or border-radius tricks) with falling rain lines; snowy needs the same cloud with drifting plus-sign snowflakes; stormy needs a dark cloud with animated lightning bolts.
Multiple divs with staggered animation-delay will give rain/snow that natural, independent falling motion.
I start coding the HTML structure with a gradient background, flex-centered layout, and a container to hold the weather cards.
For the grid layout I use `repeat(auto-fit, minmax(250px, 1fr))` with responsive breakpoints collapsing to 2 columns then 1 column on smaller screens. Each card gets rounded corners, a hover lift effect with shadow, and I include a `prefers-reduced-motion` media query to disable transforms for accessibility.
Now moving into the actual weather type gradients - sunny uses warm orange-to-blue tones, rainy goes teal-to-pink, snowy is light icy blues, and stormy uses dark grays. For the sunny icon specifically, I'm building the sun body as a circle with a glowing box-shadow effect using rgba for that radiant feel.
I'm adding a subtle pulsing glow animation respecting prefers-reduced-motion, then setting up sun rays as positioned divs rotated at 45-degree increments around the sun body to create that classic sun-with-rays look.
Now moving to the slow rotating animation for the sun icon, and then shifting toward the rainy icon structure - laying out the cloud shape with a soft blue background and rounded corners, with a pseudo-element bump starting to form the cloud's bumpy silhouette.
{ animation-delay: 0.6s; }
followed by the fall keyframes, dropping from -10px to 25px while fading out. Moving to the snowy icon, I'm setting up a flexbox container with flex-direction column, then building snowflake shapes using pseudo-elements - the ::before creates the vertical line segment.
Now the ::after handles the horizontal line, completing the plus-shaped snowflake. I'm arranging multiple snowflakes in a flex row with gaps, then wiring up a drift animation that moves them down and slightly left while fading, staggered with different animation delays for each child.
For the stormy icon, I set up a dark storm cloud shape using rounded corners and pseudo-elements to add bumps for a fluffy cloud silhouette, with a drop shadow for depth.
Lightning bolts are thin skewed divs positioned beneath the cloud, animated with staggered delays and a flash keyframe toggling opacity to simulate flickering strikes. Wrapping the animation in a prefers-reduced-motion check keeps things accessible.
Then I move into basic text styling, starting with city name typography.
Now continuing with temp and description sizing, then setting text colors per card variant (sunny/rainy/snowy use dark #333/#2c3e50, stormy uses white) so text stays legible against each gradient. Moving into the HTML body, starting the container and card markup with the sunny card's icon structure.
</div>
</div>
<h3 class="city">Rainy Town</h3>
<div class="temp">18°C</div>
<div class="description">Light showers</div>
</div>
Now adding the Snowy Peak card with cloud and snowflake elements, temp -5°C, and the Stormy card starting with a storm-cloud icon, continuing the same card structure pattern for each weather type.
Checking the animations match each weather type correctly - rain drops, snowflakes, and lightning bolts all need distinct keyframe timings. Snowflakes use three separate divs with staggered animation delays rather than pseudo-elements, which should give a more natural falling effect. Verifying the core constraints are met: pure CSS/HTML, no scripts, no external image assets, four distinct animated weather cards.
For the grid, I want 4 columns on desktop. Testing `repeat(auto-fit, minmax(250px, 1fr))` at 1280px width: 1280/250 = 5.12, so auto-fit might squeeze in 5 columns instead of 4. Accounting for gaps (30px × 4 = 120px), available space is 1160px, giving ~232px per column — under my 250px minimum, so it'd actually only fit 4, not 5.
Still, to avoid relying on fuzzy math, explicit `repeat(4, 1fr)` with media query breakpoints at 1024px (2 columns) and 600px (1 column) is more reliable than hoping auto-fit lands on the right number.
I verify the reduced-motion handling across all animations—sun-glow, rotate-sun, fall, drift, flash—each wrapped in `@media (prefers-reduced-motion: no-preference)`, with hover transforms disabled otherwise. Rain-drop animation is similarly gated. Now checking the snowfall animation for the same treatment.
For snowflakes:
```css
@media (prefers-reduced-motion: no-preference) {
.snowflake {
animation: drift 3s ease-in-out infinite;
}
}
```
And lightning flash follows the same pattern.
Text contrast against each gradient background needs checking: sunny uses #333 on a yellow-to-dark-blue gradient, rainy and snowy use #2c3e50 on lighter gradients, and stormy uses white on dark gray-to-blue. The sunny gradient spans from light yellow to dark blue, so dark text may struggle against the darker end—something to reconsider.
e card has good overall contrast rather than getting stuck on this detail.
Simplifying: for sunny I'll switch to white text with a subtle dark shadow instead of #333, since that works better across the gradient. Rainy and snowy cards keep dark text (#2c3e50) since they're light-colored, and stormy keeps white text.
```css
.card.sunny .city,
.card.sunny .temp,
.card.sunny .description {
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
```
Now checking the animations - sunny needs a rotating sun effect.
width: 2px, height: 15px, centered horizontally, and ::after as a horizontal bar, centered vertically, forming a plus shape in light blue.
With the styling confirmed, the full HTML structure comes together: viewport meta tags, a gradient purple background, centered flex layout, and a container grid for the weather cards.
The grid uses 4 columns on desktop, dropping to 2 on tablets and 1 on mobile. Cards get rounded corners, padding, shadow, and a hover lift effect, with a `prefers-reduced-motion` fallback disabling the transition for accessibility.
Each weather type gets a distinct gradient background: sunny (gold-to-navy), rainy (teal-to-pink pastel), snowy (icy blue), and stormy (dark gray-to-navy).
For icons, the sunny one uses a glowing circle with 8 rays positioned via rotation transforms, animated with a pulsing glow and slow rotation—both respecting reduced-motion. Rainy pairs a cloud shape (built from a rounded rectangle plus two circle pseudo-elements) with staggered falling raindrops. Snowy uses plus-shaped snowflakes drifting downward with fading opacity, staggered across three flakes. Stormy combines a dark cloud with flickering lightning bolts skewed at an angle, using a flash keyframe for a strobe effect, with multiple bolts offset in position and timing.
Text styling varies by card—sunny and stormy get white text with shadows, while rainy and snowy use dark navy for contrast against their lighter backgrounds. The body then lays out four cards in the grid, starting with the sunny card showing "25°C, Clear skies."