Claude Sonnet 5.5

by Anthropicreasoning defaultClean

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

How it went

Total time: 54.8 s
Cost: $0.084
Output tokens: 8,244
Spent thinking: 2,134 tokens
Speed: 156.5 tok/s
Console errors: 0

First token after: 2.2 s
First visible text after: 21.8 s
Prompt tokens: 780
Code size: 11.8 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-sonnet-5.5
Reasoning sent: model default
Max output: 128,000 tokens
Generated: Nov 12, 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 · 293 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather Cards — Pure CSS</title>
<style>
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{min-height:100%}
  body{
    min-height:100vh;
    font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
    background:radial-gradient(circle at 20% 0%,#2b3556 0%,#141a30 55%,#0b0f1f 100%);
    color:#fff;
    display:flex;flex-direction:column;align-items:center;
    padding:clamp(24px,5vw,56px) clamp(16px,3vw,40px);
    overflow-x:hidden;
  }
  header{text-align:center;margin-bottom:clamp(24px,4vw,44px)}
  header h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600;letter-spacing:.02em}
  header p{opacity:.65;margin-top:6px;font-size:.95rem}

  .grid{
    width:100%;max-width:1280px;
    display:grid;gap:24px;
    grid-template-columns:repeat(4,1fr);
  }
  @media (max-width:1060px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:600px){.grid{grid-template-columns:1fr;max-width:420px}}

  /* ---------- Card ---------- */
  .card{
    --ink:#fff;
    position:relative;
    border-radius:26px;
    overflow:hidden;
    color:var(--ink);
    background:var(--bg);
    box-shadow:0 14px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25);
    transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
    outline:none;
  }
  .card:hover,.card:focus-visible{
    transform:translateY(-12px);
    box-shadow:0 30px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.3);
  }
  .card:focus-visible{box-shadow:0 0 0 3px #fff,0 30px 50px rgba(0,0,0,.45)}
  .sunny{--bg:linear-gradient(160deg,#ffd35a 0%,#ff9a4d 55%,#f2686b 100%)}
  .rainy{--bg:linear-gradient(170deg,#5f7fb8 0%,#35508a 50%,#1c2c55 100%)}
  .snowy{--bg:linear-gradient(170deg,#9bb8e0 0%,#c9dcf2 55%,#eef5fc 100%);--ink:#1f3556}
  .stormy{--bg:linear-gradient(170deg,#4a3f78 0%,#2a2650 50%,#14132a 100%)}

  .scene{position:relative;height:210px;overflow:hidden}
  .info{padding:6px 24px 26px;text-align:center}
  .city{font-size:1.15rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.95}
  .temp{font-size:3.6rem;font-weight:200;line-height:1.1;margin:4px 0 2px;letter-spacing:-.02em}
  .temp sup{font-size:1.4rem;font-weight:300;vertical-align:top;position:relative;top:.55em;margin-left:2px}
  .desc{font-size:.98rem;opacity:.85}
  .meta{
    display:flex;justify-content:center;gap:18px;margin-top:16px;padding-top:14px;
    border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 25%,transparent);
    font-size:.8rem;opacity:.8;
  }

  /* ---------- Sun ---------- */
  .sun{
    position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fffbd0 0%,#ffe45c 45%,#ffc02e 100%);
    box-shadow:0 0 30px 10px rgba(255,236,120,.7),0 0 80px 30px rgba(255,200,60,.4);
    animation:pulse 3.5s ease-in-out infinite;
  }
  .rays{position:absolute;left:50%;top:50%;width:0;height:0;animation:spin 18s linear infinite}
  .rays span{
    position:absolute;left:-4px;top:-14px;width:8px;height:28px;border-radius:6px;
    background:linear-gradient(#fff6b0,#ffd23f);
    transform:rotate(calc(var(--i)*45deg)) translateY(-70px);
    box-shadow:0 0 12px rgba(255,230,100,.9);
  }
  .rays.small{animation-direction:reverse;animation-duration:30s}
  .rays.small span{
    width:5px;height:16px;left:-2.5px;top:-8px;opacity:.75;
    transform:rotate(calc(var(--i)*45deg + 22.5deg)) translateY(-58px);
  }

  /* ---------- Cloud ---------- */
  .cloud{
    --c:#e9eef7;--c2:#c3cde0;
    position:absolute;left:50%;top:62px;width:116px;height:42px;margin-left:-58px;
    border-radius:42px;background:linear-gradient(var(--c),var(--c2));
    animation:float 6s ease-in-out infinite;z-index:2;
    filter:drop-shadow(0 8px 10px rgba(0,0,0,.25));
  }
  .cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:var(--c)}
  .cloud::before{width:52px;height:52px;top:-26px;left:15px}
  .cloud::after{width:68px;height:68px;top:-36px;left:48px}
  .rainy .cloud{--c:#a9b6cf;--c2:#7f8fae}
  .snowy .cloud{--c:#ffffff;--c2:#dfe9f6}
  .stormy .cloud{--c:#6b6890;--c2:#46436c;animation-duration:5s}
  .stormy .cloud.back{
    --c:#55527a;--c2:#3a3860;top:50px;margin-left:-100px;transform:scale(.7);animation:float 7s ease-in-out -2s infinite;z-index:1;
  }

  /* ---------- Rain ---------- */
  .drop{
    position:absolute;top:96px;left:calc(var(--x)*1%);
    width:3px;height:16px;border-radius:3px;
    background:linear-gradient(rgba(255,255,255,0),#bfe2ff);
    opacity:0;
    animation:rain var(--du,1s) linear calc(var(--dl)*1s) infinite;
    z-index:1;
  }
  .stormy .drop{--du:.7s;background:linear-gradient(rgba(255,255,255,0),#c9c4ff)}

  /* ---------- Snow ---------- */
  .flake{
    position:absolute;top:92px;left:calc(var(--x)*1%);
    width:var(--s,8px);height:var(--s,8px);border-radius:50%;
    background:#fff;box-shadow:0 0 6px 2px rgba(255,255,255,.9),0 0 0 1px rgba(120,160,210,.35);
    opacity:0;
    animation:snow var(--du,5s) linear calc(var(--dl)*1s) infinite;
    z-index:1;
  }

  /* ---------- Lightning ---------- */
  .bolt{
    position:absolute;left:50%;top:92px;width:40px;height:84px;margin-left:-18px;z-index:1;
    background:linear-gradient(#fffbe0,#ffe14d 55%,#ffb400);
    clip-path:polygon(60% 0,8% 56%,42% 56%,24% 100%,96% 38%,58% 38%,86% 0);
    filter:drop-shadow(0 0 10px #ffe14d);
    opacity:0;
    animation:flash 4s linear infinite;
  }
  .stormy .scene::after{
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    background:radial-gradient(circle at 50% 55%,rgba(255,255,230,.65),rgba(190,180,255,.2) 60%,transparent 80%);
    opacity:0;animation:flash 4s linear infinite;
  }

  /* ---------- Keyframes ---------- */
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes pulse{
    0%,100%{transform:scale(1);box-shadow:0 0 30px 10px rgba(255,236,120,.7),0 0 80px 30px rgba(255,200,60,.4)}
    50%{transform:scale(1.06);box-shadow:0 0 40px 16px rgba(255,236,120,.85),0 0 100px 40px rgba(255,200,60,.5)}
  }
  @keyframes float{
    0%,100%{transform:translateX(-8px)}
    50%{transform:translateX(8px)}
  }
  .stormy .cloud.back{animation-name:floatBack}
  @keyframes floatBack{
    0%,100%{transform:scale(.7) translateX(10px)}
    50%{transform:scale(.7) translateX(-10px)}
  }
  @keyframes rain{
    0%{transform:translateY(0) rotate(12deg);opacity:0}
    12%{opacity:.9}
    85%{opacity:.8}
    100%{transform:translateY(118px) rotate(12deg);opacity:0}
  }
  @keyframes snow{
    0%{transform:translate(0,0);opacity:0}
    10%{opacity:1}
    25%{transform:translate(10px,28px)}
    50%{transform:translate(-8px,58px)}
    75%{transform:translate(10px,88px)}
    90%{opacity:.9}
    100%{transform:translate(-4px,118px);opacity:0}
  }
  @keyframes flash{
    0%,58%,70%,100%{opacity:0}
    60%{opacity:1}
    62%{opacity:.15}
    64%{opacity:1}
    67%{opacity:.35}
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important;transition:none !important}
    .drop{opacity:.8;top:calc(108px + var(--dl)*-14px);transform:rotate(12deg)}
    .flake{opacity:1;top:calc(110px + var(--dl)*-9px)}
    .bolt{opacity:1}
    .card:hover,.card:focus-visible{transform:none}
  }
</style>
</head>
<body>

<header>
  <h1>Today's Weather</h1>
  <p>Four cities, four skies — built with pure HTML &amp; CSS</p>
</header>

<main class="grid">

  <!-- SUNNY -->
  <article class="card sunny" tabindex="0">
    <div class="scene" aria-hidden="true">
      <div class="rays">
        <span style="--i:0"></span><span style="--i:1"></span><span style="--i:2"></span><span style="--i:3"></span>
        <span style="--i:4"></span><span style="--i:5"></span><span style="--i:6"></span><span style="--i:7"></span>
      </div>
      <div class="rays small">
        <span style="--i:0"></span><span style="--i:1"></span><span style="--i:2"></span><span style="--i:3"></span>
        <span style="--i:4"></span><span style="--i:5"></span><span style="--i:6"></span><span style="--i:7"></span>
      </div>
      <div class="sun"></div>
    </div>
    <div class="info">
      <h2 class="city">Barcelona</h2>
      <div class="temp">31<sup>°C</sup></div>
      <p class="desc">Clear and sunny</p>
      <div class="meta"><span>UV 8</span><span>Wind 9 km/h</span><span>Hum 38%</span></div>
    </div>
  </article>

  <!-- RAINY -->
  <article class="card rainy" tabindex="0">
    <div class="scene" aria-hidden="true">
      <div class="cloud"></div>
      <span class="drop" style="--x:30;--dl:-0.1;--du:1s"></span>
      <span class="drop" style="--x:36;--dl:-0.7;--du:.9s"></span>
      <span class="drop" style="--x:42;--dl:-0.4;--du:1.1s"></span>
      <span class="drop" style="--x:48;--dl:-0.9;--du:1s"></span>
      <span class="drop" style="--x:54;--dl:-0.2;--du:.95s"></span>
      <span class="drop" style="--x:60;--dl:-0.6;--du:1.05s"></span>
      <span class="drop" style="--x:66;--dl:-0.35;--du:.9s"></span>
      <span class="drop" style="--x:39;--dl:-1.2;--du:1.2s"></span>
      <span class="drop" style="--x:51;--dl:-1.5;--du:1.1s"></span>
      <span class="drop" style="--x:63;--dl:-1.8;--du:1s"></span>
      <span class="drop" style="--x:33;--dl:-2.1;--du:1.15s"></span>
      <span class="drop" style="--x:57;--dl:-2.5;--du:1s"></span>
    </div>
    <div class="info">
      <h2 class="city">London</h2>
      <div class="temp">12<sup>°C</sup></div>
      <p class="desc">Steady rain showers</p>
      <div class="meta"><span>Rain 80%</span><span>Wind 18 km/h</span><span>Hum 87%</span></div>
    </div>
  </article>

  <!-- SNOWY -->
  <article class="card snowy" tabindex="0">
    <div class="scene" aria-hidden="true">
      <div class="cloud"></div>
      <span class="flake" style="--x:30;--dl:-0.2;--du:5s;--s:8px"></span>
      <span class="flake" style="--x:38;--dl:-1.4;--du:6s;--s:6px"></span>
      <span class="flake" style="--x:45;--dl:-3.1;--du:5.5s;--s:10px"></span>
      <span class="flake" style="--x:52;--dl:-0.8;--du:4.8s;--s:7px"></span>
      <span class="flake" style="--x:59;--dl:-2.4;--du:6.2s;--s:9px"></span>
      <span class="flake" style="--x:66;--dl:-4.0;--du:5.2s;--s:6px"></span>
      <span class="flake" style="--x:34;--dl:-3.8;--du:5.8s;--s:7px"></span>
      <span class="flake" style="--x:48;--dl:-4.6;--du:6.4s;--s:5px"></span>
      <span class="flake" style="--x:62;--dl:-1.9;--du:5.4s;--s:8px"></span>
      <span class="flake" style="--x:70;--dl:-2.9;--du:6s;--s:5px"></span>
    </div>
    <div class="info">
      <h2 class="city">Oslo</h2>
      <div class="temp">-4<sup>°C</sup></div>
      <p class="desc">Light snowfall</p>
      <div class="meta"><span>Snow 60%</span><span>Wind 7 km/h</span><span>Hum 79%</span></div>
    </div>
  </article>

  <!-- STORMY -->
  <article class="card stormy" tabindex="0">
    <div class="scene" aria-hidden="true">
      <div class="cloud back"></div>
      <div class="cloud"></div>
      <span class="bolt"></span>
      <span class="drop" style="--x:28;--dl:-0.1"></span>
      <span class="drop" style="--x:35;--dl:-0.5"></span>
      <span class="drop" style="--x:43;--dl:-0.3"></span>
      <span class="drop" style="--x:56;--dl:-0.6"></span>
      <span class="drop" style="--x:63;--dl:-0.2"></span>
      <span class="drop" style="--x:70;--dl:-0.45"></span>
      <span class="drop" style="--x:31;--dl:-1.0"></span>
      <span class="drop" style="--x:60;--dl:-1.3"></span>
      <span class="drop" style="--x:67;--dl:-1.6"></span>
      <span class="drop" style="--x:24;--dl:-1.9"></span>
    </div>
    <div class="info">
      <h2 class="city">Miami</h2>
      <div class="temp">24<sup>°C</sup></div>
      <p class="desc">Thunderstorms</p>
      <div class="meta"><span>Storm 90%</span><span>Wind 42 km/h</span><span>Hum 92%</span></div>
    </div>
  </article>

</main>

</body>
</html>

Reasoning trace (2,134 tokens)

I'm working out a single HTML file that uses only CSS, with no script. The layout will be a four-column grid above 1000px, two columns at mid widths, and one on mobile, so at 1280x800 each card is roughly 280px wide and 420px tall. Each card has a 180px icon area that is positioned relatively and clips overflow, followed by the info section, and I'm starting on the sunny card's circle with a gradient and glow.

Still writing styles...

Next I'm sketching the snowy icon, with small white circles that drift and sway, possibly with a glow. Then the stormy card: a dark cloud, a clip-path lightning bolt that flashes, and an overlay flash on the scene. Last, the text content with the city, a large temperature, the description, and small humidity and wind details. For reduced motion I'll drop the animations and keep the drops static at their top positions.

Still working out the drops for reduced motion: I'll position each one statically using a custom property for its horizontal offset, so they sit at spread-out heights without any animation.

Still working out the drops for reduced motion: I'll set each one's delay negative so they're already spread across the scene on first paint, and for the static fallback I'll place them at fixed heights between roughly 70 and 130px.

Now I'm defining the keyframes for the rain drops, fading each one in and out as it falls, with a slight tilt. Next up is the snowflakes, which fall from around 80px with a gentle sway. Last, the lightning bolt: a yellow clip-path shape at the center, flashing on and off in a few quick bursts.

Still writing the card backgrounds and palette...

Still writing the cloud shapes and the sun...