GPT-6.1 Terra

by OpenAIReasoningClean

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

How it went

Total time: 57.5 s
Cost: $0.026
Output tokens: 5,131
Spent thinking: 723 tokens
Speed: 110.5 tok/s
Console errors: 0

First token after: 11.1 s
First visible text after: 16.1 s
Prompt tokens: 498
Code size: 13.0 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: model default
Max output: 128,000 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 · 493 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Little Weather</title>
<style>
  * { box-sizing: border-box; }

  :root {
    color-scheme: light;
    font-family: Arial, Helvetica, sans-serif;
    color: #202b37;
    background: #f4f3ee;
  }

  body {
    margin: 0;
    min-height: 100vh;
    background:
      radial-gradient(circle at 8% 7%, rgba(232, 219, 190, .35), transparent 27%),
      #f4f3ee;
  }

  .page {
    width: min(1152px, calc(100% - 64px));
    margin: 0 auto;
    padding: 48px 0 38px;
  }

  .topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #d8d9d3;
    color: #66716f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #263b3b;
  }

  .brand-mark {
    width: 20px;
    height: 20px;
    border: 1px solid #8a9a8d;
    border-radius: 50%;
    position: relative;
  }

  .brand-mark::before,
  .brand-mark::after {
    content: "";
    position: absolute;
    background: #728477;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .brand-mark::before { width: 10px; height: 1px; }
  .brand-mark::after { width: 1px; height: 10px; }

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

  .eyebrow {
    margin: 0 0 10px;
    color: #8a958d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(36px, 4vw, 50px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.08;
  }

  .intro-copy {
    max-width: 250px;
    margin: 0 0 3px;
    color: #7a8580;
    font-size: 13px;
    line-height: 1.7;
  }

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

  .card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 416px;
    padding: 23px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 25px rgba(30, 44, 46, .08);
    transition: transform .35s ease, box-shadow .35s ease;
  }

  .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px rgba(30, 44, 46, .16);
  }

  .card::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    right: -108px;
    top: 72px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .12;
    box-shadow: 0 0 0 32px transparent, 0 0 0 33px currentColor, 0 0 0 65px transparent, 0 0 0 66px currentColor;
  }

  .sunny {
    color: #67471e;
    background: linear-gradient(155deg, #fbe7a9 0%, #f5c86e 54%, #e8a754 100%);
  }

  .rainy {
    color: #f0f7fa;
    background: linear-gradient(155deg, #8baebe 0%, #648ba2 51%, #496f89 100%);
  }

  .snowy {
    color: #486675;
    background: linear-gradient(155deg, #ecf5f3 0%, #c6e0e5 54%, #a8ced8 100%);
  }

  .stormy {
    color: #f7f1fa;
    background: linear-gradient(155deg, #8c8a9f 0%, #66677f 50%, #454d66 100%);
  }

  .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .78;
  }

  .card-number {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 9px;
    letter-spacing: 0;
    opacity: .8;
  }

  .scene {
    height: 205px;
    position: relative;
    flex: none;
  }

  .sun {
    position: absolute;
    width: 88px;
    height: 88px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff3c2;
    box-shadow: 0 0 38px rgba(255, 244, 189, .65), inset -7px -7px 0 rgba(246, 190, 90, .18);
  }

  .rays {
    position: absolute;
    width: 166px;
    height: 166px;
    left: 50%;
    top: 52%;
    margin: -83px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, #fff2be 0deg 5deg, transparent 5deg 45deg);
    -webkit-mask: radial-gradient(circle, transparent 0 56px, #000 57px 72px, transparent 73px);
    mask: radial-gradient(circle, transparent 0 56px, #000 57px 72px, transparent 73px);
    animation: spin 24s linear infinite;
  }

  .cloud {
    position: absolute;
    left: 50%;
    top: 74px;
    width: 132px;
    height: 48px;
    transform: translateX(-50%);
    border-radius: 35px;
    background: var(--cloud);
    box-shadow: inset 0 -7px 0 rgba(51, 86, 112, .09), 0 10px 22px rgba(40, 62, 83, .1);
    z-index: 2;
  }

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

  .cloud::before { width: 66px; height: 66px; left: 18px; bottom: 13px; }
  .cloud::after { width: 51px; height: 51px; right: 12px; bottom: 12px; }

  .rainy .cloud { --cloud: #e4f1f2; }
  .snowy .cloud { --cloud: #fff; }
  .stormy .cloud { --cloud: #d1cddb; }

  .drop {
    position: absolute;
    top: 119px;
    left: var(--x);
    width: 3px;
    height: 18px;
    border-radius: 4px;
    background: #d8f4ff;
    transform: rotate(15deg);
    opacity: 0;
    animation: rain 1.1s linear infinite;
    animation-delay: var(--delay);
  }

  .flake {
    position: absolute;
    top: 120px;
    left: var(--x);
    width: 15px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    opacity: 0;
    animation: snow 3.2s ease-in-out infinite;
    animation-delay: var(--delay);
  }

  .flake::before, .flake::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
  }

  .flake::before { transform: rotate(60deg); }
  .flake::after { transform: rotate(-60deg); }

  .bolt {
    position: absolute;
    z-index: 1;
    top: 110px;
    left: calc(50% - 17px);
    width: 43px;
    height: 73px;
    background: #ffe7a3;
    clip-path: polygon(48% 0, 100% 0, 65% 38%, 91% 38%, 14% 100%, 34% 51%, 6% 51%);
    filter: drop-shadow(0 0 8px #ffe8a6);
    animation: flash 3s infinite;
  }

  .spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
  }

  .spark.one { top: 45px; left: 14%; }
  .spark.two { top: 132px; right: 13%; width: 5px; height: 5px; }
  .spark.three { top: 166px; left: 21%; width: 3px; height: 3px; }

  .weather-info { margin-top: auto; }
  .city {
    margin: 0 0 3px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 27px;
    letter-spacing: -.025em;
  }

  .temperature {
    margin: 0;
    font-size: 51px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: -.065em;
  }

  .temperature span {
    display: inline-block;
    vertical-align: top;
    margin: 3px 0 0 3px;
    font-size: 22px;
    letter-spacing: 0;
  }

  .card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 8px;
    margin-top: 19px;
    padding-top: 14px;
    border-top: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 25%, transparent);
  }

  .description { font-size: 12px; font-weight: 700; }
  .detail { font-size: 10px; opacity: .72; white-space: nowrap; }

  .footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 22px;
    color: #929a94;
    font-size: 10px;
    letter-spacing: .04em;
  }

  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes rain {
    0% { opacity: 0; transform: translate(0, -5px) rotate(15deg); }
    15% { opacity: .9; }
    85% { opacity: .8; }
    100% { opacity: 0; transform: translate(-12px, 59px) rotate(15deg); }
  }
  @keyframes snow {
    0% { opacity: 0; transform: translate(0, -5px) rotate(0); }
    15% { opacity: 1; }
    80% { opacity: .9; }
    100% { opacity: 0; transform: translate(15px, 66px) rotate(90deg); }
  }
  @keyframes flash {
    0%, 39%, 43%, 47%, 100% { opacity: .55; }
    40%, 45% { opacity: 1; }
    41%, 46% { opacity: .2; }
  }

  @media (max-width: 900px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card { min-height: 400px; }
  }

  @media (max-width: 560px) {
    .page { width: calc(100% - 40px); padding-top: 28px; }
    .topline { font-size: 9px; }
    .intro { display: block; padding: 28px 0 25px; }
    .intro-copy { margin-top: 14px; max-width: 290px; }
    .grid { grid-template-columns: 1fr; gap: 14px; }
    .card { min-height: 390px; }
    .scene { height: 190px; }
    .footer { line-height: 1.5; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    .drop, .flake { opacity: .8; }
    .bolt { opacity: 1; }
  }
</style>
</head>
<body>
  <main class="page">
    <div class="topline">
      <div class="brand"><span class="brand-mark" aria-hidden="true"></span> The Weather Edit</div>
      <span>A study in atmosphere &nbsp; / &nbsp; 01—04</span>
    </div>

    <header class="intro">
      <div>
        <p class="eyebrow">A little look outside</p>
        <h1>Whatever the weather.</h1>
      </div>
      <p class="intro-copy">Four places, four moods. A small collection of skies from around the world.</p>
    </header>

    <section class="grid" aria-label="Illustrated weather forecasts">
      <article class="card sunny">
        <div class="card-top"><span>01 &nbsp; / &nbsp; Clear skies</span><span class="card-number">01</span></div>
        <div class="scene" aria-hidden="true">
          <span class="spark one"></span><span class="spark two"></span><span class="spark three"></span>
          <div class="rays"></div><div class="sun"></div>
        </div>
        <div class="weather-info">
          <h2 class="city">Lisbon</h2>
          <p class="temperature">24<span>°C</span></p>
          <div class="card-bottom"><span class="description">Golden &amp; sunny</span><span class="detail">Feels like 26°</span></div>
        </div>
      </article>

      <article class="card rainy">
        <div class="card-top"><span>02 &nbsp; / &nbsp; Rain showers</span><span class="card-number">02</span></div>
        <div class="scene" aria-hidden="true">
          <span class="spark one"></span><span class="spark two"></span>
          <div class="cloud"></div>
          <i class="drop" style="--x:32%;--delay:-.1s"></i>
          <i class="drop" style="--x:42%;--delay:-.7s"></i>
          <i class="drop" style="--x:52%;--delay:-.3s"></i>
          <i class="drop" style="--x:62%;--delay:-.9s"></i>
          <i class="drop" style="--x:70%;--delay:-.5s"></i>
          <i class="drop" style="--x:38%;--delay:-.95s"></i>
        </div>
        <div class="weather-info">
          <h2 class="city">Copenhagen</h2>
          <p class="temperature">14<span>°C</span></p>
          <div class="card-bottom"><span class="description">Passing showers</span><span class="detail">Feels like 12°</span></div>
        </div>
      </article>

      <article class="card snowy">
        <div class="card-top"><span>03 &nbsp; / &nbsp; Snowfall</span><span class="card-number">03</span></div>
        <div class="scene" aria-hidden="true">
          <span class="spark one"></span><span class="spark two"></span><span class="spark three"></span>
          <div class="cloud"></div>
          <i class="flake" style="--x:29%;--delay:-.3s"></i>
          <i class="flake" style="--x:42%;--delay:-1.8s"></i>
          <i class="flake" style="--x:54%;--delay:-.8s"></i>
          <i class="flake" style="--x:66%;--delay:-2.4s"></i>
          <i class="flake" style="--x:36%;--delay:-2.7s"></i>
          <i class="flake" style="--x:61%;--delay:-1.4s"></i>
        </div>
        <div class="weather-info">
          <h2 class="city">Sapporo</h2>
          <p class="temperature">−2<span>°C</span></p>
          <div class="card-bottom"><span class="description">Soft snowfall</span><span class="detail">Feels like −5°</span></div>
        </div>
      </article>

      <article class="card stormy">
        <div class="card-top"><span>04 &nbsp; / &nbsp; Thunderstorm</span><span class="card-number">04</span></div>
        <div class="scene" aria-hidden="true">
          <span class="spark one"></span><span class="spark two"></span><span class="spark three"></span>
          <div class="cloud"></div>
          <div class="bolt"></div>
        </div>
        <div class="weather-info">
          <h2 class="city">Reykjavík</h2>
          <p class="temperature">8<span>°C</span></p>
          <div class="card-bottom"><span class="description">Thunder in the air</span><span class="detail">Feels like 5°</span></div>
        </div>
      </article>
    </section>

    <footer class="footer">
      <span>Made for the moments in between.</span>
      <span>Illustrative forecasts &nbsp; · &nbsp; °C</span>
    </footer>
  </main>
</body>
</html>

Reasoning trace (723 tokens)

**Designing weather elements**

I'm focusing on creating a cloud design with specific dimensions: width 130, height 48, and rounded corners. I want to include pseudoelements for visual appeal. The clouds will have a box-shadow for depth, and I plan to add rain and snow effects. The rainy clouds will be a whiteish light blue, while storm clouds get a gray or lavender tint. For snowflakes, I'll use a design with 3 bars, and I'll incorporate animations to make them float or fall.**Designing Weather Card Layout**

I'm considering how to design a weather card. Instead of using "LIVE WEATHER" since that might imply inaccurate data, maybe I should use "THE FORECAST / 01" instead. I want a small heading that says, "Forecasts, in a little motion." Each card will be labelled “01 / CLEAR SKIES” with a city name and temperature prominently featured. For mobile, I'll stack cards with specific dimensions and a subtle background color. My header will have a premium feel, and I want to add decorative elements too.