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: 48.1 s
Cost: $0.022
Output tokens: 4,229
Spent thinking: 0 tokens
Speed: 90.7 tok/s
Console errors: 0

First token after: 1.5 s
First visible text after: 1.5 s
Prompt tokens: 356
Code size: 11.2 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: {"effort":"none"}
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 · 362 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Little Like, Big Feeling</title>
<style>
  @import url('data:text/css,');
  * { box-sizing: border-box; }
  :root {
    --ink: #262126;
    --pink: #ff4e87;
    --cream: #faf7f2;
  }
  html, body { margin: 0; min-height: 100%; }
  body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--cream);
    color: var(--ink);
    font-family: "Trebuchet MS", Arial, sans-serif;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    background-image: radial-gradient(#d8cfc6 0.7px, transparent 0.7px);
    background-size: 7px 7px;
  }
  .page {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 31px 48px 28px;
  }
  .topbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #827a77;
  }
  .brand { display: flex; align-items: center; gap: 9px; color: #342b30; }
  .brand-mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: #292327;
    color: #fff;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
  }
  main {
    width: min(100%, 830px);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 35px 0 55px;
  }
  .eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: .2em;
    font-weight: 700;
    color: #f04b7c;
    text-transform: uppercase;
  }
  .eyebrow::before, .eyebrow::after {
    content: "";
    width: 25px;
    height: 1px;
    background: #f3a8bd;
  }
  h1 {
    margin: 20px 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 6.3vw, 82px);
    letter-spacing: -.065em;
    line-height: .98;
    font-weight: 400;
  }
  h1 em { color: #f25583; font-weight: 400; }
  .intro {
    margin: 0;
    color: #8a8080;
    font-size: 14px;
    line-height: 1.6;
  }
  .stage {
    position: relative;
    width: min(100%, 630px);
    height: 305px;
    margin-top: 18px;
    display: grid;
    place-items: center;
  }
  .stage::before {
    content: "";
    position: absolute;
    width: 244px;
    height: 244px;
    border: 1px dashed #eadbd6;
    border-radius: 50%;
  }
  .stage::after {
    content: "";
    position: absolute;
    width: 198px;
    height: 198px;
    border: 1px solid #f1e5df;
    border-radius: 50%;
  }
  .decor {
    position: absolute;
    color: #d9cbc5;
    font-family: Georgia, serif;
    user-select: none;
  }
  .d1 { left: 15%; top: 26%; font-size: 24px; transform: rotate(-14deg); }
  .d2 { right: 15%; top: 27%; font-size: 19px; color: #f6b9c8; }
  .d3 { left: 22%; bottom: 20%; font-size: 13px; color: #f2a8bd; }
  .d4 { right: 22%; bottom: 20%; font-size: 24px; transform: rotate(18deg); }
  .d5 { top: 5%; left: 49%; font-size: 12px; color: #efafbd; }
  .like-control {
    position: relative;
    z-index: 2;
    width: 184px;
    height: 68px;
  }
  .like-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
  .button {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    border: 1px solid #e4d5d2;
    border-radius: 50px;
    background: #fffdfb;
    box-shadow: 0 8px 0 #f1e7e1, 0 18px 30px rgba(104, 66, 69, .11);
    cursor: pointer;
    user-select: none;
    transition: background .25s, border-color .25s, box-shadow .25s, transform .18s;
    -webkit-tap-highlight-color: transparent;
  }
  .button:hover { transform: translateY(-3px); box-shadow: 0 11px 0 #f1e7e1, 0 22px 35px rgba(104, 66, 69, .15); }
  .button:active { transform: translateY(4px) scale(.96); box-shadow: 0 3px 0 #f1e7e1, 0 8px 15px rgba(104, 66, 69, .1); }
  input:focus-visible + .button { outline: 3px solid #ff97b5; outline-offset: 6px; }
  .heart {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #f25583;
    stroke-width: 1.8;
    overflow: visible;
  }
  .button-text { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
  .liked-text { display: none; }
  .count {
    padding-left: 11px;
    border-left: 1px solid #eee0dc;
    color: #ae9d9b;
    font-family: monospace;
    font-size: 11px;
  }
  .count::after { content: "99"; }
  input:checked + .button {
    background: #ff4e87;
    border-color: #ff4e87;
    color: white;
    box-shadow: 0 8px 0 #de3a70, 0 19px 35px rgba(244, 67, 124, .28);
    animation: button-pop .75s cubic-bezier(.2, 1.6, .4, 1) both;
  }
  input:checked + .button .heart { fill: #fff; stroke: #fff; animation: heart-pop .8s both; }
  input:checked + .button .unliked-text { display: none; }
  input:checked + .button .liked-text { display: inline; }
  input:checked + .button .count { color: #ffd7e3; border-color: #ff8aaf; }
  input:checked + .button .count::after { content: "100"; }
  .burst {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .ring {
    position: absolute;
    width: 80px;
    height: 80px;
    left: -40px;
    top: -40px;
    border: 4px solid #ff7fa5;
    border-radius: 50%;
    opacity: 0;
  }
  .particle {
    position: absolute;
    left: -10px;
    top: -12px;
    color: var(--c);
    font-size: var(--s);
    font-family: Arial, sans-serif;
    line-height: 1;
    opacity: 0;
    transform: translate(0, 0) scale(.1);
  }
  input:checked ~ .burst .ring { animation: ring-out .8s ease-out both; }
  input:checked ~ .burst .particle { animation: explode 1.25s cubic-bezier(.12,.65,.25,1) var(--delay, 0s) both; }
  .p1  { --x:-145px; --y:-85px; --r:-25deg; --s:27px; --c:#ff4e87; }
  .p2  { --x:-105px; --y:-130px; --r:35deg; --s:16px; --c:#ffbd4c; --delay:.03s; }
  .p3  { --x:-50px; --y:-115px; --r:-35deg; --s:19px; --c:#aa8ef4; --delay:.02s; }
  .p4  { --x:12px; --y:-145px; --r:20deg; --s:28px; --c:#ff719d; --delay:.06s; }
  .p5  { --x:72px; --y:-119px; --r:35deg; --s:18px; --c:#ffbd4c; }
  .p6  { --x:130px; --y:-88px; --r:25deg; --s:24px; --c:#ff4e87; --delay:.04s; }
  .p7  { --x:164px; --y:-30px; --r:60deg; --s:17px; --c:#a78bf1; --delay:.02s; }
  .p8  { --x:151px; --y:44px; --r:20deg; --s:25px; --c:#ff8da9; --delay:.03s; }
  .p9  { --x:108px; --y:100px; --r:-30deg; --s:17px; --c:#ffbd4c; --delay:.06s; }
  .p10 { --x:47px; --y:125px; --r:40deg; --s:25px; --c:#ff4e87; }
  .p11 { --x:-20px; --y:132px; --r:-20deg; --s:15px; --c:#a98bf0; --delay:.03s; }
  .p12 { --x:-80px; --y:112px; --r:30deg; --s:24px; --c:#ff83a4; --delay:.05s; }
  .p13 { --x:-139px; --y:68px; --r:-30deg; --s:17px; --c:#ffbd4c; --delay:.02s; }
  .p14 { --x:-171px; --y:0px; --r:30deg; --s:23px; --c:#a98bf0; --delay:.04s; }
  .p15 { --x:85px; --y:-75px; --r:50deg; --s:12px; --c:#ffb25e; --delay:.08s; }
  .p16 { --x:-85px; --y:55px; --r:-50deg; --s:13px; --c:#ff4e87; --delay:.08s; }
  @keyframes explode {
    0% { opacity: 0; transform: translate(0, 0) scale(.1) rotate(0); }
    12% { opacity: 1; }
    55% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.15) rotate(var(--r)); }
  }
  @keyframes ring-out {
    0% { opacity: .8; transform: scale(.3); border-width: 8px; }
    100% { opacity: 0; transform: scale(3.2); border-width: 1px; }
  }
  @keyframes button-pop {
    0% { transform: scale(.82); }
    35% { transform: scale(1.2) rotate(-4deg); }
    55% { transform: scale(.94) rotate(3deg); }
    75% { transform: scale(1.05) rotate(-1deg); }
    100% { transform: scale(1) rotate(0); }
  }
  @keyframes heart-pop {
    0% { transform: scale(.4); }
    40% { transform: scale(1.7) rotate(-20deg); }
    70% { transform: scale(.85) rotate(10deg); }
    100% { transform: scale(1) rotate(0); }
  }
  .hint {
    margin-top: -5px;
    color: #b2a5a1;
    font-family: monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .13em;
  }
  .hint span { color: #ed7899; font-size: 14px; vertical-align: -1px; }
  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    color: #a99d98;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .bottom strong { color: #6a5d5d; font-weight: 700; }
  .bottom-right { text-align: right; }
  @media (max-width: 550px) {
    .page { padding: 24px 23px; }
    .topbar { font-size: 9px; }
    main { padding: 35px 0; }
    h1 { font-size: clamp(46px, 12vw, 62px); }
    .intro { font-size: 13px; }
    .stage { height: 275px; }
    .d1 { left: 4%; } .d2 { right: 4%; }
    .d3 { left: 10%; } .d4 { right: 10%; }
    .bottom { font-size: 9px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
</style>
</head>
<body>
<div class="page">
  <header class="topbar">
    <div class="brand"><span class="brand-mark">♥</span> THE JOY DEPARTMENT</div>
    <div>INTERACTION NO. 01</div>
  </header>

  <main>
    <div class="eyebrow">A little moment of joy</div>
    <h1>Go on, <em>show some love.</em></h1>
    <p class="intro">A small click can make a big little moment.</p>

    <div class="stage">
      <span class="decor d1">✳</span>
      <span class="decor d2">✦</span>
      <span class="decor d3">♥</span>
      <span class="decor d4">✧</span>
      <span class="decor d5">✦</span>

      <div class="like-control">
        <input type="checkbox" id="like" aria-label="Like">
        <label class="button" for="like">
          <svg class="heart" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20.8 4.9a5.5 5.5 0 0 0-7.8 0l-1 1-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.3 1-1a5.5 5.5 0 0 0 0-7.8Z" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span class="button-text"><span class="unliked-text">Like</span><span class="liked-text">Liked!</span></span>
          <span class="count"></span>
        </label>
        <div class="burst" aria-hidden="true">
          <span class="ring"></span>
          <span class="particle p1">♥</span><span class="particle p2">✦</span>
          <span class="particle p3">●</span><span class="particle p4">♥</span>
          <span class="particle p5">✳</span><span class="particle p6">♥</span>
          <span class="particle p7">✦</span><span class="particle p8">♥</span>
          <span class="particle p9">✳</span><span class="particle p10">♥</span>
          <span class="particle p11">●</span><span class="particle p12">♥</span>
          <span class="particle p13">✦</span><span class="particle p14">✳</span>
          <span class="particle p15">●</span><span class="particle p16">✦</span>
        </div>
      </div>
    </div>
    <div class="hint"><span>↗</span> TAP THE BUTTON &amp; FEEL THE LOVE</div>
  </main>

  <footer class="bottom">
    <div><strong>MADE WITH ♥</strong><br>AND A LITTLE CSS MAGIC</div>
    <div class="bottom-right">A TINY INTERACTION<br><strong>FOR BIG FEELINGS</strong></div>
  </footer>
</div>
</body>
</html>