Exploding like buttonOne-line
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 37 s
- Cost
- $0.041
- Output tokens
- 8,171
- Spent thinking
- 2,588 tokens
- Speed
- 90.3 tok/s
- Console errors
- 0
- First token after
- 6.7 s
- First visible text after
- 53.6 s
- Prompt tokens
- 356
- Code size
- 16.0 KB
- Finish reason
- stop
- Served by
- OpenAI
- Model id
openai/gpt-6.1-terra- Reasoning sent
{"effort":"high"}- 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 · 607 lines
<!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>
:root {
color-scheme: dark;
--ink: #28172f;
--pink: #ff4f91;
--cream: #fff6f2;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
min-height: 100vh;
overflow-x: hidden;
color: var(--cream);
background:
radial-gradient(ellipse at 78% 48%, rgba(134, 49, 101, .22), transparent 34%),
radial-gradient(ellipse at 15% 83%, rgba(93, 48, 111, .23), transparent 33%),
#201628;
font-family: Arial, Helvetica, sans-serif;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: .14;
background-image: radial-gradient(rgba(255,255,255,.24) .7px, transparent .7px);
background-size: 6px 6px;
}
.page {
position: relative;
max-width: 1320px;
min-height: 100vh;
padding: 32px 72px 25px;
margin: auto;
display: flex;
flex-direction: column;
}
.header, .footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.brand {
display: flex;
align-items: center;
gap: 11px;
font-size: 11px;
font-weight: 800;
letter-spacing: .17em;
line-height: 1.35;
}
.brand-mark {
display: grid;
place-items: center;
width: 39px;
height: 39px;
border: 1px solid rgba(255,255,255,.35);
border-radius: 50%;
color: #ff8db2;
font-size: 22px;
letter-spacing: 0;
}
.header-note {
display: flex;
align-items: center;
gap: 9px;
color: #b6a5b7;
font-size: 10px;
font-weight: 700;
letter-spacing: .17em;
}
.header-note::before {
content: "";
width: 7px;
height: 7px;
background: #ff6c9e;
border-radius: 50%;
box-shadow: 0 0 12px #ff6c9e;
}
main {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(400px, 480px);
align-items: center;
gap: clamp(40px, 7vw, 105px);
padding: 35px 0;
}
.intro { max-width: 570px; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 13px;
border: 1px solid rgba(255, 145, 180, .25);
border-radius: 50px;
color: #f5a2be;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
}
.eyebrow span { font-size: 14px; line-height: 0; }
h1 {
margin: 27px 0 21px;
font-size: clamp(56px, 6vw, 82px);
line-height: .99;
letter-spacing: -.065em;
font-weight: 750;
}
h1 em {
color: #ff83ad;
font-family: Georgia, "Times New Roman", serif;
font-weight: 400;
letter-spacing: -.07em;
}
.description {
max-width: 370px;
color: #c8b8c8;
font-size: 15px;
line-height: 1.8;
}
.intro-bottom {
display: flex;
align-items: center;
gap: 14px;
margin-top: 42px;
color: #a99aaa;
font-size: 11px;
line-height: 1.55;
}
.intro-bottom .number {
display: grid;
place-items: center;
width: 43px;
height: 43px;
border: 1px solid rgba(255,255,255,.2);
border-radius: 50%;
color: #f6dce7;
font-family: Georgia, serif;
font-style: italic;
font-size: 16px;
}
.intro-bottom strong {
display: block;
color: #f2e7ec;
font-size: 11px;
letter-spacing: .05em;
}
.machine {
position: relative;
width: 100%;
min-width: 0;
overflow: hidden;
border: 1px solid rgba(255,255,255,.7);
border-radius: 24px;
color: var(--ink);
background: #fff4f5;
box-shadow: 0 35px 80px rgba(7, 1, 15, .28), 0 4px 15px rgba(0,0,0,.08);
}
.machine-top {
height: 67px;
padding: 0 25px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #eedce2;
}
.machine-title {
font-size: 10px;
font-weight: 800;
letter-spacing: .17em;
}
.machine-title span {
color: #ef5e94;
margin-right: 7px;
font-size: 14px;
}
.machine-edition {
color: #ac8f9d;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
}
.love-control {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.playfield {
position: relative;
height: 345px;
overflow: hidden;
background:
radial-gradient(circle at 50% 43%, rgba(255, 177, 205, .45), transparent 40%),
linear-gradient(180deg, #fff5f7, #fff0f3);
}
.orbit {
position: absolute;
left: 50%;
top: 43%;
border: 1px solid rgba(224, 151, 178, .32);
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.orbit.one { width: 220px; height: 220px; }
.orbit.two { width: 300px; height: 300px; border-style: dashed; opacity: .7; }
.orbit.three { width: 365px; height: 365px; opacity: .45; }
.orbit.one::after, .orbit.two::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: #f58ab0;
}
.orbit.one::after { top: 22px; right: 28px; }
.orbit.two::after { bottom: 50px; left: 16px; width: 5px; height: 5px; }
.decoration {
position: absolute;
color: #ed8bab;
font-family: Georgia, serif;
user-select: none;
}
.decoration.a { left: 16%; top: 24%; font-size: 22px; transform: rotate(-15deg); }
.decoration.b { right: 15%; top: 19%; font-size: 27px; color: #f3a8c0; }
.decoration.c { left: 20%; bottom: 27%; font-size: 17px; color: #e9adc2; }
.decoration.d { right: 17%; bottom: 31%; font-size: 20px; transform: rotate(15deg); }
.like-button {
position: absolute;
z-index: 3;
left: 50%;
top: 43%;
width: 146px;
height: 146px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
cursor: pointer;
user-select: none;
transform: translate(-50%, -50%);
background: linear-gradient(145deg, #ff83ae 0%, #f63e83 50%, #df2870 100%);
box-shadow:
0 16px 25px rgba(218, 50, 115, .25),
0 5px 0 #d83d77,
inset 0 2px 3px rgba(255,255,255,.55),
inset 0 -6px 12px rgba(183, 24, 87, .12);
transition: filter .2s, box-shadow .2s;
-webkit-tap-highlight-color: transparent;
}
.like-button:hover {
filter: brightness(1.06);
box-shadow: 0 20px 35px rgba(218, 50, 115, .35), 0 5px 0 #d83d77, inset 0 2px 3px rgba(255,255,255,.55);
}
.like-button::before {
content: "";
position: absolute;
inset: 7px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 50%;
}
.like-button::after {
content: "";
position: absolute;
width: 30px;
height: 9px;
left: 31px;
top: 24px;
transform: rotate(-35deg);
border-radius: 50%;
background: rgba(255,255,255,.32);
filter: blur(2px);
}
.heart {
position: relative;
top: -2px;
color: white;
font-family: Arial, sans-serif;
font-size: 79px;
line-height: 1;
text-shadow: 0 4px 2px rgba(153, 22, 75, .13);
}
.love-control:focus-visible ~ .playfield .like-button {
outline: 4px solid #5e3164;
outline-offset: 6px;
}
.instruction {
position: absolute;
left: 0;
right: 0;
bottom: 28px;
text-align: center;
color: #b6718b;
font-size: 10px;
font-weight: 800;
letter-spacing: .19em;
}
.instruction .on, .count .on, .meter-copy .on { display: none; }
.love-control:checked ~ .playfield .instruction .off,
.love-control:checked ~ .machine-bottom .off { display: none; }
.love-control:checked ~ .playfield .instruction .on,
.love-control:checked ~ .machine-bottom .on { display: inline; }
.machine-bottom {
min-height: 105px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 27px;
border-top: 1px solid #eedce2;
background: rgba(255, 252, 251, .85);
}
.meter-title {
margin-bottom: 8px;
font-size: 10px;
font-weight: 800;
letter-spacing: .15em;
}
.meter-copy {
color: #a48a97;
font-size: 12px;
}
.count {
display: flex;
align-items: center;
gap: 7px;
color: #533044;
font-size: 19px;
font-weight: 800;
}
.count-heart { color: #f35d93; font-size: 22px; }
.particle {
position: absolute;
z-index: 4;
left: 50%;
top: 43%;
width: 10px;
height: 10px;
opacity: 0;
pointer-events: none;
background: var(--color, #ff5c96);
border-radius: var(--radius, 50%);
}
.particle.star {
width: 17px;
height: 17px;
background: var(--color, #ff5c96);
clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.particle.confetti { width: 8px; height: 15px; border-radius: 2px; }
.shockwave {
position: absolute;
z-index: 2;
left: 50%;
top: 43%;
width: 146px;
height: 146px;
border: 4px solid #fb6c9e;
border-radius: 50%;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%);
}
.love-control:checked ~ .playfield .like-button {
animation: button-pop 1.05s cubic-bezier(.2, .8, .2, 1) both;
}
.love-control:checked ~ .playfield .heart {
animation: heart-pop 1.1s ease both;
}
.love-control:checked ~ .playfield .particle {
animation: burst 1.15s cubic-bezier(.12, .65, .2, 1) var(--delay, 0s) both;
}
.love-control:checked ~ .playfield .shockwave {
animation: wave .8s ease-out both;
}
.love-control:checked ~ .playfield .shockwave.second {
animation: wave .9s .15s ease-out both;
}
.love-control:checked ~ .machine-bottom .count {
animation: count-pop .5s .2s both;
}
@keyframes button-pop {
0% { transform: translate(-50%, -50%) scale(1); }
16% { transform: translate(-50%, -50%) scale(.75) rotate(-12deg); }
38% { transform: translate(-50%, -50%) scale(1.23) rotate(12deg); }
53% { transform: translate(-50%, -50%) scale(.91) rotate(-9deg); }
70% { transform: translate(-50%, -50%) scale(1.09) rotate(5deg); }
85% { transform: translate(-50%, -50%) scale(.97) rotate(-2deg); }
100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes heart-pop {
0%, 100% { transform: scale(1); }
25% { transform: scale(.75); }
45% { transform: scale(1.22); }
65% { transform: scale(.9); }
80% { transform: scale(1.1); }
}
@keyframes burst {
0% { opacity: 1; transform: translate(-50%, -50%) scale(.2) rotate(0); }
20% { opacity: 1; }
75% { opacity: 1; }
100% {
opacity: 0;
transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.8) rotate(var(--r, 180deg));
}
}
@keyframes wave {
0% { opacity: .8; transform: translate(-50%, -50%) scale(.8); border-width: 5px; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); border-width: 1px; }
}
@keyframes count-pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); color: #ee4784; }
100% { transform: scale(1); }
}
.footer {
color: #8e7f91;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
}
.footer span:last-child { color: #ba9dab; }
@media (max-width: 800px) {
.page { padding: 25px 28px; }
main { gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(330px, 400px); }
h1 { font-size: clamp(48px, 7vw, 64px); }
.intro-bottom { margin-top: 25px; }
}
@media (max-width: 650px) {
.page { padding: 20px 20px 25px; }
.header-note { font-size: 9px; }
main { display: flex; flex-direction: column; align-items: stretch; gap: 25px; padding: 35px 0 25px; }
.intro { max-width: none; }
.eyebrow { font-size: 9px; padding: 8px 11px; }
h1 { margin: 16px 0 10px; font-size: clamp(45px, 11vw, 62px); }
.description { margin: 0; font-size: 13px; line-height: 1.6; }
.intro-bottom { display: none; }
.machine { max-width: 480px; align-self: center; }
.machine-top { height: 56px; }
.playfield { height: 300px; }
.machine-bottom { min-height: 88px; }
.orbit.three { width: 330px; height: 330px; }
.footer { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}
</style>
</head>
<body>
<div class="page">
<header class="header">
<div class="brand">
<div class="brand-mark">♥</div>
<div>THE GOOD<br>FEELING CLUB</div>
</div>
<div class="header-note">A TINY INTERACTION</div>
</header>
<main>
<section class="intro">
<div class="eyebrow"><span>✳</span> A LITTLE EXPERIMENT IN JOY</div>
<h1>A little click.<br>A lot of <em>love.</em></h1>
<p class="description">Some things are just too good to scroll past. Go ahead, give that heart a little tap.</p>
<div class="intro-bottom">
<div class="number">01</div>
<div><strong>THE LIKE EXPERIMENT</strong>Made with a little love & pure CSS.</div>
</div>
</section>
<section class="machine" aria-label="Interactive like button">
<input class="love-control" id="love" type="checkbox" aria-label="Like this">
<div class="machine-top">
<div class="machine-title"><span>✳</span> THE LOVE MACHINE</div>
<div class="machine-edition">NO. 001 / 001</div>
</div>
<div class="playfield">
<div class="orbit one"></div>
<div class="orbit two"></div>
<div class="orbit three"></div>
<span class="decoration a">✳</span>
<span class="decoration b">✦</span>
<span class="decoration c">♥</span>
<span class="decoration d">✧</span>
<div class="shockwave"></div>
<div class="shockwave second"></div>
<span class="particle star" style="--x:-155px;--y:-100px;--r:-150deg;--color:#f25b94"></span>
<span class="particle confetti" style="--x:-106px;--y:-139px;--r:230deg;--color:#ffad5e;--delay:.03s"></span>
<span class="particle" style="--x:-55px;--y:-150px;--r:100deg;--color:#dd79d2"></span>
<span class="particle star" style="--x:17px;--y:-145px;--r:150deg;--color:#f28eaf;--delay:.04s"></span>
<span class="particle confetti" style="--x:80px;--y:-137px;--r:-230deg;--color:#f45e95"></span>
<span class="particle star" style="--x:145px;--y:-100px;--r:210deg;--color:#f7a55b;--delay:.02s"></span>
<span class="particle" style="--x:165px;--y:-40px;--r:90deg;--color:#bd7bd2"></span>
<span class="particle confetti" style="--x:155px;--y:30px;--r:260deg;--color:#f26b9b;--delay:.04s"></span>
<span class="particle star" style="--x:135px;--y:105px;--r:-180deg;--color:#ec87ac"></span>
<span class="particle" style="--x:77px;--y:135px;--r:100deg;--color:#ffad5e;--delay:.02s"></span>
<span class="particle confetti" style="--x:12px;--y:151px;--r:240deg;--color:#db78bd"></span>
<span class="particle star" style="--x:-64px;--y:138px;--r:-170deg;--color:#f35a91;--delay:.03s"></span>
<span class="particle" style="--x:-135px;--y:100px;--r:90deg;--color:#ffb064"></span>
<span class="particle confetti" style="--x:-165px;--y:34px;--r:-220deg;--color:#c580d0;--delay:.03s"></span>
<span class="particle star" style="--x:-170px;--y:-35px;--r:180deg;--color:#fa90b4"></span>
<label class="like-button" for="love" title="Click to like">
<span class="heart" aria-hidden="true">♥</span>
</label>
<div class="instruction">
<span class="off">↑ CLICK THE HEART ↑</span>
<span class="on">✦ THAT'S THE SPIRIT! ✦</span>
</div>
</div>
<div class="machine-bottom">
<div>
<div class="meter-title">THE LOVE METER</div>
<div class="meter-copy">
<span class="off">A little love goes a long way.</span>
<span class="on">You made the world a little brighter.</span>
</div>
</div>
<div class="count"><span class="count-heart">♥</span><span class="off">128</span><span class="on">129</span></div>
</div>
</section>
</main>
<footer class="footer">
<span>SPREAD GOOD FEELINGS.</span>
<span>DESIGNED TO MAKE YOU SMILE ♥</span>
</footer>
</div>
</body>
</html>Reasoning trace (2,588 tokens)
**Creating engaging CSS design** I'm focused on outputting a single HTML with pure CSS, avoiding JavaScript. I want to create a visually compelling screenshot, particularly with a click-trigger animation for a button and checkbox label. The design needs to be polished and responsive at 1280x800, making the initial screen engaging, perhaps with hearts and decorative elements. I aim to ensure continuous ambient animations to keep it dynamic, like particles and heart effects, all while centering the button and avoiding external fonts.**Designing an interactive layout** I’m thinking about creating a layout with an outer dark navy background complemented by grainy gradients and a giant blurred background. The header would feature a small logo reading "LOVE LAB" alongside a label indicating "CSS ONLY / INTERACTIVE EXPERIMENT." For the main content, I want a striking two-column design with a central button for a 'like' feature, highlighted with pink accents. The overall goal is a polished desktop design centered in an 1100x650 card, aiming for visual impact and interactivity.**Designing an interactive card** I'm envisioning an interactive white card featuring a large heart button, surrounded by circular rings and confetti, with the instruction "PRESS THE HEART." The button needs to be functional, with a clear label underneath and a count indicating social metrics. I'm focusing on creating a canvas card panel against a dark background for a soft white paper look. Accessibility is key, so I’ll ensure the button works with keyboard inputs, using CSS for siblings and visually hidden checkboxes to maintain a clean design.**Ensuring input accessibility** I need to ensure that there are no cursor issues, especially regarding keyboard input using the checkbox tab and space keys. It's important to make sure that focus is visible on the sibling elements within the `.playfield` class, specifically the `.like-button`. This attention to detail is crucial for accessibility, so I'm keen to get this right! It’s always better to double-check and make sure everything works smoothly for users.**Adjusting UI Elements** I’m focusing on setting the hero text smaller and above the card, with margins and sizing calculations that fit mobile screens. It looks like I need to hide the footer on mobile and implement fallback fonts for better typography. I want to create a visually appealing design with distinct elements like a pink serif italic font, and ensure responsive dimensions. I also need to check selectors for functionality and accessibility, using the right inclusive labels for inputs.**Ensuring UI Functionality** I'm checking to confirm that the like-button works smoothly without any JavaScript involved. It seems like I can use pure CSS for all the controls, which is nice! I’m considering implementing pseudo-elements for additional design elements, like line and radial rings, to enhance the button's visual appeal. This approach keeps things clean and efficient while still achieving the desired functionality. I want to ensure everything operates seamlessly for the user.