Claude Haiku 4.5
by AnthropicReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 12.2 s
- Cost
- $0.019
- Output tokens
- 3,684
- Spent thinking
- 0 tokens
- Speed
- 335.2 tok/s
- Console errors
- 0
- First token after
- 1.3 s
- First visible text after
- 1.3 s
- Prompt tokens
- 535
- Code size
- 12.1 KB
- Finish reason
- stop
- Served by
- Amazon Bedrock
- Model id
anthropic/claude-haiku-4.5- Reasoning sent
{"effort":"none"}- Max output
- 32,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 · 454 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 {
width: 100%;
max-width: 1280px;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
width: 100%;
}
@media (max-width: 1024px) {
.cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.cards-grid {
grid-template-columns: 1fr;
}
}
.card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
padding: 40px 24px;
text-align: center;
color: white;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.card {
transition: none;
}
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
@media (prefers-reduced-motion: reduce) {
.card:hover {
transform: none;
}
}
/* Sunny Card */
.card.sunny {
background: linear-gradient(135deg, #FFD89B 0%, #19547B 100%);
}
/* Rainy Card */
.card.rainy {
background: linear-gradient(135deg, #89A3D4 0%, #445E7F 100%);
}
/* Snowy Card */
.card.snowy {
background: linear-gradient(135deg, #E0E4E8 0%, #7A8B9F 100%);
}
/* Stormy Card */
.card.stormy {
background: linear-gradient(135deg, #2C3E50 0%, #3D5A6C 100%);
}
.icon-container {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
position: relative;
}
.city-name {
font-size: 22px;
font-weight: 600;
margin-bottom: 8px;
}
.temperature {
font-size: 36px;
font-weight: 700;
margin-bottom: 8px;
}
.description {
font-size: 14px;
opacity: 0.9;
}
/* SUN ICON */
.sun {
position: relative;
width: 60px;
height: 60px;
}
.sun-circle {
position: absolute;
width: 40px;
height: 40px;
background: #FFD700;
border-radius: 50%;
top: 10px;
left: 10px;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}
.sun-rays {
position: absolute;
width: 60px;
height: 60px;
top: 0;
left: 0;
animation: rotate-sun 20s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.sun-rays {
animation: none;
}
}
.sun-ray {
position: absolute;
width: 4px;
height: 15px;
background: #FFD700;
left: 28px;
top: 0;
border-radius: 2px;
transform-origin: center 30px;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}
.sun-ray:nth-child(1) { transform: rotate(0deg); }
.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); }
@keyframes rotate-sun {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* RAIN ICON */
.rain {
position: relative;
width: 60px;
height: 60px;
}
.rain-cloud {
position: absolute;
width: 50px;
height: 28px;
background: white;
border-radius: 20px;
top: 10px;
left: 5px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.rain-drop {
position: absolute;
width: 3px;
height: 12px;
background: #4DA6FF;
border-radius: 2px;
left: 12px;
top: 45px;
}
.rain-drop:nth-child(2) {
left: 28px;
animation: fall 1.2s infinite 0.2s;
}
.rain-drop:nth-child(3) {
left: 44px;
animation: fall 1.2s infinite 0.4s;
}
.rain-drop:nth-child(1) {
animation: fall 1.2s infinite 0s;
}
@keyframes fall {
0% {
opacity: 1;
transform: translateY(-20px);
}
90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
@media (prefers-reduced-motion: reduce) {
.rain-drop {
animation: none;
opacity: 0.5;
}
}
/* SNOW ICON */
.snow {
position: relative;
width: 60px;
height: 60px;
}
.snow-cloud {
position: absolute;
width: 50px;
height: 28px;
background: #E0E4E8;
border-radius: 20px;
top: 10px;
left: 5px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.snowflake {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
left: 12px;
top: 45px;
}
.snowflake::before,
.snowflake::after {
content: '';
position: absolute;
background: white;
border-radius: 50%;
}
.snowflake::before {
width: 2px;
height: 2px;
left: -4px;
top: 0;
}
.snowflake::after {
width: 2px;
height: 2px;
right: -4px;
top: 0;
}
.snowflake:nth-child(2) {
left: 28px;
animation: drift 2s infinite 0.3s;
}
.snowflake:nth-child(3) {
left: 44px;
animation: drift 2s infinite 0.6s;
}
.snowflake:nth-child(1) {
animation: drift 2s infinite 0s;
}
@keyframes drift {
0% {
opacity: 1;
transform: translateY(-20px) translateX(0);
}
50% {
transform: translateY(5px) translateX(5px);
}
100% {
opacity: 0;
transform: translateY(25px) translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.snowflake {
animation: none;
opacity: 0.5;
}
}
/* STORM ICON */
.storm {
position: relative;
width: 60px;
height: 60px;
}
.storm-cloud {
position: absolute;
width: 50px;
height: 28px;
background: #4A5F7F;
border-radius: 20px;
top: 10px;
left: 5px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
.lightning {
position: absolute;
width: 4px;
height: 30px;
background: linear-gradient(to bottom, #FFFF00, #FFA500);
clip-path: polygon(40% 0%, 60% 0%, 50% 40%, 70% 40%, 30% 100%, 45% 60%, 35% 60%);
left: 18px;
top: 40px;
animation: flash 1.5s infinite;
filter: drop-shadow(0 0 8px #FFFF00);
}
.lightning:nth-child(2) {
left: 38px;
animation: flash 1.5s infinite 0.5s;
clip-path: polygon(30% 0%, 50% 0%, 40% 40%, 60% 40%, 20% 100%, 35% 60%, 25% 60%);
}
@keyframes flash {
0%, 10%, 15%, 100% {
opacity: 0;
}
5%, 12% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.lightning {
animation: none;
opacity: 0.3;
}
}
</style>
</head>
<body>
<div class="container">
<div class="cards-grid">
<!-- Sunny Card -->
<div class="card sunny">
<div class="icon-container">
<div class="sun">
<div class="sun-circle"></div>
<div class="sun-rays">
<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>
</div>
</div>
<div class="city-name">Miami</div>
<div class="temperature">28°C</div>
<div class="description">Sunny & Clear</div>
</div>
<!-- Rainy Card -->
<div class="card rainy">
<div class="icon-container">
<div class="rain">
<div class="rain-cloud"></div>
<div class="rain-drop"></div>
<div class="rain-drop"></div>
<div class="rain-drop"></div>
</div>
</div>
<div class="city-name">Seattle</div>
<div class="temperature">15°C</div>
<div class="description">Rainy</div>
</div>
<!-- Snowy Card -->
<div class="card snowy">
<div class="icon-container">
<div class="snow">
<div class="snow-cloud"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
</div>
</div>
<div class="city-name">Toronto</div>
<div class="temperature">-5°C</div>
<div class="description">Snowy</div>
</div>
<!-- Stormy Card -->
<div class="card stormy">
<div class="icon-container">
<div class="storm">
<div class="storm-cloud"></div>
<div class="lightning"></div>
<div class="lightning"></div>
</div>
</div>
<div class="city-name">Denver</div>
<div class="temperature">12°C</div>
<div class="description">Stormy</div>
</div>
</div>
</div>
</body>
</html>