GPT-6.1 Terra

by OpenAIReasoningClean

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

How it went

Total time: 1 min 2 s
Cost: $0.028
Output tokens: 5,569
Spent thinking: 859 tokens
Speed: 98.4 tok/s
Console errors: 0

First token after: 5.8 s
First visible text after: 19.7 s
Prompt tokens: 498
Code size: 13.6 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: {"effort":"medium"}
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 · 504 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, wherever</title>
<style>
  * { box-sizing: border-box; }

  :root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #242b29;
    background: #f6f6f1;
  }

  body {
    margin: 0;
    min-width: 0;
    background:
      radial-gradient(circle at 95% 0%, #e9eee6 0, transparent 28%),
      #f6f6f1;
  }

  .page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 52px 34px;
  }

  .topbar {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dedfd8;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.04em;
  }

  .brand-mark {
    width: 27px;
    height: 27px;
    position: relative;
    border-radius: 50%;
    background: #293d34;
  }

  .brand-mark::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    background: #e8ecdf;
    border-radius: 50%;
    left: 9px;
    top: 9px;
    box-shadow: 0 -7px 0 -3px #e8ecdf, 0 7px 0 -3px #e8ecdf,
      7px 0 0 -3px #e8ecdf, -7px 0 0 -3px #e8ecdf,
      5px 5px 0 -3px #e8ecdf, -5px -5px 0 -3px #e8ecdf,
      5px -5px 0 -3px #e8ecdf, -5px 5px 0 -3px #e8ecdf;
  }

  .top-note {
    color: #7f8981;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
  }

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

  .eyebrow {
    margin: 0 0 10px;
    color: #7d8c7f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
  }

  h1 {
    margin: 0;
    font-size: clamp(32px, 3.5vw, 46px);
    line-height: 1.08;
    letter-spacing: -.055em;
    font-weight: 650;
  }

  .intro-copy {
    color: #7f8981;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 3px;
    max-width: 245px;
  }

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

  .card {
    position: relative;
    min-height: 424px;
    overflow: hidden;
    border-radius: 21px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    transition: transform .3s ease, box-shadow .3s ease;
  }

  .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 30px rgba(39, 53, 44, .13);
  }

  .sunny { background: linear-gradient(155deg, #fae9bc 0%, #f8d383 58%, #f1bb72 100%); color: #594326; }
  .rainy { background: linear-gradient(155deg, #d9e9e8 0%, #b9d5d7 57%, #9dc3cb 100%); color: #304c55; }
  .snowy { background: linear-gradient(155deg, #e8edf5 0%, #d4dfed 56%, #bdcfe1 100%); color: #42566a; }
  .stormy { background: linear-gradient(155deg, #667888 0%, #4d6175 55%, #37485d 100%); color: #f5f6f4; }

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

  .number {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    opacity: .64;
  }

  .condition {
    border: 1px solid currentColor;
    border-radius: 30px;
    padding: 6px 9px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    opacity: .7;
  }

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

  .scene::before,
  .scene::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .scene::before { width: 166px; height: 166px; }
  .scene::after { width: 206px; height: 206px; opacity: .55; }

  .sun {
    position: absolute;
    width: 174px;
    height: 174px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .sun-rays {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(#eeb04b 0deg 7deg, transparent 7deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 49% 69%, transparent 70%);
    mask: radial-gradient(circle, transparent 0 48%, #000 49% 69%, transparent 70%);
    animation: rotate 18s linear infinite;
  }

  .sun-core {
    position: absolute;
    width: 83px;
    height: 83px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(145deg, #ffdf78, #f9b843);
    box-shadow: 0 8px 25px rgba(207, 139, 39, .23), inset 0 2px 4px rgba(255,255,255,.5);
  }

  .cloud {
    position: absolute;
    width: 140px;
    height: 51px;
    left: 50%;
    top: 83px;
    transform: translateX(-50%);
    border-radius: 50px;
    background: var(--cloud);
    box-shadow: 0 10px 20px rgba(47, 72, 91, .12);
    z-index: 2;
  }

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

  .cloud::before { width: 67px; height: 67px; left: 21px; top: -32px; }
  .cloud::after { width: 83px; height: 83px; right: 12px; top: -46px; }
  .rainy .cloud { --cloud: #f2f9f7; }
  .snowy .cloud { --cloud: #fbfcff; }
  .stormy .cloud { --cloud: #b5c4ce; box-shadow: 0 10px 20px rgba(18, 31, 44, .18); }

  .drop {
    position: absolute;
    width: 4px;
    height: 15px;
    top: 139px;
    border-radius: 5px;
    background: #6fa8b5;
    transform: rotate(17deg);
    animation: rainfall 1.2s linear infinite;
  }

  .drop.d1 { left: 27%; animation-delay: -.1s; }
  .drop.d2 { left: 40%; top: 151px; animation-delay: -.7s; }
  .drop.d3 { left: 52%; animation-delay: -.4s; }
  .drop.d4 { left: 65%; top: 150px; animation-delay: -.95s; }
  .drop.d5 { left: 74%; top: 137px; animation-delay: -.6s; }
  .drop.d6 { left: 33%; top: 165px; animation-delay: -.9s; }

  .flake {
    position: absolute;
    width: 14px;
    height: 14px;
    top: 143px;
    animation: snowfall 3s ease-in-out infinite;
  }

  .flake span, .flake span::before, .flake span::after {
    position: absolute;
    width: 14px;
    height: 2px;
    top: 6px;
    left: 0;
    border-radius: 2px;
    background: #fff;
  }

  .flake span::before, .flake span::after { content: ""; top: 0; }
  .flake span::before { transform: rotate(60deg); }
  .flake span::after { transform: rotate(-60deg); }
  .flake.f1 { left: 26%; animation-delay: -.4s; }
  .flake.f2 { left: 42%; top: 160px; animation-delay: -1.6s; transform: scale(.75); }
  .flake.f3 { left: 58%; top: 142px; animation-delay: -2.2s; }
  .flake.f4 { left: 72%; top: 158px; animation-delay: -.9s; transform: scale(.7); }
  .flake.f5 { left: 34%; top: 179px; animation-delay: -2.7s; transform: scale(.65); }

  .bolt {
    position: absolute;
    width: 48px;
    height: 76px;
    left: calc(50% - 20px);
    top: 124px;
    background: linear-gradient(145deg, #fff5ab, #f7ce66);
    clip-path: polygon(44% 0, 100% 0, 64% 39%, 94% 39%, 14% 100%, 35% 52%, 3% 52%);
    filter: drop-shadow(0 0 8px rgba(255, 224, 134, .6));
    z-index: 3;
    animation: flash 3s infinite;
  }

  .storm-dot {
    position: absolute;
    width: 4px;
    height: 11px;
    background: rgba(217, 230, 238, .6);
    border-radius: 5px;
    top: 151px;
    transform: rotate(17deg);
    animation: rainfall 1.4s linear infinite;
  }
  .storm-dot.s1 { left: 28%; animation-delay: -.3s; }
  .storm-dot.s2 { left: 72%; animation-delay: -.9s; }
  .storm-dot.s3 { left: 77%; top: 163px; animation-delay: -.6s; }

  .card-content { margin-top: auto; position: relative; z-index: 2; }
  .location {
    margin: 0 0 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    opacity: .8;
  }

  .temperature {
    margin: 0;
    font-size: 57px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.07em;
  }

  .description {
    margin: 11px 0 0;
    font-size: 13px;
    font-weight: 600;
  }

  .card-bottom {
    margin-top: 21px;
    padding-top: 13px;
    border-top: 1px solid currentColor;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .025em;
    opacity: .58;
  }

  .footer {
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #9ba39b;
    font-size: 11px;
    font-weight: 600;
  }

  .footer .live {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .footer .live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9bb49a;
  }

  @keyframes rotate { to { transform: rotate(360deg); } }
  @keyframes rainfall {
    0% { transform: translateY(-5px) rotate(17deg); opacity: 0; }
    20% { opacity: .9; }
    80% { opacity: .9; }
    100% { transform: translateY(28px) rotate(17deg); opacity: 0; }
  }
  @keyframes snowfall {
    0% { transform: translate(-5px, -5px) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(7px, 25px) rotate(45deg); opacity: 0; }
  }
  @keyframes flash {
    0%, 42%, 48%, 54%, 100% { opacity: .9; }
    44%, 50% { opacity: .25; }
    46%, 52% { opacity: 1; }
  }

  @media (max-width: 900px) {
    .page { padding-left: 30px; padding-right: 30px; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 600px) {
    .page { padding: 0 20px 28px; }
    .topbar { height: 68px; }
    .top-note { font-size: 9px; }
    .intro { display: block; padding: 34px 0 24px; }
    .intro-copy { margin-top: 14px; max-width: none; }
    .grid { grid-template-columns: 1fr; gap: 14px; }
    .card { min-height: 400px; padding: 21px; }
    .scene { height: 195px; }
    .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, .storm-dot, .flake, .bolt { opacity: 1 !important; }
  }
</style>
</head>
<body>
  <main class="page">
    <header class="topbar">
      <div class="brand"><span class="brand-mark" aria-hidden="true"></span>weather / wherever</div>
      <div class="top-note">A little look outside</div>
    </header>

    <section aria-labelledby="page-title">
      <div class="intro">
        <div>
          <p class="eyebrow">The forecast collection &nbsp; / &nbsp; 01—04</p>
          <h1 id="page-title">Weather, wherever.</h1>
        </div>
        <p class="intro-copy">Four places, four moods.<br>A little window into the weather.</p>
      </div>

      <div class="grid">
        <article class="card sunny">
          <div class="card-top"><span class="number">01 / 04</span><span class="condition">CLEAR SKY</span></div>
          <div class="scene" aria-hidden="true">
            <div class="sun"><div class="sun-rays"></div><div class="sun-core"></div></div>
          </div>
          <div class="card-content">
            <p class="location">Lisbon, Portugal</p>
            <p class="temperature">26°</p>
            <p class="description">Soaking up the sun</p>
            <div class="card-bottom"><span>FEELS LIKE 28°</span><span>H: 28° &nbsp; L: 19°</span></div>
          </div>
        </article>

        <article class="card rainy">
          <div class="card-top"><span class="number">02 / 04</span><span class="condition">LIGHT RAIN</span></div>
          <div class="scene" aria-hidden="true">
            <div class="cloud"></div>
            <i class="drop d1"></i><i class="drop d2"></i><i class="drop d3"></i><i class="drop d4"></i><i class="drop d5"></i><i class="drop d6"></i>
          </div>
          <div class="card-content">
            <p class="location">Copenhagen, Denmark</p>
            <p class="temperature">14°</p>
            <p class="description">A little rain on the way</p>
            <div class="card-bottom"><span>FEELS LIKE 12°</span><span>H: 16° &nbsp; L: 11°</span></div>
          </div>
        </article>

        <article class="card snowy">
          <div class="card-top"><span class="number">03 / 04</span><span class="condition">SNOWFALL</span></div>
          <div class="scene" aria-hidden="true">
            <div class="cloud"></div>
            <i class="flake f1"><span></span></i><i class="flake f2"><span></span></i><i class="flake f3"><span></span></i><i class="flake f4"><span></span></i><i class="flake f5"><span></span></i>
          </div>
          <div class="card-content">
            <p class="location">Oslo, Norway</p>
            <p class="temperature">−2°</p>
            <p class="description">A soft blanket of snow</p>
            <div class="card-bottom"><span>FEELS LIKE −5°</span><span>H: 1° &nbsp; L: −4°</span></div>
          </div>
        </article>

        <article class="card stormy">
          <div class="card-top"><span class="number">04 / 04</span><span class="condition">THUNDER</span></div>
          <div class="scene" aria-hidden="true">
            <div class="cloud"></div>
            <div class="bolt"></div>
            <i class="storm-dot s1"></i><i class="storm-dot s2"></i><i class="storm-dot s3"></i>
          </div>
          <div class="card-content">
            <p class="location">Kyoto, Japan</p>
            <p class="temperature">18°</p>
            <p class="description">Thunder in the distance</p>
            <div class="card-bottom"><span>FEELS LIKE 17°</span><span>H: 20° &nbsp; L: 15°</span></div>
          </div>
        </article>
      </div>
    </section>

    <footer class="footer">
      <span class="live">A moment in the atmosphere</span>
      <span>Made for every kind of day.</span>
    </footer>
  </main>
</body>
</html>

Reasoning trace (859 tokens)

**Designing the layout**

I need to deliver a polished design without using JavaScript. The layout should target a 1280 desktop size with a creative dashboard featuring a cream off-white background. There will be a header and four cards, each about 270 by 440 pixels with an atmospheric gradient. I want to use CSS for all icons and animations, potentially using Unicode for snowflakes created with styled HTML. I’ll also consider making other weather elements like clouds and sun rays purely in CSS.**Designing the card layout**

I'm thinking about big cards with a lower footer, each featuring distinct color gradients. I need to use high-quality text for the header, showcasing the weather brand and local time while sticking to system fonts. Precise placement is essential for snowflakes and raindrops. I want four backgrounds: sunny peach yellow, muted blue for rain, lilac-blue for snow, and navy for storms. The icons should be legible and prominent. I'll also add atmospheric rings or stars with CSS, ensuring an overall consistent and airy layout. On desktop, I'll have four cards per row using a grid, and for mobile, I need a single-column stack.**Structuring the layout**

I need to fit the content within an 800 viewport. The top header will be 80 pixels high, the intro at 132 pixels, the cards at 420 pixels, and the bottom footer at 60 pixels, totaling 692 pixels. With a card height of 438 pixels, I have room to structure elements like the top label and stage area, which I'll set at 200 pixels for content and info. Let's start architecting this design!**Designing storm cloud animation**

I'm thinking about creating a storm cloud with dark features but with white highlights. I want to incorporate lightning animations using CSS, making it pulse and drop from above. I'll use concentric circles in the background with border styles on the ::before and ::after pseudo-elements. The cloud should have a rainy shade of white. I’ll keep it simple, using divs with classes and ensuring accessibility with an aria-hidden icon. I'll also implement static visuals for reduced motion. Let’s get to work on this!