Claude Haiku 5.5

by AnthropicReasoningClean

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

How it went

Total time: 38.6 s
Cost: $0.0047
Output tokens: 9,164
Spent thinking: 3,742 tokens
Speed: 249.9 tok/s
Console errors: 0

First token after: 1.9 s
First visible text after: 21.6 s
Prompt tokens: 780
Code size: 11.1 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.5
Reasoning sent: {"effort":"medium"}
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 · 424 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 (CSS Only)</title>
<style>
  *, *::before, *::after { box-sizing: border-box; }

  :root {
    --radius: 22px;
  }

  body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(circle at top, #1b2236 0%, #0b0e18 70%);
    color: #e9eefc;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 20px 64px;
    overflow-x: hidden;
  }

  header {
    text-align: center;
    margin-bottom: 40px;
    max-width: 720px;
  }

  header h1 {
    margin: 0 0 10px;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    letter-spacing: 0.02em;
  }

  header p {
    margin: 0;
    color: #9aa6c7;
    font-size: 1rem;
    line-height: 1.5;
  }

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

  @media (min-width: 640px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 1080px) {
    .grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  }

  /* ---------- Card base ---------- */
  .card {
    position: relative;
    min-width: 0;
    border-radius: var(--radius);
    padding: 26px 20px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 360px;
    color: var(--ink, #fff);
    background: var(--bg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease;
    overflow: hidden;
    isolation: isolate;
  }

  /* subtle shine sweep */
  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
    transform: translateX(-100%);
    z-index: 2;
    pointer-events: none;
    animation: shine 6s ease-in-out infinite;
  }

  .card:hover {
    transform: translateY(-12px);
    box-shadow: 0 24px 45px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.35);
  }

  .card .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    opacity: 0.75;
    margin-bottom: 6px;
  }

  .card h2 {
    margin: 6px 0 0;
    font-size: 1.45rem;
    font-weight: 700;
  }

  .card .temp {
    font-size: 3.4rem;
    font-weight: 300;
    line-height: 1.1;
    margin: 4px 0 6px;
    font-variant-numeric: tabular-nums;
  }

  .card .temp span {
    font-size: 1.4rem;
    vertical-align: top;
    margin-left: 2px;
    opacity: 0.8;
  }

  .card .desc {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.45;
    opacity: 0.9;
    max-width: 230px;
  }

  /* ---------- Icon container ---------- */
  .icon {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    overflow: hidden;
  }

  /* ---------- Cloud (shared by rainy, snowy, stormy) ---------- */
  .cloud {
    position: absolute;
    left: 25px;
    top: 40px;
    width: 90px;
    height: 34px;
    border-radius: 30px;
    background: var(--cloud, #e9eef4);
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.06);
  }
  .cloud::before,
  .cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
  }
  .cloud::before { width: 44px; height: 44px; left: 14px; top: -20px; }
  .cloud::after  { width: 56px; height: 56px; left: 38px; top: -30px; }

  .cloud.drift { animation: drift 5s ease-in-out infinite; }

  /* ================= SUNNY ================= */
  .sunny {
    --bg: linear-gradient(150deg, #ffe38a 0%, #ffb74d 50%, #ff8f3a 100%);
    --ink: #3d2400;
  }
  .sunny .sun-core {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffbe0, #ffd93b 60%, #ffb300);
    box-shadow: 0 0 28px 6px rgba(255, 240, 150, 0.85);
    animation: pulse 3s ease-in-out infinite;
  }
  .sunny .sun-rays {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, #fff3a0 0deg 12deg, transparent 12deg 30deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 36px, #000 38px 68px, transparent 70px);
            mask: radial-gradient(circle closest-side, transparent 0 36px, #000 38px 68px, transparent 70px);
    filter: drop-shadow(0 0 6px rgba(255,255,200,0.7));
    animation: spin 14s linear infinite;
  }

  /* ================= RAINY ================= */
  .rainy {
    --bg: linear-gradient(160deg, #4a90d9 0%, #2c5fa8 55%, #1b3a6b 100%);
    --ink: #f4f8ff;
    --cloud: #dfe8f3;
  }
  .rainy .drop,
  .stormy .drop {
    position: absolute;
    top: 82px;
    width: 4px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(#e3f4ff, #5fb4ff);
    opacity: 0;
    animation: fall 1.1s linear infinite;
  }
  .rainy .drop:nth-child(1) { left: 32px; animation-delay: 0s; }
  .rainy .drop:nth-child(2) { left: 52px; animation-delay: 0.35s; }
  .rainy .drop:nth-child(3) { left: 72px; animation-delay: 0.7s; }
  .rainy .drop:nth-child(4) { left: 92px; animation-delay: 0.2s; }
  .rainy .drop:nth-child(5) { left: 112px; animation-delay: 0.9s; }

  /* ================= SNOWY ================= */
  .snowy {
    --bg: linear-gradient(160deg, #d6ecff 0%, #b5d9f5 50%, #8fb8e0 100%);
    --ink: #14314f;
    --cloud: #f4f9ff;
  }
  .snowy .flake {
    position: absolute;
    top: 80px;
    width: 12px;
    height: 12px;
    opacity: 0;
    animation: snow 4.2s linear infinite;
  }
  .snowy .flake::before,
  .snowy .flake::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    width: 2px;
    height: 12px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 4px rgba(255,255,255,0.9);
  }
  .snowy .flake::after { transform: rotate(60deg); }
  .snowy .flake:nth-child(1) { left: 28px; animation-delay: 0s; }
  .snowy .flake:nth-child(2) { left: 50px; animation-delay: 1s; }
  .snowy .flake:nth-child(3) { left: 74px; animation-delay: 2s; }
  .snowy .flake:nth-child(4) { left: 98px; animation-delay: 0.5s; }
  .snowy .flake:nth-child(5) { left: 112px; animation-delay: 2.6s; }
  .snowy .flake:nth-child(6) { left: 40px; animation-delay: 3.2s; }

  /* ================= STORMY ================= */
  .stormy {
    --bg: linear-gradient(160deg, #3b3f5c 0%, #1f1d3a 55%, #0c0a1d 100%);
    --ink: #f1edff;
    --cloud: #4f5770;
  }
  .stormy .drop {
    top: 84px;
    height: 14px;
    background: linear-gradient(#c8d6ff, #6f7fe0);
    transform: rotate(14deg);
    animation-duration: 0.8s;
  }
  .stormy .drop:nth-child(1) { left: 40px; animation-delay: 0.1s; }
  .stormy .drop:nth-child(2) { left: 66px; animation-delay: 0.5s; }
  .stormy .drop:nth-child(3) { left: 96px; animation-delay: 0.3s; }
  .stormy .drop:nth-child(4) { left: 118px; animation-delay: 0.7s; }

  .stormy .bolt {
    position: absolute;
    left: 62px;
    top: 80px;
    width: 30px;
    height: 52px;
    background: linear-gradient(#fffbd0, #ffd60a);
    clip-path: polygon(58% 0, 8% 58%, 44% 58%, 28% 100%, 94% 38%, 56% 38%, 78% 0);
    filter: drop-shadow(0 0 8px rgba(255, 235, 100, 0.95));
    opacity: 0;
    animation: flash 2.6s steps(1, end) 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 drift {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
  }

  @keyframes fall {
    0%   { transform: translateY(0); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translateY(58px); opacity: 0; }
  }

  @keyframes snow {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translate(8px, 30px) rotate(180deg); }
    90%  { opacity: 1; }
    100% { transform: translate(-4px, 60px) rotate(360deg); opacity: 0; }
  }

  @keyframes flash {
    0%, 100% { opacity: 0; }
    2%, 6%   { opacity: 1; }
    4%       { opacity: 0.15; }
    10%      { opacity: 0; }
    54%      { opacity: 0; }
    56%, 60% { opacity: 1; }
    58%      { opacity: 0.2; }
    64%      { opacity: 0; }
  }

  @keyframes shine {
    0%, 60% { transform: translateX(-100%); }
    100%    { transform: translateX(100%); }
  }

  footer {
    margin-top: 40px;
    font-size: 0.85rem;
    color: #6d7796;
    text-align: center;
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
    }
    .card:hover { transform: translateY(-4px); }
    .card::after { display: none; }
    .rainy .drop, .stormy .drop, .snowy .flake { opacity: 0.6; }
    .stormy .bolt { opacity: 1; }
    .snowy .flake { opacity: 0.8; }
  }
</style>
</head>
<body>

  <header>
    <h1>Four Skies, Pure CSS</h1>
    <p>Animated weather cards built only from HTML and CSS. Hover a card to lift it.</p>
  </header>

  <main class="grid">

    <!-- SUNNY -->
    <article class="card sunny">
      <div class="icon">
        <div class="sun-rays"></div>
        <div class="sun-core"></div>
      </div>
      <span class="label">Today</span>
      <h2>Lisbon</h2>
      <div class="temp">24<span>°C</span></div>
      <p class="desc">Clear skies and bright, warm sunshine all day.</p>
    </article>

    <!-- RAINY -->
    <article class="card rainy">
      <div class="icon">
        <div class="cloud"></div>
        <span class="drop"></span>
        <span class="drop"></span>
        <span class="drop"></span>
        <span class="drop"></span>
        <span class="drop"></span>
      </div>
      <span class="label">Today</span>
      <h2>Seattle</h2>
      <div class="temp">11<span>°C</span></div>
      <p class="desc">Steady rain rolling in from the coast through the afternoon.</p>
    </article>

    <!-- SNOWY -->
    <article class="card snowy">
      <div class="icon">
        <div class="cloud drift"></div>
        <span class="flake"></span>
        <span class="flake"></span>
        <span class="flake"></span>
        <span class="flake"></span>
        <span class="flake"></span>
        <span class="flake"></span>
      </div>
      <span class="label">Today</span>
      <h2>Oslo</h2>
      <div class="temp">-4<span>°C</span></div>
      <p class="desc">Soft snowfall drifting down over quiet, frosted streets.</p>
    </article>

    <!-- STORMY -->
    <article class="card stormy">
      <div class="icon">
        <div class="cloud"></div>
        <span class="drop"></span>
        <span class="drop"></span>
        <span class="drop"></span>
        <span class="drop"></span>
        <span class="bolt"></span>
      </div>
      <span class="label">Today</span>
      <h2>Chicago</h2>
      <div class="temp">18<span>°C</span></div>
      <p class="desc">Thunderstorms with gusty winds and flashes of lightning.</p>
    </article>

  </main>

  <footer>Pure HTML &amp; CSS · no scripts, no images</footer>

</body>
</html>

Reasoning trace (3,742 tokens)

I'm putting together a single HTML page with four cards and CSS-only icons, no JavaScript. I'm aiming for a dark-ish soft background with system-ui fonts, and for the grid I'm settling on a fixed four-column layout on desktop inside a container about 1200px wide.

Still writing the weather icons' CSS...

Still working through the card contents and the hover and motion details.

Still working on the sun icon's CSS: a core circle with a radial gradient and a pulsing glow, plus a rays layer built from a repeating conic gradient masked to a ring.

Still writing the rain and sun ring styles...

Still writing the cloud's CSS: a rounded body with two pseudo-element bumps that inherit its background.

Still writing the snow flakes' CSS: small white dots that drift down with a slight sideways wiggle and a rotation.

Still writing the snow flake's CSS: a rotating two-line asterisk, and a light-blue cloud for the snowy card.

Still writing the storm icon: a dark cloud with a yellow lightning bolt cut out using a clip-path polygon, flickering on and off with a flash animation.

Still writing the sunny card's colors: I'm settling on dark text there, since the light gradient would wash out white.

Still writing the card styles: a dark-blue rain gradient, a pale snowy one with dark ink, and a stormy gradient, all with padding, rounded corners, and a flex column layout.

Still working on the overflow and sizing for the icons, making sure the rain drops and snowflakes stay clipped inside the card.

Now I'm fixing the coordinates for the icon: a 140px box, with the cloud at left 25 and top 40, and its two bumps sized 44px and 56px. The drops start at top 80 and fall past the bottom, so the icon's overflow clipping will trim them.

Still writing the icon's sizing and masks: the sun's rays get a ring mask, and the storm cloud and bolt are being positioned.

Still writing the snowflake's pseudo-element lines, centered and rotated 60 degrees apart, with the flake container carrying the spin.