Muse Ember

by MetaReasoningClean

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

How it went

Total time: 12.2 s
Cost: $0.0035
Output tokens: 6,819
Spent thinking: 1,364 tokens
Speed: 682.2 tok/s
Console errors: 0

First token after: 2.2 s
First visible text after: 4.4 s
Prompt tokens: 518
Code size: 15.9 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"low"}
Max output: 943,718 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 · 288 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 &amp; CSS</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  :root{--ink:#182233;--muted:rgba(255,255,255,.82)}
  body{
    font-family:ui-sans-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:
      radial-gradient(900px 500px at 15% -10%, #ffe9a8 0%, transparent 55%),
      radial-gradient(900px 600px at 95% 10%, #c7e7ff 0%, transparent 50%),
      linear-gradient(180deg,#f3f7fb 0%,#e8eef5 100%);
    color:var(--ink);
    min-height:100vh;
    padding:38px 22px 30px;
  }
  .wrap{max-width:1240px;margin:0 auto}
  header{text-align:center;margin-bottom:30px}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:11px;letter-spacing:.22em;font-weight:800;text-transform:uppercase;color:#5b6b82;
    background:#fff;border:1px solid #dde6ef;padding:8px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(20,40,70,.06)
  }
  .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#ffbf2e;box-shadow:0 0 0 4px rgba(255,191,46,.18);animation:pulseDot 2s ease-in-out infinite}
  h1{font-size:clamp(32px,4.5vw,52px);line-height:1.05;letter-spacing:-.03em;margin:16px 0 10px;font-weight:900}
  h1 span{color:#3d7edb}
  .sub{color:#5f708a;font-size:15px;line-height:1.6;max-width:620px;margin:0 auto}
  .sub b{color:#24344e}

  .grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    margin-top:8px;
  }
  .card{
    position:relative;
    border-radius:28px;
    padding:22px 20px 20px;
    color:#fff;
    overflow:hidden;
    min-height:430px;
    display:flex;flex-direction:column;
    box-shadow:0 18px 36px rgba(20,35,60,.18), inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
    isolation:isolate;
  }
  .card::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(160deg,rgba(255,255,255,.28) 0%,transparent 42%,rgba(0,0,0,.08) 100%);
  }
  .card:hover{transform:translateY(-14px) scale(1.015);box-shadow:0 32px 54px rgba(20,35,60,.26), inset 0 1px 0 rgba(255,255,255,.4)}
  .card:hover .icon{transform:scale(1.07) translateY(-2px)}
  .card:hover .temp{transform:translateY(-2px)}
  .sunny{background:linear-gradient(165deg,#ff9a3d 0%,#ffc93c 38%,#ff7e3d 100%)}
  .rainy{background:linear-gradient(165deg,#3a6ea8 0%,#4e94c7 45%,#2f5f8f 100%)}
  .snowy{background:linear-gradient(165deg,#7fb2e5 0%,#a8d0f0 45%,#6ea8d8 100%)}
  .stormy{background:linear-gradient(165deg,#2d2f4a 0%,#4a4a6e 50%,#23253a 100%)}

  .top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
  .label{
    font-size:11px;letter-spacing:.18em;font-weight:900;text-transform:uppercase;
    background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);
    padding:7px 11px;border-radius:999px;backdrop-filter:blur(4px)
  }
  .badge{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:13px;font-weight:900}

  /* ICON STAGE */
  .icon{
    position:relative;z-index:1;height:168px;margin:14px 0 6px;
    display:flex;align-items:center;justify-content:center;
    transition:transform .5s cubic-bezier(.22,1,.36,1);
  }

  /* ===== SUN ===== */
  .sun-wrap{position:relative;width:110px;height:110px;animation:bob 4s ease-in-out infinite}
  .sun-core{
    position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#fff3a6,#ffd93d 55%,#ffb703);
    box-shadow:0 0 0 10px rgba(255,217,61,.28),0 0 34px 12px rgba(255,180,0,.55);
    animation:corePulse 3s ease-in-out infinite;
  }
  .rays{position:absolute;inset:0;animation:spin 18s linear infinite}
  .ray{position:absolute;left:50%;top:50%;width:6px;height:18px;margin:-9px 0 0 -3px;border-radius:999px;background:#ffe873;box-shadow:0 0 8px rgba(255,220,80,.9);transform:rotate(var(--r)) translateY(-42px)}
  .r1{--r:0deg}.r2{--r:45deg}.r3{--r:90deg}.r4{--r:135deg}.r5{--r:180deg}.r6{--r:225deg}.r7{--r:270deg}.r8{--r:315deg}
  .sun-glow{position:absolute;left:50%;top:50%;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 68%);animation:glowPulse 3s ease-in-out infinite}

  /* ===== CLOUDS (shared) ===== */
  .cloud{position:absolute;left:50%;top:22px;width:104px;height:34px;margin-left:-52px;border-radius:999px;background:#fff;box-shadow:0 10px 22px rgba(0,0,0,.14);animation:cloudDrift 5s ease-in-out infinite}
  .cloud::before{content:"";position:absolute;left:14px;top:-24px;width:48px;height:48px;border-radius:50%;background:inherit}
  .cloud::after{content:"";position:absolute;right:13px;top:-17px;width:36px;height:36px;border-radius:50%;background:inherit}
  .rain-cloud{background:linear-gradient(180deg,#ffffff,#dcecf7)}
  .snow-cloud{background:linear-gradient(180deg,#ffffff,#eef6ff)}
  .storm-cloud{background:linear-gradient(180deg,#5a5e7d,#363952);animation:cloudDrift 5s ease-in-out infinite, stormShake 4s ease-in-out infinite}
  .storm-cloud::before{background:#4c4f6b}.storm-cloud::after{background:#4c4f6b}

  /* ===== RAIN ===== */
  .rain{position:absolute;left:50%;top:62px;width:84px;height:74px;margin-left:-42px}
  .drop{position:absolute;top:0;width:4px;height:15px;border-radius:999px;background:#aee8ff;box-shadow:0 0 6px rgba(160,220,255,.8);animation:rainFall .95s linear infinite;opacity:0}
  .drop::after{content:"";position:absolute;left:50%;bottom:-5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:rgba(174,232,255,.8)}
  .d1{left:8px;animation-delay:0s}.d2{left:24px;animation-delay:.22s}.d3{left:40px;animation-delay:.48s}.d4{left:56px;animation-delay:.12s}.d5{left:72px;animation-delay:.36s}

  /* ===== SNOW ===== */
  .snow{position:absolute;left:50%;top:60px;width:88px;height:80px;margin-left:-44px}
  .flake{position:absolute;top:0;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.95);animation:snowFall 2.8s ease-in-out infinite;opacity:0}
  .flake::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(255,255,255,.55)}
  .f1{left:6px;width:7px;height:7px;animation-delay:0s}.f2{left:22px;width:5px;height:5px;animation-delay:.7s}
  .f3{left:40px;width:8px;height:8px;animation-delay:1.3s}.f4{left:58px;width:5px;height:5px;animation-delay:.4s}
  .f5{left:74px;width:6px;height:6px;animation-delay:1.8s}.f6{left:32px;width:4px;height:4px;animation-delay:2.15s}

  /* ===== STORM ===== */
  .bolt{
    position:absolute;left:50%;top:58px;width:30px;height:56px;margin-left:-15px;
    background:linear-gradient(180deg,#fff8a0,#ffe93d 55%,#ffb703);
    clip-path:polygon(58% 0%,100% 0%,62% 46%,88% 46%,28% 100%,40% 58%,12% 58%);
    filter:drop-shadow(0 0 10px rgba(255,220,60,.95));
    animation:boltFlash 2.6s ease-in-out infinite;
    transform-origin:top center;
  }
  .storm-rain{position:absolute;left:50%;top:66px;width:86px;height:54px;margin-left:-43px}
  .sdrop{position:absolute;top:0;width:3px;height:11px;border-radius:999px;background:#9fb8e8;animation:rainFall 1.1s linear infinite;opacity:0}
  .sd1{left:6px;animation-delay:.2s}.sd2{left:28px;animation-delay:.65s}.sd3{left:56px;animation-delay:.45s}.sd4{left:76px;animation-delay:.9s}
  .flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(255,240,150,.55),transparent 62%);animation:flashBg 2.6s ease-in-out infinite;pointer-events:none}

  /* ===== TEXT ===== */
  .city{position:relative;z-index:1;font-size:22px;font-weight:900;letter-spacing:-.02em}
  .state{position:relative;z-index:1;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
  .temp{position:relative;z-index:1;font-size:58px;line-height:1;font-weight:900;letter-spacing:-.04em;margin:14px 0 6px;transition:transform .4s ease}
  .temp sup{font-size:22px;vertical-align:super;letter-spacing:0}
  .desc{position:relative;z-index:1;font-size:14px;line-height:1.55;color:var(--muted);min-height:44px}
  .stats{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
  .stat{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:10px 11px}
  .stat b{display:block;font-size:16px}
  .stat span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--muted)}
  .bar{height:5px;border-radius:999px;background:rgba(255,255,255,.25);margin-top:8px;overflow:hidden}
  .bar i{display:block;height:100%;border-radius:999px;background:#fff;animation:barGrow 2.4s ease-out both}
  .b1{width:82%}.b2{width:58%}.b3{width:74%}.b4{width:92%}

  footer{
    margin-top:26px;text-align:center;color:#72849c;font-size:13px;line-height:1.6
  }
  footer b{color:#3a4d69}
  .pills{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
  .pill{background:#fff;border:1px solid #dde6ef;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;color:#50637d;box-shadow:0 3px 10px rgba(20,40,70,.05)}

  /* KEYFRAMES */
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes corePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
  @keyframes glowPulse{0%,100%{opacity:.6;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
  @keyframes cloudDrift{0%,100%{transform:translateX(-4px)}50%{transform:translateX(5px)}}
  @keyframes rainFall{0%{transform:translateY(-4px) translateX(0);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(58px) translateX(-5px);opacity:0}}
  @keyframes snowFall{0%{transform:translate(0,-4px) scale(.7);opacity:0}18%{opacity:1}55%{transform:translate(7px,34px) scale(1)}100%{transform:translate(-6px,68px) scale(.85);opacity:0}}
  @keyframes boltFlash{0%,100%{opacity:.25;transform:scale(.92)}8%{opacity:1;transform:scale(1.04)}14%{opacity:.3}20%{opacity:1}32%{opacity:.55}44%{opacity:1}58%{opacity:.35}72%{opacity:.9}}
  @keyframes flashBg{0%,100%{opacity:0}10%{opacity:1}18%{opacity:.1}26%{opacity:.85}38%{opacity:0}52%{opacity:.6}64%{opacity:0}}
  @keyframes stormShake{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px)}}
  @keyframes barGrow{from{width:0}}
  @keyframes pulseDot{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

  /* RESPONSIVE */
  @media (max-width:1024px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .card{min-height:410px}
  }
  @media (max-width:600px){
    body{padding:28px 16px 24px}
    .grid{grid-template-columns:1fr;gap:18px}
    .card{min-height:0}
    .icon{height:150px}
    .temp{font-size:52px}
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation:none !important;transition:none !important}
    .drop,.flake,.sdrop,.bolt{opacity:1 !important}
    .card:hover{transform:none}
  }
</style>
</head>
<body>
  <div class="wrap">
    <header>
      <div class="eyebrow">Pure HTML &amp; CSS &bull; Zero JavaScript</div>
      <h1>Today&rsquo;s Weather,<br><span>beautifully animated.</span></h1>
      <p class="sub">Four conditions crafted <b>entirely from HTML elements and CSS pseudo-elements</b> &mdash; no images, no SVG, no icon fonts. Hover a card to lift it.</p>
    </header>

    <main class="grid">

      <!-- SUNNY -->
      <article class="card sunny">
        <div class="top"><span class="label">Sunny</span><span class="badge">01</span></div>
        <div class="icon" role="img" aria-label="Rotating sun">
          <div class="sun-wrap">
            <div class="sun-glow"></div>
            <div class="rays">
              <span class="ray r1"></span><span class="ray r2"></span><span class="ray r3"></span><span class="ray r4"></span>
              <span class="ray r5"></span><span class="ray r6"></span><span class="ray r7"></span><span class="ray r8"></span>
            </div>
            <div class="sun-core"></div>
          </div>
        </div>
        <h2 class="city">Phoenix</h2>
        <p class="state">Arizona &bull; USA</p>
        <p class="temp">32<sup>&deg;C</sup></p>
        <p class="desc">Clear skies with bright, warm sunshine all day long.</p>
        <div class="stats">
          <div class="stat"><span>Humidity</span><b>28%</b><div class="bar"><i class="b1"></i></div></div>
          <div class="stat"><span>UV Index</span><b>9 &bull; High</b><div class="bar"><i class="b2"></i></div></div>
        </div>
      </article>

      <!-- RAINY -->
      <article class="card rainy">
        <div class="top"><span class="label">Rainy</span><span class="badge">02</span></div>
        <div class="icon" role="img" aria-label="Cloud with falling rain">
          <div class="cloud rain-cloud"></div>
          <div class="rain">
            <span class="drop d1"></span><span class="drop d2"></span><span class="drop d3"></span><span class="drop d4"></span><span class="drop d5"></span>
          </div>
        </div>
        <h2 class="city">Seattle</h2>
        <p class="state">Washington &bull; USA</p>
        <p class="temp">14<sup>&deg;C</sup></p>
        <p class="desc">Steady rain showers and a cool, misty breeze.</p>
        <div class="stats">
          <div class="stat"><span>Humidity</span><b>91%</b><div class="bar"><i class="b4"></i></div></div>
          <div class="stat"><span>Wind</span><b>18 km/h</b><div class="bar"><i class="b3"></i></div></div>
        </div>
      </article>

      <!-- SNOWY -->
      <article class="card snowy">
        <div class="top"><span class="label">Snowy</span><span class="badge">03</span></div>
        <div class="icon" role="img" aria-label="Cloud with drifting snowflakes">
          <div class="cloud snow-cloud"></div>
          <div class="snow">
            <span class="flake f1"></span><span class="flake f2"></span><span class="flake f3"></span>
            <span class="flake f4"></span><span class="flake f5"></span><span class="flake f6"></span>
          </div>
        </div>
        <h2 class="city">Aspen</h2>
        <p class="state">Colorado &bull; USA</p>
        <p class="temp">-6<sup>&deg;C</sup></p>
        <p class="desc">Light snow drifting over a quiet winter wonderland.</p>
        <div class="stats">
          <div class="stat"><span>Snowfall</span><b>4 cm</b><div class="bar"><i class="b3"></i></div></div>
          <div class="stat"><span>Humidity</span><b>74%</b><div class="bar"><i class="b1"></i></div></div>
        </div>
      </article>

      <!-- STORMY -->
      <article class="card stormy">
        <div class="top"><span class="label">Stormy</span><span class="badge">04</span></div>
        <div class="icon" role="img" aria-label="Storm cloud with flashing lightning">
          <div class="flash"></div>
          <div class="cloud storm-cloud"></div>
          <div class="bolt"></div>
          <div class="storm-rain">
            <span class="sdrop sd1"></span><span class="sdrop sd2"></span><span class="sdrop sd3"></span><span class="sdrop sd4"></span>
          </div>
        </div>
        <h2 class="city">Miami</h2>
        <p class="state">Florida &bull; USA</p>
        <p class="temp">27<sup>&deg;C</sup></p>
        <p class="desc">Thunderstorms with frequent lightning and heavy downpours.</p>
        <div class="stats">
          <div class="stat"><span>Humidity</span><b>88%</b><div class="bar"><i class="b4"></i></div></div>
          <div class="stat"><span>Gusts</span><b>42 km/h</b><div class="bar"><i class="b2"></i></div></div>
        </div>
      </article>

    </main>

    <footer>
      <b>Built with HTML &amp; CSS only</b> &mdash; every sun ray, raindrop, snowflake and lightning bolt is a styled element.
      <div class="pills">
        <span class="pill">@keyframes animations</span>
        <span class="pill">Pseudo-elements</span>
        <span class="pill">Responsive grid</span>
        <span class="pill">prefers-reduced-motion</span>
      </div>
    </footer>
  </div>
</body>
</html>

Reasoning trace (1,364 tokens)

Implementing responsive CSS-only animated weather cards with pseudo-element icons and reduced-motion support.Extending the layout with per-card gradients and responsive grid breakpoints.