Muse Ember

by MetaReasoningClean

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

How it went

Total time: 15.0 s
Cost: $0.0043
Output tokens: 8,476
Spent thinking: 3,195 tokens
Speed: 644.6 tok/s
Console errors: 0

First token after: 1.9 s
First visible text after: 8.7 s
Prompt tokens: 518
Code size: 14.9 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"high"}
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 · 293 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 — Pure CSS</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
    background:
      radial-gradient(900px 500px at 15% -10%,rgba(255,193,7,.14),transparent 60%),
      radial-gradient(800px 500px at 95% 0%,rgba(56,189,248,.16),transparent 60%),
      radial-gradient(700px 600px at 50% 110%,rgba(99,102,241,.18),transparent 60%),
      #0f172a;
    color:#fff;
    min-height:100vh;
    padding:38px 22px 28px;
  }
  .wrap{max-width:1240px;margin:0 auto}

  header{max-width:780px;margin:0 auto 30px;text-align:center}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:11px;letter-spacing:.22em;font-weight:800;color:#bae6fd;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
    padding:8px 14px;border-radius:999px;margin-bottom:16px;
  }
  .eyebrow i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 5px rgba(74,222,128,.18);animation:pulseDot 2s ease-in-out infinite}
  h1{font-size:clamp(34px,5vw,52px);line-height:.95;letter-spacing:-.04em;font-weight:900}
  h1 span{background:linear-gradient(90deg,#fde68a,#fca5a5,#93c5fd,#6ee7b7);-webkit-background-clip:text;background-clip:text;color:transparent}
  header p{margin-top:14px;color:#cbd5e1;font-size:16px;line-height:1.55}
  header p b{color:#fff}

  .grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    align-items:stretch;
  }

  .card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:20px 20px 18px;
    min-height:392px;
    display:flex;flex-direction:column;
    box-shadow:0 18px 40px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1);
    isolation:isolate;
  }
  .card::before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.16);top:-90px;right:-70px;z-index:0}
  .card::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(0,0,0,.08);bottom:-70px;left:-50px;z-index:0}
  .card:hover,.card:focus-within{transform:translateY(-12px) scale(1.015);box-shadow:0 30px 60px rgba(0,0,0,.42),0 8px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.4)}
  .card > *{position:relative;z-index:1}

  .card-sunny{background:linear-gradient(160deg,#ff8a00 0%,#ffb703 48%,#ffd60a 100%)}
  .card-rainy{background:linear-gradient(160deg,#1d4e89 0%,#2a6cb6 52%,#5aa9e6 100%)}
  .card-snowy{background:linear-gradient(160deg,#3a7bd5 0%,#6db3f2 55%,#a8d8ff 100%)}
  .card-stormy{background:linear-gradient(160deg,#232946 0%,#3a3a6e 52%,#5c5c8a 100%)}

  .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .city{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1}
  .country{margin-top:5px;font-size:12.5px;opacity:.88;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
  .tag{flex-shrink:0;font-size:10.5px;font-weight:800;letter-spacing:.14em;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.28);padding:6px 9px;border-radius:999px;backdrop-filter:blur(6px)}

  .icon{
    height:142px;margin:8px auto 4px;width:150px;position:relative;flex-shrink:0;
    transition:transform .45s cubic-bezier(.22,1,.36,1);
  }
  .card:hover .icon{transform:scale(1.07) rotate(-1.5deg)}

  /* ---------- SUNNY ---------- */
  .icon-sun{display:flex;align-items:center;justify-content:center}
  .sun-rays{position:absolute;inset:8px;animation:spin 16s linear infinite}
  .sun-rays span{
    position:absolute;left:50%;top:50%;width:7px;height:22px;margin:-11px 0 0 -3.5px;
    background:linear-gradient(180deg,#fff7ae,#ffd60a);border-radius:99px;
    box-shadow:0 0 10px rgba(255,240,138,.9);
    transform:rotate(var(--r)) translateY(-48px);
  }
  .sun-rays span:nth-child(1){--r:0deg}.sun-rays span:nth-child(2){--r:45deg}.sun-rays span:nth-child(3){--r:90deg}.sun-rays span:nth-child(4){--r:135deg}
  .sun-rays span:nth-child(5){--r:180deg}.sun-rays span:nth-child(6){--r:225deg}.sun-rays span:nth-child(7){--r:270deg}.sun-rays span:nth-child(8){--r:315deg}
  .sun-core{
    position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:50%;
    background:radial-gradient(circle at 35% 32%,#fff9c4,#ffd60a 58%,#ffb703);
    box-shadow:0 0 0 10px rgba(255,255,255,.18),0 0 36px 10px rgba(255,214,10,.65),inset -6px -8px 14px rgba(255,140,0,.35);
    animation:sunPulse 3s ease-in-out infinite;
  }
  .sun-ground{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:88px;height:14px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.18),transparent 70%)}

  /* ---------- CLOUD BASE ---------- */
  .cloud{
    --c1:#ffffff;--c2:#e6f3ff;
    position:absolute;left:50%;top:26px;width:112px;height:38px;border-radius:999px;
    background:linear-gradient(180deg,var(--c1),var(--c2));
    box-shadow:0 10px 22px rgba(0,0,0,.18),inset 0 -6px 10px rgba(0,0,0,.06);
    transform:translateX(-50%);
    animation:cloudFloat 3.6s ease-in-out infinite;
    z-index:2;
  }
  .cloud::before{content:"";position:absolute;width:54px;height:54px;border-radius:50%;background:var(--c1);top:-26px;left:18px}
  .cloud::after{content:"";position:absolute;width:40px;height:40px;border-radius:50%;background:var(--c1);top:-18px;right:16px}
  .cloud-grey{--c1:#dcebf7;--c2:#9fc0dd}
  .cloud-dark{--c1:#8a9ab5;--c2:#475569;animation:stormCloud 2.6s ease-in-out infinite}

  /* ---------- RAIN ---------- */
  .drops,.flakes{position:absolute;left:50%;top:68px;width:96px;height:56px;transform:translateX(-50%);z-index:1}
  .drops span{position:absolute;top:0;width:5px;height:17px;border-radius:99px;background:linear-gradient(180deg,#d6f0ff,#7dd3fc);box-shadow:0 0 6px rgba(125,211,252,.8);opacity:0;animation:rainFall 1.35s linear infinite}
  .drops span:nth-child(1){left:10px;animation-delay:0s}
  .drops span:nth-child(2){left:30px;height:21px;animation-delay:.28s}
  .drops span:nth-child(3){left:48px;animation-delay:.55s}
  .drops span:nth-child(4){left:66px;height:20px;animation-delay:.15s}
  .drops span:nth-child(5){left:84px;animation-delay:.72s}

  /* ---------- SNOW ---------- */
  .flakes span{position:absolute;top:0;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.95),1px 1px 0 rgba(147,197,253,.6);opacity:0;animation:snowDrift 3.2s linear infinite}
  .flakes span:nth-child(1){left:8px;width:9px;height:9px;animation-delay:0s}
  .flakes span:nth-child(2){left:26px;width:6px;height:6px;animation-delay:.6s;animation-duration:2.7s}
  .flakes span:nth-child(3){left:45px;width:11px;height:11px;animation-delay:1.1s;animation-duration:3.6s}
  .flakes span:nth-child(4){left:64px;width:7px;height:7px;animation-delay:.3s}
  .flakes span:nth-child(5){left:80px;width:8px;height:8px;animation-delay:1.5s;animation-duration:2.9s}
  .flakes span:nth-child(6){left:36px;width:5px;height:5px;animation-delay:1.9s;animation-duration:3s}

  /* ---------- STORM ---------- */
  .bolt{
    position:absolute;left:50%;top:64px;width:30px;height:52px;z-index:3;
    background:linear-gradient(180deg,#fef08a,#facc15 60%,#f59e0b);
    clip-path:polygon(56% 0,88% 0,64% 36%,90% 36%,26% 100%,40% 54%,10% 54%);
    filter:drop-shadow(0 0 10px rgba(250,204,21,.95)) drop-shadow(0 0 22px rgba(250,204,21,.5));
    transform:translateX(-50%);
    animation:boltFlash 2.4s ease-in-out infinite;
  }
  .storm-drops span{position:absolute;top:0;width:4px;height:13px;border-radius:99px;background:#93c5fd;opacity:0;animation:rainFall 1.6s linear infinite}
  .storm-drops span:nth-child(1){left:16px;animation-delay:.2s}
  .storm-drops span:nth-child(2){right:16px;animation-delay:.8s}

  .temp-row{display:flex;align-items:flex-start;gap:8px;margin-top:2px}
  .temp{font-size:62px;font-weight:900;letter-spacing:-.06em;line-height:.9}
  .temp small{font-size:32px;font-weight:800;vertical-align:top;letter-spacing:0}
  .hi-lo{margin-top:8px;font-size:13px;font-weight:700;background:rgba(0,0,0,.16);padding:6px 9px;border-radius:10px;line-height:1.2}
  .hi-lo span{opacity:.85;font-weight:600}
  .desc{margin-top:10px;font-size:15px;font-weight:600;opacity:.97;line-height:1.35}
  .desc span{display:block;font-size:13px;font-weight:500;opacity:.85;margin-top:3px}

  .stats{
    margin-top:auto;padding-top:14px;
    border-top:1px solid rgba(255,255,255,.28);
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;
  }
  .stat b{display:block;font-size:15px;letter-spacing:-.02em}
  .stat span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;font-weight:700}

  footer{text-align:center;margin-top:26px;color:#94a3b8;font-size:12.5px;letter-spacing:.08em}
  footer b{color:#e2e8f0}

  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes sunPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.09)}}
  @keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.45}}
  @keyframes cloudFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
  @keyframes rainFall{0%{transform:translateY(0);opacity:0}18%{opacity:1}72%{opacity:1}100%{transform:translateY(42px);opacity:0}}
  @keyframes snowDrift{0%{transform:translate(0,0) rotate(0deg);opacity:0}14%{opacity:1}55%{transform:translate(6px,24px) rotate(120deg);opacity:1}88%{opacity:1}100%{transform:translate(-4px,50px) rotate(240deg);opacity:0}}
  @keyframes boltFlash{0%,52%,62%,100%{opacity:.25;transform:translateX(-50%) scale(.96)}55%,58%{opacity:1;transform:translateX(-50%) scale(1.08)}60%{opacity:.4}}
  @keyframes stormCloud{0%,100%{transform:translateX(-50%) translateY(0);filter:brightness(1)}6%,10%{filter:brightness(1.55)}8%{filter:brightness(.75)}50%{transform:translateX(-50%) translateY(-3px)}}

  @media (max-width:1024px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .card{min-height:360px}
  }
  @media (max-width:640px){
    body{padding:26px 16px 20px}
    .grid{grid-template-columns:1fr}
    .card{min-height:340px}
    .temp{font-size:56px}
    .icon{height:132px}
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
    .drops span,.flakes span,.storm-drops span{opacity:.85;transform:none}
    .bolt{opacity:1}
    .card:hover,.card:focus-within{transform:none}
  }
</style>
</head>
<body>
<main class="wrap">
  <header>
    <div class="eyebrow"><i></i> LIVE &nbsp;•&nbsp; PURE CSS ANIMATION</div>
    <h1>Weather,<br><span>beautifully animated.</span></h1>
    <p>Four cities, four conditions — every icon is built with <b>HTML &amp; CSS only</b>. No images, no JavaScript, just <b>@keyframes</b> in motion.</p>
  </header>

  <section class="grid" aria-label="Weather cards">

    <!-- SUNNY -->
    <article class="card card-sunny" tabindex="0" aria-label="Sunny in Phoenix, 32 degrees">
      <div class="top">
        <div><div class="city">Phoenix</div><div class="country">Arizona, USA</div></div>
        <span class="tag">TODAY</span>
      </div>
      <div class="icon icon-sun" aria-hidden="true">
        <div class="sun-rays"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
        <div class="sun-core"></div>
        <div class="sun-ground"></div>
      </div>
      <div class="temp-row">
        <div class="temp">32<small>°</small></div>
        <div class="hi-lo">H: 34°<br><span>L: 24°</span></div>
      </div>
      <p class="desc">Sunny &amp; Clear <span>Bright sunshine all day long</span></p>
      <div class="stats">
        <div class="stat"><b>24%</b><span>Humidity</span></div>
        <div class="stat"><b>12 km/h</b><span>Wind</span></div>
        <div class="stat"><b>UV 9</b><span>Very High</span></div>
      </div>
    </article>

    <!-- RAINY -->
    <article class="card card-rainy" tabindex="0" aria-label="Rainy in London, 14 degrees">
      <div class="top">
        <div><div class="city">London</div><div class="country">United Kingdom</div></div>
        <span class="tag">TODAY</span>
      </div>
      <div class="icon" aria-hidden="true">
        <div class="cloud cloud-grey"></div>
        <div class="drops"><span></span><span></span><span></span><span></span><span></span></div>
      </div>
      <div class="temp-row">
        <div class="temp">14<small>°</small></div>
        <div class="hi-lo">H: 16°<br><span>L: 11°</span></div>
      </div>
      <p class="desc">Light Rain <span>Steady drizzle through the afternoon</span></p>
      <div class="stats">
        <div class="stat"><b>81%</b><span>Humidity</span></div>
        <div class="stat"><b>18 km/h</b><span>Wind</span></div>
        <div class="stat"><b>2</b><span>UV Low</span></div>
      </div>
    </article>

    <!-- SNOWY -->
    <article class="card card-snowy" tabindex="0" aria-label="Snowy in Reykjavik, minus 3 degrees">
      <div class="top">
        <div><div class="city">Reykjavik</div><div class="country">Iceland</div></div>
        <span class="tag">TODAY</span>
      </div>
      <div class="icon" aria-hidden="true">
        <div class="cloud"></div>
        <div class="flakes"><span></span><span></span><span></span><span></span><span></span><span></span></div>
      </div>
      <div class="temp-row">
        <div class="temp">-3<small>°</small></div>
        <div class="hi-lo">H: 0°<br><span>L: -6°</span></div>
      </div>
      <p class="desc">Snow Showers <span>Flurries drifting in arctic air</span></p>
      <div class="stats">
        <div class="stat"><b>74%</b><span>Humidity</span></div>
        <div class="stat"><b>22 km/h</b><span>Wind</span></div>
        <div class="stat"><b>1</b><span>UV Low</span></div>
      </div>
    </article>

    <!-- STORMY -->
    <article class="card card-stormy" tabindex="0" aria-label="Stormy in Singapore, 27 degrees">
      <div class="top">
        <div><div class="city">Singapore</div><div class="country">Singapore</div></div>
        <span class="tag">TODAY</span>
      </div>
      <div class="icon" aria-hidden="true">
        <div class="cloud cloud-dark"></div>
        <div class="drops storm-drops"><span></span><span></span></div>
        <div class="bolt"></div>
      </div>
      <div class="temp-row">
        <div class="temp">27<small>°</small></div>
        <div class="hi-lo">H: 29°<br><span>L: 25°</span></div>
      </div>
      <p class="desc">Thunderstorms <span>Electric skies, heavy downpours</span></p>
      <div class="stats">
        <div class="stat"><b>89%</b><span>Humidity</span></div>
        <div class="stat"><b>26 km/h</b><span>Wind</span></div>
        <div class="stat"><b>6</b><span>UV High</span></div>
      </div>
    </article>

  </section>

  <footer>BUILT WITH <b>HTML &amp; CSS ONLY</b> &nbsp;•&nbsp; @KEYFRAMES ANIMATIONS &nbsp;•&nbsp; HOVER TO LIFT &nbsp;•&nbsp; RESPECTS <b>PREFERS-REDUCED-MOTION</b></footer>
</main>
</body>
</html>

Reasoning trace (3,195 tokens)

Designing a single-file HTML CSS-only responsive grid of four animated weather cards using pseudo-elements and keyframes with reduced-motion support.Designing CSS-only weather icons with pseudo-elements, keyframes, and clip-path while choosing gradient palettes and text contrast.Defining icon markup, keyframe animations, color palettes, and responsive layout with reduced-motion support.Extending CSS with cloud variants, keyframe transforms, and responsive grid plus accessibility and decorative elements.