Exploding like buttonOne-line

GPT-6.1 Terra

by OpenAIReasoningClean

Open in new window

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

How it went

Total time: 33.2 s
Cost: $0.015
Output tokens: 2,920
Spent thinking: 49 tokens
Speed: 95 tok/s
Console errors: 0

First token after: 2.4 s
First visible text after: 4.3 s
Prompt tokens: 356
Code size: 7.9 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: {"effort":"low"}
Max output: 128,000 tokens
Generated: Nov 12, 2026

What it was asked

The prompt

“a "like" button in pure CSS, no JavaScript, that does a crazy animation when you click it”

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 · 250 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Little Love</title>
<style>
  * { box-sizing: border-box; }
  :root {
    --ink: #29243d;
    --muted: #9690a6;
    --pink: #ff4f87;
  }
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow-x: hidden;
    color: var(--ink);
    font-family: ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif;
    background: #f8f5fb;
    background-image:
      radial-gradient(circle at 13% 20%, #ffe3ed 0, transparent 28%),
      radial-gradient(circle at 88% 78%, #e6e2ff 0, transparent 30%);
  }
  .page {
    width: min(100% - 32px, 480px);
    text-align: center;
    padding: 36px 0;
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #a181a4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 17px;
  }
  .eyebrow::before, .eyebrow::after {
    content: "";
    width: 24px;
    height: 1px;
    background: #d6c3d5;
  }
  .card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 30px;
    background: rgba(255,255,255,.77);
    box-shadow: 0 25px 70px rgba(105, 73, 116, .11), 0 4px 15px rgba(105, 73, 116, .04);
    padding: 38px 24px 30px;
  }
  .card::before {
    content: "";
    position: absolute;
    top: -95px;
    left: 50%;
    width: 300px;
    height: 230px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, #ffedf3, transparent 70%);
    pointer-events: none;
  }
  .topline {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #b39baa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
  }
  .topline span { color: #ff8bab; font-size: 14px; }
  h1 {
    position: relative;
    margin: 15px 0 8px;
    font-size: clamp(29px, 7vw, 38px);
    letter-spacing: -.055em;
    line-height: 1.1;
  }
  .subtitle {
    position: relative;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
  }
  .stage {
    height: 250px;
    display: grid;
    place-items: center;
    position: relative;
  }
  .stage::before, .stage::after {
    content: "✦";
    position: absolute;
    color: #eadce9;
    font-size: 19px;
  }
  .stage::before { left: 15%; top: 28%; }
  .stage::after { right: 15%; bottom: 25%; font-size: 13px; }
  input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
  }
  .like {
    position: relative;
    z-index: 1;
    width: 102px;
    height: 102px;
    display: grid;
    place-items: center;
    cursor: pointer;
    border: 1px solid #f3e5ec;
    border-radius: 32px;
    background: white;
    box-shadow: 0 12px 28px rgba(212, 127, 161, .15), 0 3px 7px rgba(137, 94, 118, .06);
    transition: transform .25s, box-shadow .25s, background .25s;
    -webkit-tap-highlight-color: transparent;
  }
  .like:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 18px 34px rgba(212,127,161,.23); }
  .like:active { transform: scale(.9); }
  input:focus-visible + .like { outline: 3px solid #bba8ff; outline-offset: 6px; }
  .heart {
    width: 49px;
    height: 49px;
    fill: #e8d9e0;
    transition: fill .25s;
    filter: drop-shadow(0 3px 2px rgba(255, 79, 135, 0));
    position: relative;
    z-index: 2;
  }
  input:checked + .like { background: #fff6f9; border-color: #ffd5e2; }
  input:checked + .like .heart {
    fill: var(--pink);
    filter: drop-shadow(0 4px 4px rgba(255,79,135,.25));
    animation: heart-pop .8s cubic-bezier(.2,.9,.3,1.4) both;
  }
  .ring {
    position: absolute;
    inset: 15px;
    border: 3px solid #ff8ab1;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }
  input:checked + .like .ring { animation: ring .75s ease-out both; }
  .particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color);
    opacity: 0;
    pointer-events: none;
  }
  .particle:nth-of-type(even) { border-radius: 2px; width: 8px; height: 14px; }
  input:checked + .like .particle {
    animation: confetti .9s cubic-bezier(.1,.65,.25,1) both;
    animation-delay: var(--delay, 0s);
  }
  @keyframes heart-pop {
    0% { transform: scale(.4) rotate(-18deg); }
    30% { transform: scale(1.5) rotate(12deg); }
    50% { transform: scale(.8) rotate(-9deg); }
    70% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
  }
  @keyframes ring {
    0% { transform: scale(.3); opacity: .9; border-width: 8px; }
    100% { transform: scale(2.4); opacity: 0; border-width: 1px; }
  }
  @keyframes confetti {
    0% { transform: translate(-50%,-50%) scale(.2) rotate(0); opacity: 1; }
    65% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.7) rotate(240deg); opacity: 0; }
  }
  .caption {
    min-height: 25px;
    color: #b49dab;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
  }
  .caption .after { display: none; color: #ef6994; }
  .stage:has(input:checked) + .caption .before { display: none; }
  .stage:has(input:checked) + .caption .after { display: inline; }
  .divider { height: 1px; background: #f3ecf1; margin: 22px 0 20px; }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    color: #b7aeba;
    font-size: 11px;
    font-weight: 600;
  }
  .footer .dot { color: #ff93b4; font-size: 16px; }
  .note { margin: 22px 0 0; color: #b9aebc; font-size: 11px; letter-spacing: .03em; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
</style>
</head>
<body>
  <main class="page">
    <div class="eyebrow">A tiny interaction</div>
    <section class="card">
      <div class="topline"><span>✦</span> Made to be clicked <span>✦</span></div>
      <h1>Send a little love.</h1>
      <p class="subtitle">Some things deserve a little celebration.</p>
      <div class="stage">
        <input type="checkbox" id="like" aria-label="Like">
        <label class="like" for="like">
          <span class="ring"></span>
          <span class="particle" style="--x:0px;--y:-105px;--color:#ff648e"></span>
          <span class="particle" style="--x:52px;--y:-91px;--color:#ffc75e;--delay:.02s"></span>
          <span class="particle" style="--x:91px;--y:-52px;--color:#b793ff"></span>
          <span class="particle" style="--x:110px;--y:2px;--color:#ff719a;--delay:.03s"></span>
          <span class="particle" style="--x:94px;--y:58px;--color:#ffbf65"></span>
          <span class="particle" style="--x:52px;--y:97px;--color:#a99aff;--delay:.04s"></span>
          <span class="particle" style="--x:0px;--y:110px;--color:#ff719a"></span>
          <span class="particle" style="--x:-55px;--y:94px;--color:#ffc75e;--delay:.02s"></span>
          <span class="particle" style="--x:-95px;--y:55px;--color:#bb9aff"></span>
          <span class="particle" style="--x:-110px;--y:0px;--color:#ff719a;--delay:.03s"></span>
          <span class="particle" style="--x:-92px;--y:-55px;--color:#ffc75e"></span>
          <span class="particle" style="--x:-53px;--y:-92px;--color:#bc9aff;--delay:.04s"></span>
          <svg class="heart" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.1 10.7 20C5.5 15.3 2 12.1 2 8.2 2 5 4.5 2.5 7.7 2.5c1.8 0 3.5.8 4.3 2.1.8-1.3 2.5-2.1 4.3-2.1C19.5 2.5 22 5 22 8.2c0 3.9-3.5 7.1-8.7 11.8L12 21.1Z"/></svg>
        </label>
      </div>
      <div class="caption"><span class="before">Go on, tap the heart ↑</span><span class="after">A little love goes a long way ♥</span></div>
      <div class="divider"></div>
      <div class="footer"><span class="dot">♥</span> A little joy, made with CSS</div>
    </section>
    <p class="note">Click again to reset &amp; spread more love.</p>
  </main>
</body>
</html>

Reasoning trace (49 tokens)

**Creating CSS animations**

I’m thinking about how to make a pure CSS checkbox animation. I want to design a polished, centered card with a background, adding burst particles through pseudo-elements and spans. I'll need to incorporate the checkbox's checked animation, maybe using a heart SVG. I wonder if I can use a character for the heart or go with an inline SVG. I should also consider animating the checked selectors and allowing toggles to replay! Layout will be very important too.