Muse Ember
by MetaReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 21.2 s
- Cost
- $0.0060
- Output tokens
- 11,930
- Spent thinking
- 5,367 tokens
- Speed
- 670.8 tok/s
- Console errors
- 0
- First token after
- 3.4 s
- First visible text after
- 13.7 s
- Prompt tokens
- 518
- Code size
- 18.7 KB
- Finish reason
- stop
- Served by
- Meta
- Model id
meta/muse-ember- Reasoning sent
{"effort":"xhigh"}- 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 · 388 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather, Pure CSS — Sunny · Rainy · Snowy · Stormy</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background:#0B1226;
background-image:
radial-gradient(820px 420px at 18% -5%, rgba(91,141,239,.28), transparent 62%),
radial-gradient(720px 420px at 92% 8%, rgba(255,170,60,.20), transparent 60%),
radial-gradient(600px 500px at 50% 110%, rgba(120,90,220,.18), transparent 65%),
linear-gradient(180deg,#0B1226 0%,#101C3E 100%);
color:#fff;
min-height:100vh;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
.page{max-width:1280px;margin:0 auto;padding:42px 28px 28px}
/* HERO */
.hero{text-align:center;padding:8px 12px 30px}
.badge{
display:inline-flex;align-items:center;gap:9px;
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
padding:8px 14px;border-radius:999px;font-size:11px;letter-spacing:.18em;font-weight:800;
text-transform:uppercase;color:#DCE8FF;backdrop-filter:blur(6px)
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulseDot 2s infinite}
h1{font-size:clamp(38px,6vw,68px);line-height:.95;letter-spacing:-.04em;font-weight:900;margin:18px 0 14px}
h1 span{display:block}
h1 em{
font-style:normal;
background:linear-gradient(90deg,#FFD93D,#FF8A3D 38%,#7EC8FF 72%,#E6F4FF);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{max-width:640px;margin:0 auto;color:#AFC3E8;font-size:16px;line-height:1.6}
.pill-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.pill-row span{
font-size:12px;font-weight:700;letter-spacing:.04em;color:#E7EEFF;
border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
padding:7px 12px;border-radius:999px
}
.pill-row b{color:#FFD93D;font-weight:900}
/* GRID */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}
/* CARD BASE */
.card{
position:relative;overflow:hidden;border-radius:28px;
padding:20px 20px 18px;display:flex;flex-direction:column;
min-height:452px;color:#fff;
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);
animation:rise .8s cubic-bezier(.22,1,.36,1) both;
isolation:isolate;
cursor:default;
}
.card:nth-child(1){animation-delay:.05s}
.card:nth-child(2){animation-delay:.13s}
.card:nth-child(3){animation-delay:.21s}
.card:nth-child(4){animation-delay:.29s}
.card::before{
content:"";position:absolute;width:240px;height:240px;border-radius:50%;
right:-90px;top:-90px;background:rgba(255,255,255,.14);
box-shadow:0 0 0 28px rgba(255,255,255,.05), 0 0 0 62px rgba(255,255,255,.04);
z-index:0
}
.card::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 38%,transparent 72%,rgba(0,0,0,.08));
}
.card:hover,.card:focus-within{
transform:translateY(-12px) scale(1.015);
box-shadow:0 30px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.45);
}
.card > *{position:relative;z-index:1}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.place-tag{
font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.22);
padding:7px 10px;border-radius:999px;backdrop-filter:blur(4px)
}
.status{
display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
background:rgba(0,0,0,.16);padding:7px 10px;border-radius:999px
}
.status i{width:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 10px #4ADE80;animation:pulseDot 1.8s infinite}
/* ICON SCENE */
.scene{position:relative;width:148px;height:148px;margin:12px auto 4px;flex:0 0 auto;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.card:hover .scene{transform:scale(1.07) rotate(-1deg)}
.city{margin-top:6px;text-align:center}
.city h2{font-size:28px;letter-spacing:-.03em;line-height:1;font-weight:900}
.city p{font-size:13px;opacity:.88;margin-top:5px;font-weight:600;letter-spacing:.02em}
.temp-row{display:flex;align-items:flex-start;justify-content:center;gap:2px;margin-top:10px;line-height:.9}
.temp{font-size:64px;font-weight:900;letter-spacing:-.06em}
.unit{font-size:22px;font-weight:800;margin-top:8px;opacity:.95}
.desc{
text-align:center;margin:8px auto 0;display:inline-flex;align-self:center;
font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.22);
padding:8px 13px;border-radius:999px
}
.stats{
margin-top:auto;padding-top:16px;
display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.stats div{
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.14);
border-radius:16px;padding:10px 12px;backdrop-filter:blur(4px)
}
.stats span{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.stats strong{display:block;font-size:15px;margin-top:3px;letter-spacing:-.01em}
.footer-note{text-align:center;color:#7E93C2;font-size:13px;margin-top:28px;line-height:1.6}
.footer-note b{color:#DCE8FF}
/* ---------- SUNNY ---------- */
.card-sunny{background:linear-gradient(165deg,#FFD25F 0%,#FF9A3D 48%,#F95D3B 100%)}
.sun-rays{position:absolute;inset:0;animation:spin 22s linear infinite}
.sun-rays span{
position:absolute;left:50%;top:50%;width:7px;height:21px;margin:-10px 0 0 -3.5px;
border-radius:999px;background:linear-gradient(#FFF6B7,#FFD93D);
box-shadow:0 0 12px rgba(255,215,64,.95), 0 0 22px rgba(255,255,180,.5)
}
.sun-rays span:nth-child(1){transform:rotate(0deg) translateY(-54px)}
.sun-rays span:nth-child(2){transform:rotate(45deg) translateY(-54px)}
.sun-rays span:nth-child(3){transform:rotate(90deg) translateY(-54px)}
.sun-rays span:nth-child(4){transform:rotate(135deg) translateY(-54px)}
.sun-rays span:nth-child(5){transform:rotate(180deg) translateY(-54px)}
.sun-rays span:nth-child(6){transform:rotate(225deg) translateY(-54px)}
.sun-rays span:nth-child(7){transform:rotate(270deg) translateY(-54px)}
.sun-rays span:nth-child(8){transform:rotate(315deg) translateY(-54px)}
.sun-core{
position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;
background:radial-gradient(circle at 32% 28%, #FFF8C6 0%, #FFD93D 42%, #FF9F1C 100%);
box-shadow:0 0 0 8px rgba(255,255,255,.18), 0 0 34px rgba(255,190,40,.95), 0 12px 24px rgba(180,70,0,.25);
animation:sunPulse 3.2s ease-in-out infinite
}
.sun-core::after{content:"";position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), transparent 62%)}
/* ---------- CLOUD COMMON ---------- */
.cloud{
position:absolute;left:50%;top:24px;transform:translateX(-50%);
width:90px;height:34px;border-radius:999px;z-index:3;
box-shadow:0 12px 20px rgba(0,0,0,.14), inset 0 -6px 10px rgba(0,0,0,.06);
animation:drift 5s ease-in-out infinite
}
.cloud::before{content:"";position:absolute;width:46px;height:46px;border-radius:50%;top:-25px;left:15px}
.cloud::after{content:"";position:absolute;width:32px;height:32px;border-radius:50%;top:-15px;right:13px}
/* ---------- RAINY ---------- */
.card-rainy{background:linear-gradient(165deg,#6FA8E8 0%,#3D6FB8 46%,#223E6B 100%)}
.cloud-rain{background:#EDF4FF}
.cloud-rain::before{background:#EDF4FF}
.cloud-rain::after{background:#D9E8FB}
.drops{position:absolute;left:50%;top:62px;transform:translateX(-50%);width:92px;height:62px;z-index:2}
.drops span{
position:absolute;top:0;width:5px;height:17px;border-radius:999px;opacity:0;
background:linear-gradient(rgba(255,255,255,.1),#8ED0FF 45%,#4AA8FF);
box-shadow:0 0 8px rgba(120,200,255,.8);
animation:rainFall 1.15s linear infinite
}
.drops span:nth-child(1){left:8px;animation-delay:0s}
.drops span:nth-child(2){left:28px;animation-delay:.28s}
.drops span:nth-child(3){left:48px;animation-delay:.55s}
.drops span:nth-child(4){left:68px;animation-delay:.14s}
.drops span:nth-child(5){left:84px;animation-delay:.7s}
/* ---------- SNOWY ---------- */
.card-snowy{background:linear-gradient(165deg,#A9D1F2 0%,#D9ECFF 48%,#F2F9FF 100%);color:#17395E}
.card-snowy .place-tag{background:rgba(23,57,94,.08);border-color:rgba(23,57,94,.10);color:#17395E}
.card-snowy .status{background:rgba(23,57,94,.10);color:#17395E}
.card-snowy .desc{background:rgba(255,255,255,.65);border-color:rgba(255,255,255,.8);color:#17395E}
.card-snowy .stats div{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.75);color:#17395E}
.card-snowy::before{background:rgba(255,255,255,.35);box-shadow:0 0 0 28px rgba(255,255,255,.15),0 0 0 62px rgba(255,255,255,.10)}
.cloud-snow{background:#FFFFFF}
.cloud-snow::before{background:#FFFFFF}
.cloud-snow::after{background:#EAF4FF}
.flakes{position:absolute;left:50%;top:58px;transform:translateX(-50%);width:104px;height:68px;z-index:2}
.flake{position:absolute;top:0;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 16px rgba(180,220,255,.9);opacity:0;animation:snowFall 3.6s ease-in-out infinite}
.flake::before,.flake::after{content:"";position:absolute;left:50%;top:50%;width:17px;height:2px;border-radius:999px;background:rgba(255,255,255,.95);transform:translate(-50%,-50%) rotate(45deg)}
.flake::after{transform:translate(-50%,-50%) rotate(135deg)}
.flake:nth-child(1){left:6px;animation-delay:0s}
.flake:nth-child(2){left:30px;animation-delay:.9s;transform:scale(.8)}
.flake:nth-child(3){left:52px;animation-delay:1.7s}
.flake:nth-child(4){left:76px;animation-delay:.5s;transform:scale(.9)}
.flake:nth-child(5){left:92px;animation-delay:2.2s;transform:scale(.75)}
/* ---------- STORMY ---------- */
.card-stormy{background:linear-gradient(165deg,#5A5E8A 0%,#2E2E52 48%,#14142B 100%)}
.storm-glow{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:110px;height:84px;border-radius:50%;background:radial-gradient(circle, rgba(255,222,89,.38), transparent 68%);animation:glowFlash 2.6s infinite;z-index:1}
.cloud-storm{background:#454D6E;animation-delay:.4s}
.cloud-storm::before{background:#454D6E}
.cloud-storm::after{background:#323954}
.bolt{
position:absolute;left:50%;top:54px;margin-left:-15px;width:31px;height:54px;z-index:4;
background:linear-gradient(#FFF3A6,#FFD93D 55%,#FFB800);
clip-path:polygon(58% 0%,18% 56%,44% 56%,28% 100%,86% 38%,58% 38%);
filter:drop-shadow(0 0 10px rgba(255,210,60,.95)) drop-shadow(0 0 22px rgba(255,180,0,.5));
animation:boltFlash 2.6s infinite;transform-origin:50% 0%
}
.storm-drops{position:absolute;left:50%;top:62px;transform:translateX(-50%);width:92px;height:58px;z-index:2}
.storm-drops span{
position:absolute;top:0;width:4px;height:13px;border-radius:999px;opacity:0;
background:linear-gradient(rgba(255,255,255,.1),#9BD4FF);
transform:rotate(18deg);animation:rainFall 1s linear infinite
}
.storm-drops span:nth-child(1){left:6px;animation-delay:.1s}
.storm-drops span:nth-child(2){left:34px;animation-delay:.45s}
.storm-drops span:nth-child(3){left:60px;animation-delay:.25s}
.storm-drops span:nth-child(4){left:82px;animation-delay:.65s}
/* KEYFRAMES */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@keyframes drift{0%,100%{transform:translateX(calc(-50% - 4px))}50%{transform:translateX(calc(-50% + 5px))}}
@keyframes rainFall{
0%{transform:translateY(0) scaleY(.72);opacity:0}
14%{opacity:1}
82%{opacity:1}
100%{transform:translateY(48px) scaleY(1.18);opacity:0}
}
@keyframes snowFall{
0%{transform:translate(0,0) rotate(0deg);opacity:0}
12%{opacity:1}
50%{transform:translate(10px,30px) rotate(90deg);opacity:1}
100%{transform:translate(-8px,58px) rotate(180deg);opacity:0}
}
@keyframes boltFlash{
0%,52%,100%{opacity:.28;transform:scale(.94) rotate(-1deg)}
56%{opacity:1;transform:scale(1.08) rotate(1deg)}
60%{opacity:.45;transform:scale(.98)}
64%{opacity:1;transform:scale(1.06)}
68%{opacity:.55;transform:scale(1)}
72%{opacity:.95;transform:scale(1.03)}
76%{opacity:.35}
}
@keyframes glowFlash{
0%,52%,100%{opacity:.25;transform:translateX(-50%) scale(.9)}
58%,66%{opacity:1;transform:translateX(-50%) scale(1.12)}
62%{opacity:.45}
}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
/* RESPONSIVE */
@media (max-width:1100px){
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{min-height:430px}
.page{padding:32px 20px 22px}
}
@media (max-width:640px){
.grid{grid-template-columns:1fr}
.card{min-height:0}
.hero{padding-top:4px}
h1{font-size:42px}
.scene{margin-top:8px}
.stats{margin-top:14px}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
.card:hover,.card:focus-within{transform:none}
.card:hover .scene{transform:none}
.drops span,.flake,.storm-drops span,.bolt{opacity:.9}
.bolt{opacity:1}
}
</style>
</head>
<body>
<main class="page">
<header class="hero">
<div class="badge"><span class="dot"></span> Pure HTML + CSS • Zero JavaScript • No Images</div>
<h1>Weather, <span><em>beautifully CSS-only.</em></span></h1>
<p class="lede">Four animated weather cards built entirely from HTML elements and pseudo-elements — rotating sun rays, falling rain, drifting snow and flashing lightning, all powered by smooth infinite <b>@keyframes</b>.</p>
<div class="pill-row">
<span><b>✦</b> CSS @keyframes</span>
<span><b>✦</b> Pseudo-elements</span>
<span><b>✦</b> Responsive grid</span>
<span><b>✦</b> prefers-reduced-motion</span>
</div>
</header>
<section class="grid" aria-label="Animated weather cards">
<!-- SUNNY -->
<article class="card card-sunny" tabindex="0">
<div class="card-head">
<span class="place-tag">California</span>
<span class="status"><i></i>Live</span>
</div>
<div class="scene" 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 class="city">
<h2>San Diego</h2>
<p>United States</p>
</div>
<div class="temp-row"><span class="temp">28°</span><span class="unit">°C</span></div>
<span class="desc">☀ Clear & Sunny</span>
<div class="stats">
<div><span>Wind</span><strong>12 km/h NW</strong></div>
<div><span>Humidity</span><strong>42%</strong></div>
<div><span>UV Index</span><strong>7 · High</strong></div>
<div><span>Feels Like</span><strong>30°</strong></div>
</div>
</article>
<!-- RAINY -->
<article class="card card-rainy" tabindex="0">
<div class="card-head">
<span class="place-tag">Washington</span>
<span class="status"><i></i>Live</span>
</div>
<div class="scene" aria-hidden="true">
<div class="cloud cloud-rain"></div>
<div class="drops"><span></span><span></span><span></span><span></span><span></span></div>
</div>
<div class="city">
<h2>Seattle</h2>
<p>United States</p>
</div>
<div class="temp-row"><span class="temp">14°</span><span class="unit">°C</span></div>
<span class="desc">☂ Light Rain</span>
<div class="stats">
<div><span>Wind</span><strong>18 km/h SW</strong></div>
<div><span>Humidity</span><strong>84%</strong></div>
<div><span>Rain</span><strong>6 mm / hr</strong></div>
<div><span>Feels Like</span><strong>11°</strong></div>
</div>
</article>
<!-- SNOWY -->
<article class="card card-snowy" tabindex="0">
<div class="card-head">
<span class="place-tag">Colorado</span>
<span class="status"><i></i>Live</span>
</div>
<div class="scene" aria-hidden="true">
<div class="cloud cloud-snow"></div>
<div class="flakes"><span class="flake"></span><span class="flake"></span><span class="flake"></span><span class="flake"></span><span class="flake"></span></div>
</div>
<div class="city">
<h2>Aspen</h2>
<p>United States</p>
</div>
<div class="temp-row"><span class="temp">-4°</span><span class="unit">°C</span></div>
<span class="desc">❄ Snow Showers</span>
<div class="stats">
<div><span>Wind</span><strong>22 km/h N</strong></div>
<div><span>Humidity</span><strong>71%</strong></div>
<div><span>Snow</span><strong>4 cm / hr</strong></div>
<div><span>Feels Like</span><strong>-9°</strong></div>
</div>
</article>
<!-- STORMY -->
<article class="card card-stormy" tabindex="0">
<div class="card-head">
<span class="place-tag">Florida</span>
<span class="status"><i></i>Live</span>
</div>
<div class="scene" aria-hidden="true">
<div class="storm-glow"></div>
<div class="cloud cloud-storm"></div>
<div class="storm-drops"><span></span><span></span><span></span><span></span></div>
<div class="bolt"></div>
</div>
<div class="city">
<h2>Miami</h2>
<p>United States</p>
</div>
<div class="temp-row"><span class="temp">26°</span><span class="unit">°C</span></div>
<span class="desc">⚡ Thunderstorms</span>
<div class="stats">
<div><span>Wind</span><strong>31 km/h E</strong></div>
<div><span>Humidity</span><strong>88%</strong></div>
<div><span>Lightning</span><strong>Frequent</strong></div>
<div><span>Feels Like</span><strong>31°</strong></div>
</div>
</article>
</section>
<p class="footer-note">Hover a card to lift it • Every icon is CSS only — no icons, no images • <b>Animations pause automatically for reduced-motion users.</b></p>
</main>
</body>
</html>Reasoning trace (5,367 tokens)
Designing four CSS-only animated weather cards with pseudo-elements for icons, responsive grid layout, hover effects, and reduced-motion support in a single fenced code block.Extending the CSS-only design with animated sun rays, rain drops, snowflakes, and lightning using pseudo-elements and divs.Adding layout, typography, color schemes, hover effects, and reduced-motion handling for the CSS-only weather cards.Extending the CSS with pseudo-element snowflake sparkles and storm bolt clip-path plus responsive grid and hover states.Adding keyframe animations for rain, snow, lightning, sun pulse and spin with nth-child positioning and reduced-motion handling.Finalizing CSS with reduced-motion overrides, markup constraints, and one-time entrance animations.