GPT-6 Luna

by OpenAIReasoningClean

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

How it went

Total time: 39.5 s
Cost: $0.0024
Output tokens: 4,711
Spent thinking: 748 tokens
Speed: 148.4 tok/s
Console errors: 0

First token after: 7.8 s
First visible text after: 13.1 s
Prompt tokens: 498
Code size: 11.6 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"medium"}
Max output: 64,000 tokens
Generated: Nov 10, 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 · 491 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather, in motion</title>
<style>
  :root {
    color-scheme: light;
    --ink: #18253b;
    --muted: #68778d;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    padding: 54px 32px 48px;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(ellipse at 8% 0%, rgba(255,255,255,.9), transparent 38%),
      linear-gradient(145deg, #edf3fa, #f5f7fb 55%, #e8eef6);
  }

  .page {
    width: min(1160px, 100%);
    margin: 0 auto;
  }

  .intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin: 0 2px 30px;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #53708e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .eyebrow::before {
    content: "";
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #6b9cc7;
  }

  h1 {
    margin: 0;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.05;
    letter-spacing: -.045em;
  }

  .intro p {
    max-width: 305px;
    margin: 0 0 3px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .card {
    position: relative;
    min-width: 0;
    min-height: 390px;
    overflow: hidden;
    padding: 20px 20px 22px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 24px;
    box-shadow: 0 15px 34px rgba(31, 52, 79, .11), inset 0 1px rgba(255,255,255,.35);
    transition: transform .28s ease, box-shadow .28s ease;
  }

  .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 42px rgba(31, 52, 79, .17), inset 0 1px rgba(255,255,255,.4);
  }

  .sunny {
    color: #463516;
    background: linear-gradient(155deg, #ffe9a7 0%, #ffd16a 55%, #f5b84f 100%);
  }

  .rainy {
    color: #f5fbff;
    background: linear-gradient(155deg, #68b9db 0%, #398ebd 55%, #246c9b 100%);
  }

  .snowy {
    color: #20344c;
    background: linear-gradient(155deg, #f8fdff 0%, #d9eff7 55%, #b8dce9 100%);
  }

  .stormy {
    color: #f7f3ff;
    background: linear-gradient(155deg, #7777b2 0%, #55568d 52%, #393d71 100%);
  }

  .card::after {
    position: absolute;
    right: -54px;
    top: -60px;
    width: 180px;
    height: 180px;
    content: "";
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    pointer-events: none;
  }

  .card-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .weather-tag {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 20px;
    background: rgba(255,255,255,.2);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .card-number {
    opacity: .58;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
  }

  .scene {
    position: relative;
    height: 197px;
    margin: 2px -5px 0;
    overflow: hidden;
  }

  .scene::before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 148px;
    height: 148px;
    content: "";
    border-radius: 50%;
    background: rgba(255,255,255,.13);
    transform: translate(-50%, -44%);
  }

  /* Sunny icon */
  .sun-rays {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background: repeating-conic-gradient(#f7a928 0deg 7deg, transparent 7deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 44% 100%);
    mask: radial-gradient(circle, transparent 0 43%, #000 44% 100%);
    animation: spin 24s linear infinite;
    transform: translate(-50%, -50%);
  }

  .sun-core {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 77px;
    height: 77px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 29%, #fff4b1, #ffd45e 58%, #f5a832);
    box-shadow: 0 0 28px rgba(255, 207, 88, .52);
    animation: sun-breathe 3.6s ease-in-out infinite;
    transform: translate(-50%, -50%);
  }

  /* Cloud, reused for rain, snow and storm */
  .cloud {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 61px;
    width: 112px;
    height: 37px;
    border-radius: 24px;
    background: #f7fcff;
    box-shadow: 0 8px 16px rgba(29, 70, 104, .14);
    transform: translateX(-50%);
  }

  .cloud::before,
  .cloud::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    background: inherit;
  }

  .cloud::before {
    left: 19px;
    top: -24px;
    width: 49px;
    height: 49px;
  }

  .cloud::after {
    left: 47px;
    top: -34px;
    width: 64px;
    height: 64px;
  }

  .rain-cloud { background: #f5fbff; }

  .raindrop {
    position: absolute;
    z-index: 1;
    top: 105px;
    width: 8px;
    height: 15px;
    border-radius: 60% 0 60% 60%;
    background: #e4f8ff;
    opacity: 0;
    transform: rotate(-45deg);
    animation: rain-fall 1.15s linear infinite;
  }

  .raindrop:nth-child(2) { left: 27%; animation-delay: -.78s; }
  .raindrop:nth-child(3) { left: 42%; animation-delay: -.23s; }
  .raindrop:nth-child(4) { left: 57%; animation-delay: -.93s; }
  .raindrop:nth-child(5) { left: 72%; animation-delay: -.46s; }

  .snow-cloud { top: 55px; background: #f8fdff; }

  .flake {
    position: absolute;
    z-index: 3;
    top: 117px;
    width: 18px;
    height: 18px;
    color: #fff;
    animation: snow-fall 3.4s ease-in-out infinite;
  }

  .flake::before,
  .flake::after,
  .flake i {
    position: absolute;
    left: 8px;
    top: 0;
    width: 2px;
    height: 18px;
    content: "";
    border-radius: 2px;
    background: currentColor;
  }

  .flake::after { transform: rotate(60deg); }
  .flake i { transform: rotate(-60deg); }
  .flake.one { left: 25%; animation-delay: -.5s; }
  .flake.two { left: 48%; top: 133px; animation-delay: -2.3s; transform: scale(.75); }
  .flake.three { left: 70%; animation-delay: -1.4s; transform: scale(.9); }

  .storm-cloud {
    top: 59px;
    background: #e4e5f5;
    box-shadow: 0 8px 18px rgba(24, 25, 63, .22);
  }

  .bolt {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 101px;
    width: 31px;
    height: 61px;
    background: linear-gradient(160deg, #fff7a5, #ffc84b);
    clip-path: polygon(57% 0, 100% 0, 72% 39%, 100% 39%, 29% 100%, 44% 54%, 13% 54%);
    filter: drop-shadow(0 0 9px rgba(255, 219, 92, .8));
    animation: flash 2.4s steps(1, end) infinite;
    transform: translateX(-50%);
  }

  .card-info {
    position: relative;
    z-index: 2;
    padding-top: 2px;
  }

  .city {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
  }

  .temperature {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    margin: 5px 0 7px;
    font-size: 48px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.065em;
  }

  .temperature sup {
    margin-top: 6px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
  }

  .description {
    margin: 0;
    font-size: 13px;
    opacity: .77;
  }

  .sunny .description, .snowy .description { color: rgba(32, 42, 57, .72); }

  @keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  @keyframes sun-breathe {
    0%, 100% { box-shadow: 0 0 26px rgba(255, 207, 88, .45); }
    50% { box-shadow: 0 0 42px rgba(255, 207, 88, .8); }
  }

  @keyframes rain-fall {
    0% { opacity: 0; transform: translateY(-3px) rotate(-45deg); }
    15% { opacity: .9; }
    85% { opacity: .8; }
    100% { opacity: 0; transform: translateY(52px) rotate(-45deg); }
  }

  @keyframes snow-fall {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
    0% { transform: translate(0, -5px) rotate(0deg); }
    100% { transform: translate(9px, 28px) rotate(100deg); }
  }

  @keyframes flash {
    0%, 13%, 17%, 50%, 54%, 100% { opacity: 1; }
    14%, 16%, 51%, 53% { opacity: .08; }
  }

  @media (max-width: 900px) {
    body { padding: 38px 24px; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card { min-height: 370px; }
    .scene { height: 180px; }
  }

  @media (max-width: 560px) {
    body { padding: 30px 18px 36px; }
    .intro {
      display: block;
      margin-bottom: 23px;
    }
    .intro p { margin-top: 11px; font-size: 13px; }
    .grid { grid-template-columns: 1fr; gap: 14px; }
    .card {
      min-height: 340px;
      padding: 18px 20px 20px;
    }
    .scene { height: 168px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
    }
  }
</style>
</head>
<body>
  <main class="page">
    <header class="intro">
      <div>
        <div class="eyebrow">The daily forecast</div>
        <h1>Weather, in motion.</h1>
      </div>
      <p>A little look at the skies around the world today.</p>
    </header>

    <section class="grid" aria-label="Weather forecast">
      <article class="card sunny">
        <div class="card-head">
          <span class="weather-tag">Sunny</span>
          <span class="card-number">01 / 04</span>
        </div>
        <div class="scene" aria-hidden="true">
          <div class="sun-rays"></div>
          <div class="sun-core"></div>
        </div>
        <div class="card-info">
          <h2 class="city">Lisbon, PT</h2>
          <p class="temperature">26<sup>°</sup></p>
          <p class="description">Clear skies all day</p>
        </div>
      </article>

      <article class="card rainy">
        <div class="card-head">
          <span class="weather-tag">Rainy</span>
          <span class="card-number">02 / 04</span>
        </div>
        <div class="scene" aria-hidden="true">
          <div class="cloud rain-cloud"></div>
          <div class="raindrop"></div>
          <div class="raindrop"></div>
          <div class="raindrop"></div>
          <div class="raindrop"></div>
        </div>
        <div class="card-info">
          <h2 class="city">London, UK</h2>
          <p class="temperature">14<sup>°</sup></p>
          <p class="description">Light showers nearby</p>
        </div>
      </article>

      <article class="card snowy">
        <div class="card-head">
          <span class="weather-tag">Snowy</span>
          <span class="card-number">03 / 04</span>
        </div>
        <div class="scene" aria-hidden="true">
          <div class="cloud snow-cloud"></div>
          <span class="flake one"><i></i></span>
          <span class="flake two"><i></i></span>
          <span class="flake three"><i></i></span>
        </div>
        <div class="card-info">
          <h2 class="city">Sapporo, JP</h2>
          <p class="temperature">−3<sup>°</sup></p>
          <p class="description">Gentle snow flurries</p>
        </div>
      </article>

      <article class="card stormy">
        <div class="card-head">
          <span class="weather-tag">Stormy</span>
          <span class="card-number">04 / 04</span>
        </div>
        <div class="scene" aria-hidden="true">
          <div class="cloud storm-cloud"></div>
          <div class="bolt"></div>
        </div>
        <div class="card-info">
          <h2 class="city">Miami, US</h2>
          <p class="temperature">22<sup>°</sup></p>
          <p class="description">Thunderstorms this evening</p>
        </div>
      </article>
    </section>
  </main>
</body>
</html>

Reasoning trace (748 tokens)

**Designing a weather scene**

I’m considering card sizes of 270x370 with CSS adjustments for mobile and tablet views. I want to stack icons and create a rainy or stormy theme using cloud shapes with some creative CSS. For sunny backgrounds, I’ll use warm colors, while rain will feature a blue backdrop, including animated droplets with delays. I’ll also add snowflakes and flashing lightning for effect and ensure that the layout is responsive, using CSS only, with a max width of 800px.**Creating sun rays in CSS**

I’m thinking about how to position the sun at the center of my design while allowing rays to extend outward. I’ll create these rays using a radial gradient mask that transitions from transparent to black. It seems like a good idea to rotate the rays behind the sun for a dynamic effect. Using repeating conic gradients will help me create 12 rays easily. Overall, keeping everything centered will make the design more cohesive.**Designing Weather Icons**

I'm working on a CSS layout for weather icons and scenes. I’ve set up the positions for clouds and raindrops, adjusting sizes and animations. The raindrop shape will use a specific border radius and positioning based on percentages. I need to create different styles for sunny, rainy, snowy, and stormy weather cards, incorporating colors like dark navy for sunny and purple for stormy. I'll ensure to use semantic markup and maintain accessibility standards. Overall, it’s about creating a visually appealing and functional design!