Muse Ember

by MetaReasoningClean

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

How it went

Total time: 21.6 s
Cost: $0.0059
Output tokens: 11,790
Spent thinking: 6,298 tokens
Speed: 618.3 tok/s
Console errors: 0

First token after: 2.5 s
First visible text after: 15.7 s
Prompt tokens: 518
Code size: 15.9 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"max"}
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 · 292 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}
  html{scroll-behavior:smooth}
  body{
    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:
      radial-gradient(700px 380px at 12% -10%, rgba(255,166,43,.20), transparent 60%),
      radial-gradient(700px 420px at 92% 0%, rgba(74,124,255,.16), transparent 60%),
      linear-gradient(180deg,#F4F7FB 0%,#E9EFF6 100%);
    color:#0E223F;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  .page{max-width:1240px;margin:0 auto;padding:34px 28px 30px}

  /* Header */
  .hero{text-align:center;margin-bottom:30px}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:#fff;border:1px solid #E2EAF3;border-radius:999px;
    padding:8px 14px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#5A6B84;
    box-shadow:0 6px 18px rgba(15,35,64,.07);
  }
  .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:pulseDot 2.2s ease-in-out infinite}
  @keyframes pulseDot{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
  h1{font-size:clamp(34px,4.6vw,54px);line-height:1.02;letter-spacing:-.035em;font-weight:900;margin:18px 0 12px;color:#0E223F}
  h1 .accent{background:linear-gradient(90deg,#FF8A00,#FFB03A 55%,#4A7CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sub{color:#5A6B84;font-size:16px;line-height:1.6;max-width:660px;margin:0 auto}
  .sub strong{color:#0E223F}

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

  /* Cards */
  .card{
    position:relative;overflow:hidden;isolation:isolate;
    border-radius:28px;padding:22px 22px 20px;color:#fff;
    display:flex;flex-direction:column;min-height:398px;
    box-shadow:0 20px 38px rgba(15,35,64,.18), inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1);
  }
  .card::before{content:"";position:absolute;top:-74px;right:-52px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.20);z-index:-1}
  .card::after{content:"";position:absolute;bottom:-92px;left:-48px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.13);z-index:-1}
  .card:hover{transform:translateY(-10px);box-shadow:0 30px 52px rgba(15,35,64,.26), inset 0 1px 0 rgba(255,255,255,.4)}
  .sunny{background:linear-gradient(160deg,#FF7A18 0%,#FFA62B 52%,#FFC84D 100%)}
  .rainy{background:linear-gradient(160deg,#1E3A5F 0%,#2F5D8A 52%,#4A90B8 100%)}
  .snowy{background:linear-gradient(160deg,#5B7EC2 0%,#7FA8DC 50%,#AECDF0 100%)}
  .stormy{background:linear-gradient(160deg,#141428 0%,#2D2A4A 55%,#4A3A62 100%)}

  .card-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.95}
  .location{display:inline-flex;align-items:center;gap:8px}
  .pin{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28);flex:none}
  .num{font-size:13px;letter-spacing:.12em;opacity:.65;font-weight:900}
  .badge{display:inline-block;margin-top:12px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 11px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(6px)}

  .icon-stage{height:142px;display:flex;align-items:center;justify-content:center;position:relative;margin:4px 0 2px}
  .icon-stage > div{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .card:hover .icon-stage > div{transform:scale(1.06)}

  .card-body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1}
  .card-body h2{font-size:27px;letter-spacing:-.03em;font-weight:900;line-height:1}
  .temp-row{display:flex;align-items:flex-end;gap:8px;margin-top:10px}
  .temp{font-size:58px;line-height:.9;font-weight:900;letter-spacing:-.05em;text-shadow:0 4px 16px rgba(0,0,0,.14)}
  .unit{font-size:20px;font-weight:800;opacity:.95;padding-bottom:6px}
  .desc{margin-left:auto;text-align:right;font-size:13px;line-height:1.45;font-weight:600;opacity:.96;padding-bottom:4px}
  .stats{display:flex;gap:10px;border-top:1px solid rgba(255,255,255,.3);padding-top:15px;margin-top:auto}
  .stat{flex:1;min-width:0}
  .stat span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;opacity:.88;margin-bottom:5px;white-space:nowrap}
  .stat strong{font-size:14px;font-weight:900;letter-spacing:-.01em;white-space:nowrap}

  /* SUN */
  .sun-scene{width:120px;height:120px;position:relative}
  .rays{position:absolute;inset:0;animation:spinSlow 22s linear infinite}
  @keyframes spinSlow{to{transform:rotate(360deg)}}
  .ray{position:absolute;top:50%;left:50%;width:7px;height:20px;margin:-10px 0 0 -3.5px;background:#FFE36E;border-radius:99px;box-shadow:0 0 12px rgba(255,220,80,.9);transform:rotate(var(--r)) translateY(-46px)}
  .sun-core{
    position:absolute;left:calc(50% - 29px);top:calc(50% - 29px);width:58px;height:58px;border-radius:50%;
    background:radial-gradient(circle at 35% 32%, #FFF3D6 0%, #FFD93D 48%, #FF9F1C 100%);
    box-shadow:0 0 0 12px rgba(255,220,100,.24), 0 0 44px rgba(255,180,0,.75), inset 0 -6px 12px rgba(255,140,0,.35);
    animation:pulseSun 3.4s ease-in-out infinite;
  }
  @keyframes pulseSun{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
  .sparkle{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFF2A8;box-shadow:0 0 10px #FFE36E;animation:twinkle 2.6s ease-in-out infinite}
  .sparkle.s1{top:12px;right:10px}
  .sparkle.s2{bottom:18px;left:6px;width:5px;height:5px;animation-delay:.8s}
  .sparkle.s3{top:22px;left:16px;width:4px;height:4px;animation-delay:1.4s}
  @keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}

  /* CLOUDS */
  .cloud-scene{width:134px;height:122px;position:relative}
  .cloud{position:relative;width:100px;height:34px;border-radius:999px;z-index:2;animation:cloudDrift 5s ease-in-out infinite;margin:8px auto 0}
  .cloud::before{content:"";position:absolute;width:50px;height:50px;border-radius:50%;top:-25px;left:15px}
  .cloud::after{content:"";position:absolute;width:38px;height:38px;border-radius:50%;top:-18px;right:13px}
  @keyframes cloudDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
  .rain-cloud{background:#EAF6FF;box-shadow:0 12px 24px rgba(0,0,0,.18)}
  .rain-cloud::before,.rain-cloud::after{background:#EAF6FF}
  .snow-cloud{background:#FFFFFF;box-shadow:0 12px 24px rgba(30,60,110,.18)}
  .snow-cloud::before,.snow-cloud::after{background:#FFFFFF}
  .storm-cloud{background:#8E94A8;box-shadow:0 12px 24px rgba(0,0,0,.30);width:108px}
  .storm-cloud::before,.storm-cloud::after{background:#8E94A8}

  /* RAIN */
  .rain{position:absolute;top:44px;left:50%;transform:translateX(-50%);width:86px;height:62px}
  .drop{position:absolute;top:0;width:5px;height:16px;border-radius:99px;background:linear-gradient(180deg,#CDEFFF,#6EC6FF);opacity:0;box-shadow:0 2px 6px rgba(80,170,255,.45);animation:rainFall 1.45s linear infinite}
  .drop:nth-child(1){left:6px;animation-delay:0s}
  .drop:nth-child(2){left:24px;animation-delay:.35s}
  .drop:nth-child(3){left:42px;animation-delay:.15s}
  .drop:nth-child(4){left:60px;animation-delay:.55s}
  .drop:nth-child(5){left:76px;animation-delay:.75s}
  @keyframes rainFall{0%{transform:translateY(0) scaleY(.7);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(48px) scaleY(1.12);opacity:0}}

  /* SNOW */
  .snow{position:absolute;top:44px;left:50%;transform:translateX(-50%);width:88px;height:62px}
  .flake{position:absolute;top:0;width:13px;height:3px;border-radius:99px;background:#fff;opacity:0;animation:snowFall 3.1s linear infinite;filter:drop-shadow(0 2px 3px rgba(80,120,180,.25))}
  .flake::before,.flake::after{content:"";position:absolute;inset:0;background:#fff;border-radius:99px}
  .flake::before{transform:rotate(60deg)}
  .flake::after{transform:rotate(120deg)}
  .flake.f1{left:8px;animation-delay:0s;animation-duration:3.2s}
  .flake.f2{left:28px;animation-delay:.7s;animation-duration:2.8s;width:10px}
  .flake.f3{left:48px;animation-delay:.35s;animation-duration:3.4s}
  .flake.f4{left:64px;animation-delay:1.1s;animation-duration:2.9s;width:10px}
  .flake.f5{left:78px;animation-delay:.9s;animation-duration:3.1s}
  @keyframes snowFall{0%{transform:translate(0,-4px) rotate(0deg);opacity:0}18%{opacity:1}55%{transform:translate(7px,26px) rotate(140deg);opacity:1}100%{transform:translate(-6px,52px) rotate(280deg);opacity:0}}

  /* STORM */
  .bolt{
    position:absolute;top:40px;left:50%;width:30px;height:54px;transform:translateX(-50%);
    background:linear-gradient(180deg,#FFE873 0%,#FFB800 100%);
    clip-path:polygon(58% 0%, 18% 56%, 44% 56%, 28% 100%, 88% 36%, 60% 36%);
    animation:boltFlash 3s ease-in-out infinite;z-index:3;
  }
  .bolt-glow{position:absolute;top:42px;left:50%;transform:translateX(-50%);width:64px;height:64px;border-radius:50%;background:rgba(255,200,0,.38);filter:blur(18px);animation:boltFlash 3s ease-in-out infinite;z-index:1}
  @keyframes boltFlash{0%,42%,58%,100%{opacity:.28}48%,54%{opacity:1}51%{opacity:.45}}
  .storm-rain{top:46px;width:96px}
  .storm-rain .drop{height:11px;width:4px;background:linear-gradient(180deg,#D8E6FF,#8FB8FF)}
  .storm-rain .drop:nth-child(1){left:8px;animation-delay:.2s}
  .storm-rain .drop:nth-child(2){left:82px;animation-delay:.6s}
  .storm-rain .drop:nth-child(3){left:24px;animation-delay:.9s}

  /* Footer notes */
  .notes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
  .notes span{background:#fff;border:1px solid #E2EAF3;color:#5A6B84;border-radius:999px;padding:9px 15px;font-size:12.5px;font-weight:700;box-shadow:0 6px 16px rgba(15,35,64,.06)}
  .notes b{color:#0E223F}

  /* Responsive */
  @media (max-width:1080px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .card{min-height:380px}
  }
  @media (max-width:600px){
    .page{padding:24px 16px 22px}
    .grid{grid-template-columns:1fr;gap:18px}
    .card{min-height:360px;border-radius:24px}
    .temp{font-size:52px}
    h1{font-size:36px}
    .sub{font-size:15px}
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
    }
    .card:hover{transform:none}
  }
</style>
</head>
<body>
<main class="page">
  <header class="hero">
    <span class="eyebrow"><span class="dot"></span> Live Weather &middot; Today</span>
    <h1>Weather, beautifully<br><span class="accent">animated in pure CSS</span></h1>
    <p class="sub">Four conditions, four moods &mdash; every icon is built from <strong>HTML elements and CSS only</strong>. No images, no icon fonts, no JavaScript.</p>
  </header>

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

    <!-- SUNNY -->
    <article class="card sunny">
      <div class="card-head"><span class="location"><span class="pin"></span>California, USA</span><span class="num">01</span></div>
      <span class="badge">Sunny</span>
      <div class="icon-stage" aria-hidden="true">
        <div class="sun-scene">
          <span class="sparkle s1"></span><span class="sparkle s2"></span><span class="sparkle s3"></span>
          <div class="rays">
            <span class="ray" style="--r:0deg"></span>
            <span class="ray" style="--r:45deg"></span>
            <span class="ray" style="--r:90deg"></span>
            <span class="ray" style="--r:135deg"></span>
            <span class="ray" style="--r:180deg"></span>
            <span class="ray" style="--r:225deg"></span>
            <span class="ray" style="--r:270deg"></span>
            <span class="ray" style="--r:315deg"></span>
          </div>
          <div class="sun-core"></div>
        </div>
      </div>
      <div class="card-body">
        <h2>Los Angeles</h2>
        <div class="temp-row"><span class="temp">28&deg;</span><span class="unit">&deg;C</span><p class="desc">Bright sunshine<br>all afternoon</p></div>
        <div class="stats">
          <div class="stat"><span>Humidity</span><strong>42%</strong></div>
          <div class="stat"><span>Wind</span><strong>11 km/h</strong></div>
          <div class="stat"><span>UV Index</span><strong>8 High</strong></div>
        </div>
      </div>
    </article>

    <!-- RAINY -->
    <article class="card rainy">
      <div class="card-head"><span class="location"><span class="pin"></span>England, UK</span><span class="num">02</span></div>
      <span class="badge">Rainy</span>
      <div class="icon-stage" aria-hidden="true">
        <div class="cloud-scene">
          <div class="cloud rain-cloud"></div>
          <div class="rain"><span class="drop"></span><span class="drop"></span><span class="drop"></span><span class="drop"></span><span class="drop"></span></div>
        </div>
      </div>
      <div class="card-body">
        <h2>London</h2>
        <div class="temp-row"><span class="temp">14&deg;</span><span class="unit">&deg;C</span><p class="desc">Light rain<br>showers</p></div>
        <div class="stats">
          <div class="stat"><span>Humidity</span><strong>81%</strong></div>
          <div class="stat"><span>Wind</span><strong>18 km/h</strong></div>
          <div class="stat"><span>Precip</span><strong>90%</strong></div>
        </div>
      </div>
    </article>

    <!-- SNOWY -->
    <article class="card snowy">
      <div class="card-head"><span class="location"><span class="pin"></span>Colorado, USA</span><span class="num">03</span></div>
      <span class="badge">Snowy</span>
      <div class="icon-stage" aria-hidden="true">
        <div class="cloud-scene">
          <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></div>
        </div>
      </div>
      <div class="card-body">
        <h2>Aspen</h2>
        <div class="temp-row"><span class="temp">-4&deg;</span><span class="unit">&deg;C</span><p class="desc">Gentle snowfall<br>overnight</p></div>
        <div class="stats">
          <div class="stat"><span>Humidity</span><strong>74%</strong></div>
          <div class="stat"><span>Wind</span><strong>9 km/h</strong></div>
          <div class="stat"><span>Snow</span><strong>12 cm</strong></div>
        </div>
      </div>
    </article>

    <!-- STORMY -->
    <article class="card stormy">
      <div class="card-head"><span class="location"><span class="pin"></span>Florida, USA</span><span class="num">04</span></div>
      <span class="badge">Stormy</span>
      <div class="icon-stage" aria-hidden="true">
        <div class="cloud-scene">
          <div class="cloud storm-cloud"></div>
          <div class="bolt-glow"></div>
          <div class="bolt"></div>
          <div class="rain storm-rain"><span class="drop"></span><span class="drop"></span><span class="drop"></span></div>
        </div>
      </div>
      <div class="card-body">
        <h2>Miami</h2>
        <div class="temp-row"><span class="temp">24&deg;</span><span class="unit">&deg;C</span><p class="desc">Thunder &amp;<br>lightning</p></div>
        <div class="stats">
          <div class="stat"><span>Humidity</span><strong>88%</strong></div>
          <div class="stat"><span>Wind</span><strong>32 km/h</strong></div>
          <div class="stat"><span>Gusts</span><strong>58 km/h</strong></div>
        </div>
      </div>
    </article>
  </section>

  <footer class="notes">
    <span><b>100% CSS icons</b> &mdash; divs &amp; pseudo-elements</span>
    <span><b>@keyframes</b> infinite animations</span>
    <span><b>Hover lift</b> &middot; responsive grid</span>
    <span><b>prefers-reduced-motion</b> respected</span>
  </footer>
</main>
</body>
</html>

Reasoning trace (6,298 tokens)

Designing a single HTML file with CSS-only animated weather cards using @keyframes, responsive grid, and reduced-motion support.Defining the responsive grid layout and CSS-only icon structure for the weather cards.Extending the CSS-only icons with animated sun rays, rain drops, snowflake shapes, and a clip-path lightning bolt.Adding responsive layout rules and keyframe animations for sun, rain, snow, and cloud effects.Extending the layout with storm bolt animation, stat grid, and reduced-motion safeguards.Adding gradient backgrounds, cloud and precipitation elements, and responsive layout rules.Defining keyframe animations and CSS transforms for sun pulse, cloud drift, rain, snow, and bolt effects.