Claude Haiku 5.5

by AnthropicReasoningClean

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

How it went

Total time: 18.1 s
Cost: $0.0027
Output tokens: 5,326
Spent thinking: 0 tokens
Speed: 304 tok/s
Console errors: 0

First token after: 611 ms
First visible text after: 611 ms
Prompt tokens: 779
Code size: 11.1 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.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 · 403 lines

Download

<!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>
  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    color: #fff;
  }

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

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

  .card {
    position: relative;
    border-radius: 24px;
    padding: 28px 22px;
    min-height: 320px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 40px rgba(0,0,0,0.45);
  }

  .card.sunny  { background: linear-gradient(160deg, #ffd452 0%, #ff9a3c 60%, #ff7b54 100%); color: #3b2300; }
  .card.rainy  { background: linear-gradient(160deg, #5b7fa6 0%, #3a5673 60%, #223648 100%); }
  .card.snowy  { background: linear-gradient(160deg, #e6f3ff 0%, #b9d7ee 60%, #8fb5d6 100%); color: #1d3850; }
  .card.stormy { background: linear-gradient(160deg, #3c3f58 0%, #22243a 60%, #10111f 100%); }

  .icon {
    position: relative;
    width: 130px;
    height: 130px;
    margin-bottom: 18px;
  }

  /* ---------- SUNNY ---------- */
  .sun-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 60px; height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff7c2, #ffd23f 70%);
    box-shadow: 0 0 25px rgba(255,220,80,0.9);
    animation: pulse 3s ease-in-out infinite;
  }
  .sun-rays {
    position: absolute;
    inset: 0;
    animation: spin 14s linear infinite;
  }
  .sun-rays::before,
  .sun-rays::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 120px; height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    background:
      conic-gradient(from 0deg,
        transparent 0deg 8deg, #ffe066 8deg 14deg, transparent 14deg 45deg,
        transparent 45deg 53deg, #ffe066 53deg 59deg, transparent 59deg 90deg,
        transparent 90deg 98deg, #ffe066 98deg 104deg, transparent 104deg 135deg,
        transparent 135deg 143deg, #ffe066 143deg 149deg, transparent 149deg 180deg,
        transparent 180deg 188deg, #ffe066 188deg 194deg, transparent 194deg 225deg,
        transparent 225deg 233deg, #ffe066 233deg 239deg, transparent 239deg 270deg,
        transparent 270deg 278deg, #ffe066 278deg 284deg, transparent 284deg 315deg,
        transparent 315deg 323deg, #ffe066 323deg 329deg, transparent 329deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 36%, #000 38%, #000 70%, transparent 72%);
            mask: radial-gradient(circle, transparent 36%, #000 38%, #000 70%, transparent 72%);
  }
  .sun-rays::after {
    width: 90px; height: 90px; margin: -45px 0 0 -45px;
    transform: rotate(22deg);
    opacity: 0.6;
  }

  /* ---------- RAINY ---------- */
  .cloud {
    position: absolute;
    left: 50%; top: 18px;
    width: 92px; height: 34px;
    margin-left: -46px;
    background: #cfd8e3;
    border-radius: 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 2;
  }
  .cloud::before {
    content: "";
    position: absolute;
    width: 46px; height: 46px;
    left: 14px; top: -22px;
    background: #cfd8e3;
    border-radius: 50%;
  }
  .cloud::after {
    content: "";
    position: absolute;
    width: 58px; height: 58px;
    left: 40px; top: -32px;
    background: #cfd8e3;
    border-radius: 50%;
  }
  .drops {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .drop {
    position: absolute;
    top: 60px;
    width: 4px; height: 20px;
    border-radius: 4px;
    background: linear-gradient(#bfe3ff, #5fa8e8);
    animation: fall 1s linear infinite;
  }
  .drop:nth-child(1) { left: 26px; animation-delay: 0s; }
  .drop:nth-child(2) { left: 46px; animation-delay: 0.35s; }
  .drop:nth-child(3) { left: 66px; animation-delay: 0.7s; }
  .drop:nth-child(4) { left: 86px; animation-delay: 0.2s; }
  .drop:nth-child(5) { left: 36px; animation-delay: 0.6s; }
  .drop:nth-child(6) { left: 76px; animation-delay: 0.9s; }

  /* ---------- SNOWY ---------- */
  .snowflakes { position: absolute; inset: 0; }
  .flake {
    position: absolute;
    top: 10px;
    width: 14px; height: 14px;
    color: #4a8bc2;
    font-size: 0;
    animation: drift 5s ease-in-out infinite;
  }
  .flake::before,
  .flake::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 2px; height: 14px;
    margin-left: -1px; margin-top: -7px;
    background: #4a8bc2;
    border-radius: 2px;
  }
  .flake::after { transform: rotate(60deg); }
  .flake.f2::before, .flake.f2::after { transform: none; }
  .flake.f2::before { transform: rotate(-60deg); }
  .flake.f2::after  { transform: rotate(60deg); }
  .flake:nth-child(1) { left: 20px; animation-delay: 0s; }
  .flake:nth-child(2) { left: 60px; animation-delay: 1.2s; }
  .flake:nth-child(3) { left: 100px; animation-delay: 2.4s; }
  .flake:nth-child(4) { left: 40px; animation-delay: 3.4s; }
  .flake:nth-child(5) { left: 84px; animation-delay: 0.6s; }
  .flake:nth-child(6) { left: 12px; animation-delay: 1.8s; }

  .snow-cloud {
    position: absolute;
    left: 50%; top: 4px;
    width: 96px; height: 36px;
    margin-left: -48px;
    background: #ffffff;
    border-radius: 40px;
    box-shadow: 0 4px 10px rgba(80,120,160,0.25);
    z-index: 2;
  }
  .snow-cloud::before {
    content: "";
    position: absolute;
    width: 48px; height: 48px;
    left: 14px; top: -22px;
    background: #ffffff;
    border-radius: 50%;
  }
  .snow-cloud::after {
    content: "";
    position: absolute;
    width: 60px; height: 60px;
    left: 42px; top: -30px;
    background: #ffffff;
    border-radius: 50%;
  }

  /* ---------- STORMY ---------- */
  .storm-cloud {
    position: absolute;
    left: 50%; top: 14px;
    width: 110px; height: 38px;
    margin-left: -55px;
    background: #4a4d6b;
    border-radius: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 2;
  }
  .storm-cloud::before {
    content: "";
    position: absolute;
    width: 52px; height: 52px;
    left: 18px; top: -24px;
    background: #4a4d6b;
    border-radius: 50%;
  }
  .storm-cloud::after {
    content: "";
    position: absolute;
    width: 66px; height: 66px;
    left: 48px; top: -34px;
    background: #4a4d6b;
    border-radius: 50%;
  }
  .bolt {
    position: absolute;
    left: 56px; top: 62px;
    width: 0; height: 0;
    z-index: 1;
    animation: flash 2.4s steps(1, end) infinite;
  }
  .bolt::before {
    content: "";
    position: absolute;
    left: -14px; top: 0;
    width: 28px; height: 60px;
    background: #ffe84d;
    clip-path: polygon(55% 0, 100% 0, 60% 42%, 95% 42%, 25% 100%, 40% 55%, 5% 55%);
    filter: drop-shadow(0 0 8px rgba(255,235,90,0.9));
  }
  .storm-rain {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .storm-rain .drop {
    top: 60px;
    background: linear-gradient(#9fb4ff, #5a6fd6);
    animation-duration: 0.7s;
  }
  .storm-rain .drop:nth-child(1) { left: 18px; }
  .storm-rain .drop:nth-child(2) { left: 96px; }
  .storm-rain .drop:nth-child(3) { left: 34px; }
  .storm-rain .drop:nth-child(4) { left: 102px; }

  /* ---------- TEXT ---------- */
  .city {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .temp {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 4px 0;
  }
  .desc {
    font-size: 0.95rem;
    opacity: 0.85;
    font-weight: 500;
  }

  /* ---------- KEYFRAMES ---------- */
  @keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
  }
  @keyframes fall {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(78px); opacity: 0; }
  }
  @keyframes drift {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    15%  { opacity: 1; }
    50%  { transform: translate(-8px, 50px) rotate(120deg); }
    100% { transform: translate(6px, 110px) rotate(240deg); opacity: 0; }
  }
  @keyframes flash {
    0%, 60%, 100% { opacity: 0; }
    62%           { opacity: 1; }
    66%           { opacity: 0.2; }
    70%           { opacity: 1; }
    76%           { opacity: 0; }
  }
  @keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
  }

  /* ---------- REDUCED MOTION ---------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
    }
    .drop, .flake { opacity: 0.6; }
    .bolt { opacity: 1; }
  }
</style>
</head>
<body>
  <main class="grid">

    <!-- SUNNY -->
    <article class="card sunny">
      <div class="icon">
        <div class="sun-rays"></div>
        <div class="sun-core"></div>
      </div>
      <h2 class="city">Phoenix</h2>
      <div class="temp">34°</div>
      <p class="desc">Clear skies and bright sunshine</p>
    </article>

    <!-- RAINY -->
    <article class="card rainy">
      <div class="icon">
        <div class="cloud"></div>
        <div class="drops">
          <span class="drop"></span>
          <span class="drop"></span>
          <span class="drop"></span>
          <span class="drop"></span>
          <span class="drop"></span>
          <span class="drop"></span>
        </div>
      </div>
      <h2 class="city">Seattle</h2>
      <div class="temp">12°</div>
      <p class="desc">Steady rain with light winds</p>
    </article>

    <!-- SNOWY -->
    <article class="card snowy">
      <div class="icon">
        <div class="snow-cloud"></div>
        <div class="snowflakes">
          <span class="flake"></span>
          <span class="flake f2"></span>
          <span class="flake"></span>
          <span class="flake f2"></span>
          <span class="flake"></span>
          <span class="flake f2"></span>
        </div>
      </div>
      <h2 class="city">Helsinki</h2>
      <div class="temp">-6°</div>
      <p class="desc">Gentle snowfall covering the streets</p>
    </article>

    <!-- STORMY -->
    <article class="card stormy">
      <div class="icon">
        <div class="storm-cloud"></div>
        <div class="bolt"></div>
        <div class="storm-rain">
          <span class="drop"></span>
          <span class="drop"></span>
          <span class="drop"></span>
          <span class="drop"></span>
        </div>
      </div>
      <h2 class="city">Chicago</h2>
      <div class="temp">18°</div>
      <p class="desc">Thunderstorms with heavy gusts</p>
    </article>

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