Muse Ember

by MetaReasoningClean

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

How it went

Total time: 7.7 s
Cost: $0.0028
Output tokens: 5,488
Spent thinking: 123 tokens
Speed: 799.7 tok/s
Console errors: 0

First token after: 809 ms
First visible text after: 809 ms
Prompt tokens: 518
Code size: 15.5 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"minimal"}
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 · 318 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 Forecast — Four Seasons</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  :root{
    --sun1:#ff9a3d; --sun2:#ffd93d;
    --rain1:#4a90d9; --rain2:#6ec6ff;
    --snow1:#89c4e8; --snow2:#e8f4fc;
    --storm1:#3a3a5e; --storm2:#6b6b8e;
  }
  html,body{height:100%}
  body{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:#0f172a;
    background: radial-gradient(1200px 700px at 20% -10%, #1e3a5f 0%, transparent 55%),
                radial-gradient(1000px 600px at 90% 110%, #312e81 0%, transparent 55%),
                linear-gradient(160deg,#0f172a 0%,#1e293b 100%);
    color:#fff;
    min-height:100vh;
    padding:38px 22px 46px;
    display:flex; flex-direction:column; align-items:center;
  }

  /* Header */
  .header{text-align:center; max-width:760px; margin-bottom:34px}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
    color:#93c5fd; background:rgba(147,197,253,.12); border:1px solid rgba(147,197,253,.25);
    padding:7px 13px; border-radius:999px; margin-bottom:16px;
  }
  .eyebrow i{width:7px;height:7px;border-radius:50%;background:#facc15;box-shadow:0 0 10px #facc15;display:inline-block;animation:pulse 2s infinite}
  h1{font-size:clamp(30px,5vw,52px); line-height:.95; letter-spacing:-.03em; font-weight:900}
  h1 span{
    background:linear-gradient(90deg,#fde68a,#fbbf24,#7dd3fc,#fff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .header p{margin-top:13px; color:#cbd5e1; font-size:15px; line-height:1.6}
  .header p b{color:#fff}

  /* Grid */
  .grid{
    width:100%; max-width:1240px;
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch;
  }

  /* Card base */
  .card{
    position:relative; overflow:hidden; border-radius:26px; padding:22px 20px 20px;
    min-height:360px; display:flex; flex-direction:column;
    box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
    border:1px solid rgba(255,255,255,.22);
    transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s;
    cursor:pointer; isolation:isolate;
  }
  .card:hover, .card:focus-within{transform:translateY(-12px) scale(1.02); box-shadow:0 30px 55px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5)}
  .card::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:radial-gradient(420px 220px at 85% -5%, rgba(255,255,255,.35), transparent 60%),
               radial-gradient(300px 200px at 0% 110%, rgba(255,255,255,.18), transparent 60%);
  }
  .card::after{
    content:""; position:absolute; width:180px;height:180px;border-radius:50%;
    right:-60px; top:-60px; background:rgba(255,255,255,.16); filter:blur(8px); z-index:-1;
  }

  .sunny{background:linear-gradient(165deg,#ff7a18 0%,#ffb347 48%,#ffd93d 100%)}
  .rainy{background:linear-gradient(165deg,#2471b8 0%,#4a90d9 55%,#6ec6ff 100%)}
  .snowy{background:linear-gradient(165deg,#5a9ec7 0%,#89c4e8 55%,#d6eefc 110%)}
  .stormy{background:linear-gradient(165deg,#23233f 0%,#3a3a5e 55%,#6b6b8e 100%)}

  .top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; z-index:2}
  .badge{
    font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    background:rgba(255,255,255,.22); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.35); padding:6px 9px; border-radius:999px;
  }
  .badge.dark{background:rgba(0,0,0,.22)}
  .live{font-size:11px; font-weight:700; opacity:.92; display:flex; align-items:center; gap:6px; padding-top:6px}
  .live::before{content:""; width:7px;height:7px;border-radius:50%;background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25)}

  /* Icon stage */
  .stage{height:150px; position:relative; margin:10px 0 6px; display:flex; align-items:center; justify-content:center}
  .stage::before{
    content:""; position:absolute; width:138px;height:138px;border-radius:50%;
    background:rgba(255,255,255,.14); border:1px dashed rgba(255,255,255,.35);
  }

  /* SUN */
  .sun{position:relative; width:76px;height:76px; z-index:1}
  .sun-rays{position:absolute; inset:-22px; animation:spin 14s linear infinite}
  .sun-rays span{
    position:absolute; left:50%; top:50%; width:5px; height:20px; margin-left:-2.5px;
    background:#fff7cc; border-radius:99px; transform-origin:50% 0;
    box-shadow:0 0 8px rgba(255,255,255,.8);
  }
  .sun-rays span:nth-child(1){transform:rotate(0deg) translateY(-52px)}
  .sun-rays span:nth-child(2){transform:rotate(30deg) translateY(-52px)}
  .sun-rays span:nth-child(3){transform:rotate(60deg) translateY(-52px)}
  .sun-rays span:nth-child(4){transform:rotate(90deg) translateY(-52px)}
  .sun-rays span:nth-child(5){transform:rotate(120deg) translateY(-52px)}
  .sun-rays span:nth-child(6){transform:rotate(150deg) translateY(-52px)}
  .sun-rays span:nth-child(7){transform:rotate(180deg) translateY(-52px)}
  .sun-rays span:nth-child(8){transform:rotate(210deg) translateY(-52px)}
  .sun-rays span:nth-child(9){transform:rotate(240deg) translateY(-52px)}
  .sun-rays span:nth-child(10){transform:rotate(270deg) translateY(-52px)}
  .sun-rays span:nth-child(11){transform:rotate(300deg) translateY(-52px)}
  .sun-rays span:nth-child(12){transform:rotate(330deg) translateY(-52px)}
  .sun-core{
    position:absolute; inset:6px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #fffbe6, #ffdf5a 45%, #ff9a1f 100%);
    box-shadow:0 0 35px rgba(255,200,40,.95), 0 10px 22px rgba(0,0,0,.18);
    animation:sunPulse 3s ease-in-out infinite;
  }
  .sun-core::after{content:""; position:absolute; width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.9); left:14px; top:12px; filter:blur(1px)}

  /* CLOUD shared */
  .cloud{position:relative; width:104px; height:42px; z-index:2; animation:floaty 3.6s ease-in-out infinite}
  .cloud::before,.cloud::after{content:""; position:absolute; background:inherit; border-radius:50%}
  /* We'll build cloud with 3 divs via pseudo + base */
  .cloud b{position:absolute; background:inherit; border-radius:50%; display:block}
  .cloud b:nth-child(1){width:52px;height:52px; left:10px; top:-26px}
  .cloud b:nth-child(2){width:38px;height:38px; left:48px; top:-16px}
  .cloud b:nth-child(3){width:30px;height:30px; left:66px; top:-6px}
  .cloud-base{position:absolute; inset:0; border-radius:99px; background:inherit; box-shadow:0 8px 18px rgba(0,0,0,.16)}

  .c-white{color:#fff; background:#fff}
  .c-white .cloud-base,.c-white b{background:#fff}
  .c-soft{color:#eaf6ff}
  .c-soft .cloud-base,.c-soft b{background:#eaf6ff}
  .c-dark{color:#2f2f4a}
  .c-dark .cloud-base,.c-dark b{background:#2f2f4a}

  /* RAIN */
  .rain-cloud{animation:floaty 3.2s ease-in-out infinite}
  .drops{position:absolute; left:50%; top:52px; transform:translateX(-50%); width:84px; height:52px; z-index:1}
  .drops span{
    position:absolute; width:4px; height:15px; border-radius:99px;
    background:#dbeafe; box-shadow:0 0 6px rgba(147,197,253,.9);
    animation:rainFall 1.1s linear infinite; opacity:0;
  }
  .drops span:nth-child(1){left:6px;  animation-delay:0s}
  .drops span:nth-child(2){left:22px; animation-delay:.28s}
  .drops span:nth-child(3){left:38px; animation-delay:.55s}
  .drops span:nth-child(4){left:54px; animation-delay:.15s}
  .drops span:nth-child(5){left:70px; animation-delay:.7s}
  .drops span:nth-child(6){left:14px; animation-delay:.9s}
  .drops span:nth-child(7){left:62px; animation-delay:.42s}

  /* SNOW */
  .snow-cloud{animation:floaty 4.2s ease-in-out infinite}
  .flakes{position:absolute; left:50%; top:50px; transform:translateX(-50%); width:88px; height:60px; z-index:1}
  .flakes span{
    position:absolute; border-radius:50%; background:#fff;
    box-shadow:0 0 8px rgba(255,255,255,.9); opacity:0;
    animation:snowFall 2.8s linear infinite, sway 2.8s ease-in-out infinite;
  }
  .flakes span:nth-child(1){width:9px;height:9px; left:6px;  animation-delay:0s}
  .flakes span:nth-child(2){width:6px;height:6px; left:20px; animation-delay:.5s}
  .flakes span:nth-child(3){width:11px;height:11px;left:36px; animation-delay:1s}
  .flakes span:nth-child(4){width:7px;height:7px; left:52px; animation-delay:.3s}
  .flakes span:nth-child(5){width:8px;height:8px; left:68px; animation-delay:1.4s}
  .flakes span:nth-child(6){width:6px;height:6px; left:28px; animation-delay:1.8s}
  .flakes span:nth-child(7){width:7px;height:7px; left:60px; animation-delay:2.1s}

  /* STORM */
  .storm-cloud{animation:floaty 3s ease-in-out infinite}
  .bolt{
    position:absolute; left:50%; top:54px; transform:translateX(-50%);
    width:26px; height:46px; z-index:3;
    background:#fde047;
    clip-path:polygon(55% 0%, 90% 0%, 60% 38%, 82% 38%, 28% 100%, 38% 52%, 14% 52%);
    filter:drop-shadow(0 0 10px rgba(253,224,71,.95));
    animation:boltFlash 2.4s linear infinite; opacity:0;
  }
  .bolt::after{content:""; position:absolute; inset:0; background:#fff; clip-path:polygon(55% 0%, 90% 0%, 60% 38%, 82% 38%, 28% 100%, 38% 52%, 14% 52%); opacity:.35}
  .flash{position:absolute; inset:0; background:rgba(255,255,180,.0); animation:screenFlash 2.4s linear infinite; pointer-events:none}
  .storm-drops{position:absolute; left:50%; top:52px; transform:translateX(-50%); width:80px; height:40px}
  .storm-drops span{position:absolute; width:3px;height:11px;border-radius:99px;background:#c7d2fe;opacity:0;animation:rainFall 1s linear infinite}
  .storm-drops span:nth-child(1){left:8px; animation-delay:.2s}
  .storm-drops span:nth-child(2){left:32px; animation-delay:.6s}
  .storm-drops span:nth-child(3){left:56px; animation-delay:.1s}

  /* Info */
  .city{font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.95}
  .temp{font-size:56px; line-height:1; font-weight:900; letter-spacing:-.04em; margin:6px 0 4px}
  .temp small{font-size:28px; font-weight:800; vertical-align:top; opacity:.9}
  .desc{font-size:14px; line-height:1.45; opacity:.96; max-width:240px}
  .meta{margin-top:auto; padding-top:16px; display:flex; gap:8px; flex-wrap:wrap}
  .meta span{
    font-size:11px; font-weight:700; background:rgba(255,255,255,.20);
    border:1px solid rgba(255,255,255,.28); padding:6px 8px; border-radius:999px;
    backdrop-filter:blur(4px);
  }
  .hint{margin-top:14px; font-size:12px; color:#94a3b8; text-align:center}
  .hint b{color:#e2e8f0}

  /* Keyframes */
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @keyframes rainFall{
    0%{transform:translateY(0) rotate(12deg); opacity:0}
    15%{opacity:1}
    80%{opacity:1}
    100%{transform:translateY(44px) rotate(12deg); opacity:0}
  }
  @keyframes snowFall{
    0%{transform:translateY(0); opacity:0}
    15%{opacity:1}
    85%{opacity:1}
    100%{transform:translateY(52px); opacity:0}
  }
  @keyframes sway{0%,100%{margin-left:0}50%{margin-left:9px}}
  @keyframes boltFlash{
    0%,55%,100%{opacity:0; transform:translateX(-50%) scale(.9)}
    58%{opacity:1; transform:translateX(-50%) scale(1.08)}
    62%{opacity:.2}
    66%{opacity:1}
    72%{opacity:0}
  }
  @keyframes screenFlash{
    0%,55%,100%{background:rgba(255,255,170,0)}
    58%,66%{background:rgba(255,255,170,.18)}
  }
  @keyframes pulse{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(1.5); opacity:.6}}

  @media (max-width:1024px){
    .grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:560px){
    body{padding:26px 16px 34px}
    .grid{grid-template-columns:1fr; gap:16px}
    .card{min-height:320px}
    .temp{font-size:50px}
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
    .card:hover{transform:none}
  }
</style>
</head>
<body>

  <header class="header">
    <span class="eyebrow"><i></i> Live Forecast · Pure CSS</span>
    <h1>Today's <span>Weather</span><br>around the world</h1>
    <p>Four animated conditions — <b>hover a card</b> to lift it. Built with <b>HTML &amp; CSS only</b>: no JavaScript, no images, no SVG.</p>
  </header>

  <main class="grid">

    <!-- SUNNY -->
    <article class="card sunny" tabindex="0" aria-label="Sunny in Los Angeles, 28 degrees">
      <div class="top"><span class="badge">☀ Sunny</span><span class="live">LIVE</span></div>
      <div class="stage" aria-hidden="true">
        <div class="sun">
          <div class="sun-rays"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
          <div class="sun-core"></div>
        </div>
      </div>
      <div class="city">Los Angeles, US</div>
      <div class="temp">28°<small>C</small></div>
      <p class="desc">Clear blue skies &amp; warm sunshine all day long.</p>
      <div class="meta"><span>UV 8 · High</span><span>Wind 12 km/h</span><span>Humidity 41%</span></div>
    </article>

    <!-- RAINY -->
    <article class="card rainy" tabindex="0" aria-label="Rainy in London, 14 degrees">
      <div class="top"><span class="badge">☂ Rainy</span><span class="live">LIVE</span></div>
      <div class="stage" aria-hidden="true">
        <div class="cloud c-white rain-cloud"><div class="cloud-base"></div><b></b><b></b><b></b></div>
        <div class="drops"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      </div>
      <div class="city">London, UK</div>
      <div class="temp">14°<small>C</small></div>
      <p class="desc">Steady rain showers with a cool, fresh breeze.</p>
      <div class="meta"><span>Rain 90%</span><span>Wind 24 km/h</span><span>Humidity 86%</span></div>
    </article>

    <!-- SNOWY -->
    <article class="card snowy" tabindex="0" aria-label="Snowy in Reykjavik, minus 4 degrees">
      <div class="top"><span class="badge dark">❄ Snowy</span><span class="live">LIVE</span></div>
      <div class="stage" aria-hidden="true">
        <div class="cloud c-soft snow-cloud"><div class="cloud-base"></div><b></b><b></b><b></b></div>
        <div class="flakes"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      </div>
      <div class="city">Reykjavík, IS</div>
      <div class="temp">-4°<small>C</small></div>
      <p class="desc">Light, drifting snow under soft overcast skies.</p>
      <div class="meta"><span>Snow 75%</span><span>Wind 18 km/h</span><span>Feels -9°C</span></div>
    </article>

    <!-- STORMY -->
    <article class="card stormy" tabindex="0" aria-label="Stormy in Singapore, 26 degrees">
      <div class="flash" aria-hidden="true"></div>
      <div class="top"><span class="badge dark">⚡ Stormy</span><span class="live">LIVE</span></div>
      <div class="stage" aria-hidden="true">
        <div class="cloud c-dark storm-cloud"><div class="cloud-base"></div><b></b><b></b><b></b></div>
        <div class="bolt"></div>
        <div class="storm-drops"><span></span><span></span><span></span></div>
      </div>
      <div class="city">Singapore, SG</div>
      <div class="temp">26°<small>C</small></div>
      <p class="desc">Thunderstorms &amp; lightning — stay indoors tonight.</p>
      <div class="meta"><span>Storm 95%</span><span>Gusts 48 km/h</span><span>Humidity 92%</span></div>
    </article>

  </main>

  <p class="hint">Tip: <b>Tab</b> through the cards &nbsp;·&nbsp; All motion respects <b>prefers-reduced-motion</b></p>

</body>
</html>