Claude Haiku 5.5

by AnthropicReasoningClean

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 24.5 s
Cost: $0.0032
Output tokens: 6,165
Spent thinking: 1,111 tokens
Speed: 276.4 tok/s
Console errors: 0

First token after: 2.2 s
First visible text after: 7.4 s
Prompt tokens: 780
Code size: 10.5 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.5
Reasoning sent: {"effort":"low"}
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 · 358 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Cards – Pure HTML & CSS</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    min-height: 100vh;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    background: #0f1420;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
  }

  main { width: 100%; max-width: 1200px; }

  h1 {
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: .5px;
  }
  .subtitle {
    text-align: center;
    color: #9aa6bf;
    margin-bottom: 36px;
    font-size: .95rem;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  @media (max-width: 1000px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .grid { grid-template-columns: 1fr; }
    body { padding: 32px 16px; }
  }

  /* ---------- Card ---------- */
  .card {
    position: relative;
    border-radius: 22px;
    padding: 28px 22px 26px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    transition: transform .35s ease, box-shadow .35s ease;
    cursor: default;
    isolation: isolate;
  }
  .card:hover {
    transform: translateY(-12px);
    box-shadow: 0 22px 44px rgba(0,0,0,.5);
  }

  .sunny  { background: linear-gradient(160deg, #ffb347 0%, #ffcc33 45%, #ff8c42 100%); color: #3b2300; }
  .rainy  { background: linear-gradient(160deg, #4b6cb7 0%, #3a4f8a 55%, #182848 100%); }
  .snowy  { background: linear-gradient(160deg, #e0f7ff 0%, #a9d8f0 50%, #6fa8dc 100%); color: #12305a; }
  .stormy { background: linear-gradient(160deg, #3d3f4f 0%, #22232e 55%, #0b0c12 100%); }

  /* ---------- Icon stage ---------- */
  .icon {
    position: relative;
    width: 150px;
    height: 130px;
    margin: 0 auto 14px;
  }

  .city {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .3px;
  }
  .temp {
    font-size: 2.6rem;
    font-weight: 300;
    margin: 4px 0 6px;
    line-height: 1;
  }
  .temp sup { font-size: .9rem; vertical-align: top; position: relative; top: .4em; margin-left: 2px; }
  .desc {
    font-size: .95rem;
    opacity: .85;
    font-style: italic;
  }

  /* ---------- SUNNY ---------- */
  .sun-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 64px; height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff7c2, #ffd23f 60%, #ffa200);
    box-shadow: 0 0 22px 6px rgba(255,220,80,.7);
    animation: pulse 3s ease-in-out infinite;
  }
  .rays {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    animation: spin 14s linear infinite;
  }
  .ray {
    position: absolute;
    left: -5px; top: -5px;
    width: 10px; height: 26px;
    border-radius: 6px;
    background: linear-gradient(#fff6a0, #ffb300);
    transform: rotate(var(--r)) translateY(-56px);
    transform-origin: 50% 50%;
  }
  .sunny .sun-glow {
    position: absolute;
    left: 50%; top: 50%;
    width: 150px; height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,200,.55), transparent 70%);
    animation: pulse 3s ease-in-out infinite reverse;
  }

  /* ---------- Cloud (shared) ---------- */
  .cloud {
    position: absolute;
    background: #f1f5fb;
    border-radius: 40px;
    box-shadow: inset 0 -6px 0 rgba(0,0,0,.06);
  }
  .cloud::before,
  .cloud::after {
    content: "";
    position: absolute;
    background: inherit;
    border-radius: 50%;
  }
  .cloud::before { width: 50px; height: 50px; left: 16px; top: -24px; }
  .cloud::after  { width: 64px; height: 64px; left: 48px; top: -34px; }

  .cloud-main {
    left: 24px; top: 58px;
    width: 102px; height: 30px;
  }
  .cloud-dark {
    background: #5b6170;
    box-shadow: inset 0 -6px 0 rgba(0,0,0,.2);
  }
  .cloud-dark-back {
    background: #3a3e4c;
    left: 46px; top: 36px;
    width: 96px; height: 28px;
    transform: scale(.9);
  }

  /* ---------- RAINY ---------- */
  .drop {
    position: absolute;
    top: 96px;
    left: var(--x);
    width: 4px; height: 16px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(#bfe3ff, #5fb6ff);
    opacity: 0;
    animation: rain 1s linear infinite;
    animation-delay: var(--d);
  }

  /* ---------- SNOWY ---------- */
  .flake {
    position: absolute;
    top: 92px;
    left: var(--x);
    width: var(--s, 7px); height: var(--s, 7px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,.9);
    opacity: 0;
    --sway: 10px;
    animation: snowfall 3.2s linear infinite, drift 1.6s ease-in-out infinite alternate;
    animation-delay: var(--d), var(--d);
  }
  .snowy .cloud { background: #ffffff; }
  .snowy .cloud-main { box-shadow: inset 0 -6px 0 rgba(120,160,200,.25); }

  /* ---------- STORMY ---------- */
  .bolt {
    position: absolute;
    left: 66px; top: 84px;
    width: 26px; height: 44px;
    background: linear-gradient(#fff9b0, #ffd60a);
    clip-path: polygon(55% 0, 10% 58%, 45% 58%, 30% 100%, 90% 42%, 55% 42%, 75% 0);
    filter: drop-shadow(0 0 8px rgba(255,235,80,.9));
    animation: flash 2.4s steps(1, end) infinite;
  }
  .stormy .drop { top: 98px; }
  .stormy .flash-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at 70% 70%, rgba(255,255,200,.45), transparent 60%);
    opacity: 0;
    animation: flashglow 2.4s linear infinite;
  }

  /* ---------- Keyframes ---------- */
  @keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
  }
  @keyframes rain {
    0%   { transform: translateY(-20px); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translateY(72px); opacity: 0; }
  }
  @keyframes snowfall {
    0%   { transform: translateY(-10px); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translateY(42px); opacity: 0; }
  }
  @keyframes drift {
    from { margin-left: calc(var(--sway) * -1); }
    to   { margin-left: var(--sway); }
  }
  @keyframes flash {
    0%, 60%, 100% { opacity: 0; }
    62%           { opacity: 1; }
    66%           { opacity: .15; }
    70%           { opacity: 1; }
    76%           { opacity: 0; }
  }
  @keyframes flashglow {
    0%, 60%, 100% { opacity: 0; }
    62%, 70%      { opacity: 1; }
    66%           { opacity: .2; }
    76%           { opacity: 0; }
  }
  @keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
  }
  .cloud-group { position: absolute; inset: 0; animation: bob 4s ease-in-out infinite; }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
    }
    .drop, .flake { opacity: .6; }
    .card:hover { transform: translateY(-4px); }
  }
</style>
</head>
<body>
<main>
  <h1>Weather Now</h1>
  <p class="subtitle">Hover a card to lift it &middot; animations are pure CSS</p>

  <div class="grid">

    <!-- SUNNY -->
    <article class="card sunny">
      <div class="icon">
        <div class="sun-glow"></div>
        <div class="rays">
          <span class="ray" style="--r:0deg"></span>
          <span class="ray" style="--r:45deg"></span>
          <span class="ray" style="--r:90deg"></span>
          <span class="ray" style="--r:135deg"></span>
          <span class="ray" style="--r:180deg"></span>
          <span class="ray" style="--r:225deg"></span>
          <span class="ray" style="--r:270deg"></span>
          <span class="ray" style="--r:315deg"></span>
        </div>
        <div class="sun-core"></div>
      </div>
      <h2 class="city">Phoenix</h2>
      <div class="temp">34<sup>°C</sup></div>
      <p class="desc">Clear skies and blazing sun</p>
    </article>

    <!-- RAINY -->
    <article class="card rainy">
      <div class="icon">
        <div class="cloud-group">
          <div class="cloud cloud-main"></div>
        </div>
        <span class="drop" style="--x:40px; --d:0s"></span>
        <span class="drop" style="--x:58px; --d:.35s"></span>
        <span class="drop" style="--x:76px; --d:.7s"></span>
        <span class="drop" style="--x:94px; --d:.2s"></span>
        <span class="drop" style="--x:112px; --d:.55s"></span>
        <span class="drop" style="--x:30px; --d:.9s"></span>
        <span class="drop" style="--x:122px; --d:.15s"></span>
      </div>
      <h2 class="city">London</h2>
      <div class="temp">12<sup>°C</sup></div>
      <p class="desc">Steady rain, bring an umbrella</p>
    </article>

    <!-- SNOWY -->
    <article class="card snowy">
      <div class="icon">
        <div class="cloud-group">
          <div class="cloud cloud-main"></div>
        </div>
        <span class="flake" style="--x:30px;  --d:0s;    --sway:8px;  --s:7px"></span>
        <span class="flake" style="--x:52px;  --d:.8s;   --sway:-10px; --s:9px"></span>
        <span class="flake" style="--x:72px;  --d:.4s;   --sway:12px; --s:6px"></span>
        <span class="flake" style="--x:92px;  --d:1.2s;  --sway:-8px; --s:8px"></span>
        <span class="flake" style="--x:112px; --d:.6s;   --sway:10px; --s:7px"></span>
        <span class="flake" style="--x:132px; --d:1.6s;  --sway:-12px; --s:5px"></span>
        <span class="flake" style="--x:42px;  --d:2s;    --sway:9px;  --s:6px"></span>
        <span class="flake" style="--x:102px; --d:2.4s;  --sway:-9px; --s:8px"></span>
      </div>
      <h2 class="city">Reykjavik</h2>
      <div class="temp">-3<sup>°C</sup></div>
      <p class="desc">Gentle snowfall, drifting flakes</p>
    </article>

    <!-- STORMY -->
    <article class="card stormy">
      <div class="icon">
        <div class="flash-glow"></div>
        <div class="cloud-group">
          <div class="cloud cloud-dark cloud-dark-back"></div>
          <div class="cloud cloud-dark cloud-main"></div>
        </div>
        <div class="bolt"></div>
        <span class="drop" style="--x:34px; --d:.1s"></span>
        <span class="drop" style="--x:52px; --d:.6s"></span>
        <span class="drop" style="--x:98px; --d:.3s"></span>
        <span class="drop" style="--x:116px; --d:.8s"></span>
      </div>
      <h2 class="city">Mumbai</h2>
      <div class="temp">28<sup>°C</sup></div>
      <p class="desc">Thunderstorms with heavy downpour</p>
    </article>

  </div>
</main>
</body>
</html>

Reasoning trace (1,111 tokens)

I'm setting up a single HTML file with pure CSS icons and no JavaScript, keeping it compact. The plan is a dark body with a grid of four cards, each with a 120px icon container, a city, a temperature, and a description. For the sunny card, I'm building a sun core with a radial gradient, plus rotating rays from a repeating conic gradient and a glow.

Next I'm working out the rainy, snowy, and stormy icons, mostly with divs and spans animated falling, drifting, or flashing. I'm keeping the HTML lean by positioning the drops with custom properties, and I'm sketching the cloud shape and the reduced-motion fallback.

Still writing the CSS for the sun, the rays, and the snow flakes...

Still writing the CSS for the sun, the rays, and the snow flakes...