Muse Ember

by MetaReasoningClean

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

How it went

Total time: 11.6 s
Cost: $0.0033
Output tokens: 6,580
Spent thinking: 1,842 tokens
Speed: 690.9 tok/s
Console errors: 0

First token after: 2.1 s
First visible text after: 5.6 s
Prompt tokens: 518
Code size: 13.7 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"medium"}
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 · 280 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 CSS</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  :root{--white:#fff;--muted:rgba(255,255,255,.82)}
  body{
    min-height:100vh;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background:
      radial-gradient(900px 500px at 15% -10%,rgba(255,180,84,.22),transparent 60%),
      radial-gradient(800px 500px at 90% 0%,rgba(96,165,250,.24),transparent 60%),
      radial-gradient(700px 600px at 50% 110%,rgba(167,139,250,.20),transparent 60%),
      linear-gradient(160deg,#0f172a 0%,#1e293b 45%,#0f172a 100%);
    color:var(--white);
    padding:38px 22px 30px;
    overflow-x:hidden;
  }
  .wrap{max-width:1240px;margin:0 auto}
  header{text-align:center;margin-bottom:30px}
  .pill{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 14px;border-radius:999px;
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
    font-size:11px;letter-spacing:.16em;font-weight:800;text-transform:uppercase;color:#fde68a;
  }
  .pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#fde047;box-shadow:0 0 14px #fde047}
  h1{font-size:clamp(34px,5vw,56px);line-height:1.02;letter-spacing:-.04em;margin:16px 0 10px;font-weight:900}
  h1 em{font-style:normal;background:linear-gradient(90deg,#fde68a,#fca5a5,#93c5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sub{color:rgba(255,255,255,.72);font-size:15px;line-height:1.6;max-width:640px;margin:0 auto}
  .grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch;
  }
  .card{
    position:relative;overflow:hidden;border-radius:28px;
    padding:20px 20px 18px;min-height:358px;
    display:flex;flex-direction:column;
    box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.28);
    border:1px solid rgba(255,255,255,.22);
    transition:transform .45s cubic-bezier(.2,.9,.25,1.2),box-shadow .45s ease;
    isolation:isolate;
  }
  .card:hover{transform:translateY(-12px) scale(1.015);box-shadow:0 30px 55px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.35)}
  .card::after{
    content:"";position:absolute;width:220px;height:220px;border-radius:50%;
    right:-90px;top:-90px;background:rgba(255,255,255,.16);filter:blur(2px);z-index:-1;
  }
  .card::before{
    content:"";position:absolute;left:-60px;bottom:-80px;width:170px;height:170px;border-radius:50%;
    background:rgba(255,255,255,.10);z-index:-1;
  }
  .sunny{background:linear-gradient(165deg,#ff9a3d 0%,#ffb347 38%,#ff7e5f 100%)}
  .rainy{background:linear-gradient(165deg,#3b82a6 0%,#2f6e8f 52%,#1e4a66 100%)}
  .snowy{background:linear-gradient(165deg,#7dd3fc 0%,#60a5fa 48%,#818cf8 100%)}
  .stormy{background:linear-gradient(165deg,#3a3a5e 0%,#2b2d42 55%,#1a1a2e 100%)}

  .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .city{font-size:21px;font-weight:900;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.2);line-height:1}
  .country{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:5px;letter-spacing:.02em}
  .badge{
    flex:0 0 auto;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
    padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.28);
    backdrop-filter:blur(6px);
  }
  .icon-wrap{height:148px;display:grid;place-items:center;position:relative;margin:6px 0 2px}
  .temp{font-size:58px;line-height:.9;font-weight:900;letter-spacing:-.05em;text-shadow:0 4px 18px rgba(0,0,0,.18)}
  .temp span{font-size:24px;font-weight:700;vertical-align:top;letter-spacing:0}
  .desc{font-size:14px;line-height:1.45;color:rgba(255,255,255,.94);margin-top:8px;font-weight:600;max-width:240px}
  .meta{
    margin-top:auto;padding-top:16px;
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
  }
  .meta div{
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);
    border-radius:14px;padding:9px 6px;text-align:center;backdrop-filter:blur(5px);
  }
  .meta label{display:block;font-size:9px;letter-spacing:.11em;text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.75);margin-bottom:4px}
  .meta strong{font-size:14px}

  /* ---------- ICONS : pure elements ---------- */
  /* SUNNY */
  .scene-sun{width:112px;height:112px;position:relative}
  .sun-rays{position:absolute;inset:0;animation:spin 14s linear infinite}
  .sun-rays span{
    position:absolute;top:1px;left:50%;width:7px;height:21px;margin-left:-3.5px;
    background:#fff3ad;border-radius:99px;box-shadow:0 0 10px rgba(255,220,80,.9);
    transform-origin:50% 55px;
  }
  .sun-rays span:nth-child(1){transform:rotate(0deg)}
  .sun-rays span:nth-child(2){transform:rotate(45deg)}
  .sun-rays span:nth-child(3){transform:rotate(90deg)}
  .sun-rays span:nth-child(4){transform:rotate(135deg)}
  .sun-rays span:nth-child(5){transform:rotate(180deg)}
  .sun-rays span:nth-child(6){transform:rotate(225deg)}
  .sun-rays span:nth-child(7){transform:rotate(270deg)}
  .sun-rays span:nth-child(8){transform:rotate(315deg)}
  .sun-core{
    position:absolute;left:50%;top:50%;width:62px;height:62px;transform:translate(-50%,-50%);
    border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7cc,#ffd93d 55%,#ff9f1a);
    box-shadow:0 0 0 8px rgba(255,255,255,.18),0 0 34px 12px rgba(255,200,40,.55);
    animation:pulse 2.6s ease-in-out infinite;
  }
  .sun-core::after{content:"";position:absolute;left:16px;top:14px;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.85);filter:blur(1px)}

  /* CLOUD base */
  .cloud{position:absolute;width:112px;height:36px;border-radius:99px;background:#f1f5f9;box-shadow:0 12px 22px rgba(0,0,0,.18)}
  .cloud::before{content:"";position:absolute;left:16px;top:-25px;width:50px;height:50px;border-radius:50%;background:inherit}
  .cloud::after{content:"";position:absolute;right:16px;top:-17px;width:36px;height:36px;border-radius:50%;background:inherit}

  /* RAINY */
  .scene-rain{width:132px;height:112px;position:relative;animation:bob 3.2s ease-in-out infinite}
  .scene-rain .cloud{left:10px;top:18px;background:linear-gradient(180deg,#ffffff,#cbd5e1)}
  .drops span{
    position:absolute;top:62px;width:6px;height:18px;border-radius:99px;
    background:linear-gradient(180deg,#bae6fd,#38bdf8);box-shadow:0 0 8px rgba(56,189,248,.7);
    animation:rainFall 1.05s linear infinite;opacity:0;
  }
  .drops span:nth-child(1){left:26px;animation-delay:0s}
  .drops span:nth-child(2){left:52px;animation-delay:.25s}
  .drops span:nth-child(3){left:78px;animation-delay:.5s}
  .drops span:nth-child(4){left:102px;animation-delay:.75s}
  .scene-rain .puddle{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:88px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}

  /* SNOWY */
  .scene-snow{width:132px;height:112px;position:relative;animation:bob 3.8s ease-in-out infinite}
  .scene-snow .cloud{left:10px;top:16px;background:linear-gradient(180deg,#ffffff,#e0f2fe)}
  .flakes span{
    position:absolute;top:56px;border-radius:50%;background:#fff;
    box-shadow:0 0 0 2px rgba(255,255,255,.25),0 0 10px rgba(255,255,255,.9);
    animation:snowFall 2.4s linear infinite;opacity:0;
  }
  .flakes span:nth-child(1){left:24px;width:9px;height:9px;animation-delay:0s}
  .flakes span:nth-child(2){left:50px;width:7px;height:7px;animation-delay:.6s}
  .flakes span:nth-child(3){left:74px;width:10px;height:10px;animation-delay:1.1s}
  .flakes span:nth-child(4){left:98px;width:7px;height:7px;animation-delay:.3s}
  .flakes span:nth-child(5){left:62px;width:6px;height:6px;animation-delay:1.7s}

  /* STORMY */
  .scene-storm{width:132px;height:112px;position:relative;animation:bob 2.6s ease-in-out infinite}
  .scene-storm .cloud{left:10px;top:16px;background:linear-gradient(180deg,#64748b,#334155)}
  .scene-storm .cloud::before,.scene-storm .cloud::after{background:#475569}
  .bolt{
    position:absolute;left:50%;top:52px;width:36px;height:58px;transform:translateX(-50%);
    background:linear-gradient(180deg,#fef08a,#facc15);
    clip-path:polygon(58% 0%,18% 56%,44% 56%,28% 100%,82% 38%,52% 38%);
    filter:drop-shadow(0 0 10px rgba(250,204,21,.95));
    animation:flash 3.4s ease-in-out infinite;
  }
  .storm-drops span{
    position:absolute;top:60px;width:5px;height:14px;border-radius:99px;background:#94a3b8;
    animation:rainFall 1.2s linear infinite;opacity:0;
  }
  .storm-drops span:nth-child(1){left:20px;animation-delay:.2s}
  .storm-drops span:nth-child(2){left:108px;animation-delay:.8s}

  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.09)}}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes rainFall{
    0%{transform:translateY(0) scaleY(.6);opacity:0}
    18%{opacity:1;transform:translateY(6px) scaleY(1)}
    100%{transform:translateY(36px) scaleY(1.15);opacity:0}
  }
  @keyframes snowFall{
    0%{transform:translate(0,0) rotate(0deg);opacity:0}
    15%{opacity:1}
    50%{transform:translate(7px,20px)}
    100%{transform:translate(-6px,42px);opacity:0}
  }
  @keyframes flash{
    0%,52%,58%,100%{opacity:.25;transform:translateX(-50%) scale(.96)}
    54%,57%{opacity:1;transform:translateX(-50%) scale(1.06)}
    55%{opacity:.4}
  }

  footer{text-align:center;color:rgba(255,255,255,.55);font-size:12.5px;margin-top:26px;letter-spacing:.02em}
  footer b{color:rgba(255,255,255,.85)}

  @media (max-width:1020px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){
    body{padding:28px 16px 22px}
    .grid{grid-template-columns:1fr}
    .card{min-height:330px}
    .temp{font-size:52px}
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation:none !important;transition:none !important}
    .card:hover{transform:none}
    .drops span,.flakes span,.storm-drops span{opacity:.9}
    .bolt{opacity:1}
  }
</style>
</head>
<body>
<div class="wrap">
  <header>
    <span class="pill">HTML + CSS Only &nbsp;•&nbsp; No JS &nbsp;•&nbsp; No SVG &nbsp;•&nbsp; No Images</span>
    <h1>Weather, <em>beautifully coded.</em></h1>
    <p class="sub">Four animated weather cards built entirely from HTML elements, pseudo-elements and <b>@keyframes</b> — rotating suns, falling rain, drifting snow and flashing lightning.</p>
  </header>

  <main class="grid">
    <!-- SUNNY -->
    <article class="card sunny">
      <div class="top">
        <div><span class="city">Phoenix</span><span class="country">Arizona, USA</span></div>
        <span class="badge">Sunny</span>
      </div>
      <div class="icon-wrap">
        <div class="scene-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>
      </div>
      <div class="temp">32<span>°C</span></div>
      <p class="desc">Bright sunshine with clear blue skies all day long.</p>
      <div class="meta"><div><label>Humidity</label><strong>24%</strong></div><div><label>Wind</label><strong>8 km/h</strong></div><div><label>UV Index</label><strong>High</strong></div></div>
    </article>

    <!-- RAINY -->
    <article class="card rainy">
      <div class="top">
        <div><span class="city">London</span><span class="country">United Kingdom</span></div>
        <span class="badge">Rainy</span>
      </div>
      <div class="icon-wrap">
        <div class="scene-rain" aria-hidden="true">
          <div class="cloud"></div>
          <div class="drops"><span></span><span></span><span></span><span></span></div>
          <div class="puddle"></div>
        </div>
      </div>
      <div class="temp">14<span>°C</span></div>
      <p class="desc">Steady rain showers throughout the afternoon.</p>
      <div class="meta"><div><label>Humidity</label><strong>89%</strong></div><div><label>Wind</label><strong>18 km/h</strong></div><div><label>Rainfall</label><strong>12 mm</strong></div></div>
    </article>

    <!-- SNOWY -->
    <article class="card snowy">
      <div class="top">
        <div><span class="city">Reykjavík</span><span class="country">Iceland</span></div>
        <span class="badge">Snowy</span>
      </div>
      <div class="icon-wrap">
        <div class="scene-snow" aria-hidden="true">
          <div class="cloud"></div>
          <div class="flakes"><span></span><span></span><span></span><span></span><span></span></div>
        </div>
      </div>
      <div class="temp">-4<span>°C</span></div>
      <p class="desc">Gentle snowfall with soft drifts and winter calm.</p>
      <div class="meta"><div><label>Humidity</label><strong>76%</strong></div><div><label>Wind</label><strong>22 km/h</strong></div><div><label>Snowfall</label><strong>8 cm</strong></div></div>
    </article>

    <!-- STORMY -->
    <article class="card stormy">
      <div class="top">
        <div><span class="city">Miami</span><span class="country">Florida, USA</span></div>
        <span class="badge">Stormy</span>
      </div>
      <div class="icon-wrap">
        <div class="scene-storm" aria-hidden="true">
          <div class="cloud"></div>
          <div class="bolt"></div>
          <div class="storm-drops"><span></span><span></span></div>
        </div>
      </div>
      <div class="temp">27<span>°C</span></div>
      <p class="desc">Thunderstorms with frequent lightning flashes.</p>
      <div class="meta"><div><label>Humidity</label><strong>93%</strong></div><div><label>Wind</label><strong>41 km/h</strong></div><div><label>Storms</label><strong>Severe</strong></div></div>
    </article>
  </main>

  <footer>Hover a card to lift it &nbsp;•&nbsp; Every icon is <b>pure CSS</b> &nbsp;•&nbsp; Respects <b>prefers-reduced-motion</b></footer>
</div>
</body>
</html>

Reasoning trace (1,842 tokens)

Designing a self-contained HTML CSS layout with animated weather cards using divs and keyframes while ensuring responsiveness and no script usage.Extending the layout with icon markup and CSS animations for rain, snow, and storm cards.Adding CSS keyframe animations and markup for rain, snow, and storm visual effects with responsive card styling.