Exploding like buttonOne-line

Muse Ember

by MetaReasoningClean

Open in new window

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

How it went

Total time: 7.1 s
Cost: $0.0022
Output tokens: 4,376
Spent thinking: 216 tokens
Speed: 813.7 tok/s
Console errors: 0

First token after: 1.8 s
First visible text after: 1.8 s
Prompt tokens: 374
Code size: 11.7 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"minimal"}
Max output: 943,718 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 · 181 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LIKE — Pure CSS Crazy Animation</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background:#0f0c29;background:linear-gradient(135deg,#0f0c29 0%,#302b63 48%,#24243e 100%);
    color:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:100vh;
    -webkit-tap-highlight-color:transparent;
  }
  /* ambient blobs */
  .blob{position:fixed;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;animation:drift 10s ease-in-out infinite alternate}
  .b1{width:340px;height:340px;background:#ff2e63;left:-80px;top:-80px}
  .b2{width:300px;height:300px;background:#08d9d6;right:-60px;bottom:-60px;animation-delay:-3s}
  .b3{width:200px;height:200px;background:#f9ed69;left:55%;top:8%;animation-delay:-6s;opacity:.35}
  @keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,50px) scale(1.15)}}

  .stage{text-align:center;position:relative;z-index:2;padding:20px;width:100%;max-width:640px}
  .badge{display:inline-block;font-size:11px;letter-spacing:.35em;font-weight:800;padding:8px 14px;border:1px solid rgba(255,255,255,.22);border-radius:20px;background:rgba(255,255,255,.08);backdrop-filter:blur(6px);text-transform:uppercase;color:#cbd5ff}
  h1{font-size:clamp(36px,7vw,64px);line-height:.95;letter-spacing:-.03em;margin:16px 0 8px;font-weight:900}
  h1 em{font-style:normal;background:linear-gradient(90deg,#ff2e63,#ff9a3d,#f9ed69,#08d9d6,#a259ff);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sub{color:#b8c0e8;font-size:15px;line-height:1.5;max-width:460px;margin:0 auto}
  .code{margin:16px auto 4px;display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}
  .code span{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);padding:6px 9px;border-radius:8px;color:#ffd166}

  /* ===== THE BUTTON ===== */
  .wrap{position:relative;width:280px;height:280px;margin:14px auto 6px;display:grid;place-items:center}
  input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

  label.btn{
    position:relative;display:grid;place-items:center;width:190px;height:190px;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.14);
    box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2);
    backdrop-filter:blur(8px);transition:transform .18s, background .3s, border-color .3s;
    user-select:none;-webkit-user-select:none;
  }
  label.btn:hover{transform:scale(1.05) rotate(-1deg)}
  label.btn:active{transform:scale(.92)}

  /* rings */
  .ring{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);opacity:0}
  .r1{width:190px;height:190px;border:3px solid #ff2e63}
  .r2{width:190px;height:190px;border:3px dashed #08d9d6}
  .r3{width:190px;height:190px;border:5px solid #f9ed69}

  /* HEART */
  .heart{
    width:92px;height:92px;position:relative;filter:drop-shadow(0 10px 18px rgba(255,46,99,.45));
    transition:filter .3s;animation:beat 1.6s ease-in-out infinite;
  }
  @keyframes beat{0%,100%{transform:scale(1)}25%{transform:scale(1.08)}45%{transform:scale(.96)}60%{transform:scale(1.06)}}
  .heart svg{width:100%;height:100%;display:block;overflow:visible}
  .heart path{fill:#8a93b8;stroke:rgba(255,255,255,.25);stroke-width:1.2;transition:fill .25s}
  .shine{position:absolute;left:18%;top:12%;width:26%;height:18%;background:rgba(255,255,255,.35);border-radius:50%;transform:rotate(-20deg);filter:blur(2px)}

  /* particles */
  .p{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:3px;opacity:0;pointer-events:none;z-index:3}
  .p.circle{border-radius:50%}
  .p.heartp{width:18px;height:18px;background:none!important;opacity:0}
  .p.heartp svg{width:100%;height:100%}

  /* label text under heart */
  .word{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-weight:900;letter-spacing:.22em;font-size:13px;color:#aeb6d6;transition:color .3s}
  .word .off{display:inline}
  .word .on{display:none;color:#fff}

  /* ===== CHECKED STATE — CRAZY ===== */
  input:checked ~ label.btn{
    background:radial-gradient(circle at 35% 30%, #ff7aa2, #ff2e63 55%, #c9184a);
    border-color:#ffb3c6;
    animation:btnPop .65s cubic-bezier(.68,-.55,.27,1.55) both, hueSpin .9s linear both;
  }
  @keyframes btnPop{0%{transform:scale(1)}35%{transform:scale(1.22) rotate(6deg)}55%{transform:scale(.88) rotate(-6deg)}75%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1.06)}}
  @keyframes hueSpin{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}

  input:checked ~ label .heart{animation:heartCrazy .7s cubic-bezier(.68,-.55,.27,1.55) both;filter:drop-shadow(0 0 22px rgba(255,255,255,.9)) drop-shadow(0 10px 18px rgba(0,0,0,.3))}
  @keyframes heartCrazy{
    0%{transform:scale(1) rotate(0)}
    25%{transform:scale(1.55) rotate(-14deg)}
    45%{transform:scale(.8) rotate(12deg)}
    65%{transform:scale(1.35) rotate(-8deg)}
    82%{transform:scale(1.05) rotate(4deg)}
    100%{transform:scale(1.18) rotate(0)}
  }
  input:checked ~ label .heart path{fill:#fff}
  input:checked ~ label .word .off{display:none}
  input:checked ~ label .word .on{display:inline}

  input:checked ~ label .r1{animation:ringGo .8s ease-out both}
  input:checked ~ label .r2{animation:ringGo .8s .12s ease-out both}
  input:checked ~ label .r3{animation:ringGo .8s .24s ease-out both}
  @keyframes ringGo{0%{opacity:1;transform:translate(-50%,-50%) scale(.9) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6) rotate(180deg)}}

  /* particle trajectories — 16 directions */
  input:checked ~ label .p{animation:burst .85s cubic-bezier(.17,.89,.32,1) both}
  input:checked ~ label .p:nth-of-type(1){background:#ff2e63;animation-delay:0s;--x:-120px;--y:-115px}
  input:checked ~ label .p:nth-of-type(2){background:#f9ed69;animation-delay:.02s;--x:0px;--y:-140px}
  input:checked ~ label .p:nth-of-type(3){background:#08d9d6;animation-delay:.04s;--x:120px;--y:-115px}
  input:checked ~ label .p:nth-of-type(4){background:#a259ff;animation-delay:.01s;--x:140px;--y:0px}
  input:checked ~ label .p:nth-of-type(5){background:#ff9a3d;animation-delay:.03s;--x:120px;--y:115px}
  input:checked ~ label .p:nth-of-type(6){background:#ff2e63;animation-delay:.05s;--x:0px;--y:140px}
  input:checked ~ label .p:nth-of-type(7){background:#06d6a0;animation-delay:.02s;--x:-120px;--y:115px}
  input:checked ~ label .p:nth-of-type(8){background:#118ab2;animation-delay:.04s;--x:-140px;--y:0px}
  input:checked ~ label .p:nth-of-type(9){background:#ef476f;animation-delay:.06s;--x:-70px;--y:-118px}
  input:checked ~ label .p:nth-of-type(10){background:#ffd166;animation-delay:.07s;--x:70px;--y:-118px}
  input:checked ~ label .p:nth-of-type(11){background:#a259ff;animation-delay:.06s;--x:118px;--y:70px}
  input:checked ~ label .p:nth-of-type(12){background:#08d9d6;animation-delay:.08s;--x:118px;--y:-70px}
  input:checked ~ label .p:nth-of-type(13){background:#ff9a3d;animation-delay:.07s;--x:-118px;--y:70px}
  input:checked ~ label .p:nth-of-type(14){background:#06d6a0;animation-delay:.05s;--x:-118px;--y:-70px}
  input:checked ~ label .p:nth-of-type(15){background:#f9ed69;animation-delay:.09s;--x:70px;--y:118px}
  input:checked ~ label .p:nth-of-type(16){background:#ff2e63;animation-delay:.08s;--x:-70px;--y:118px}
  @keyframes burst{
    0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
    60%{opacity:1;transform:translate(var(--x),var(--y)) rotate(320deg) scale(1.2)}
    100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 42px)) rotate(560deg) scale(.4)}
  }
  input:checked ~ label .heartp{animation:burst .95s .05s both}

  /* floating mini hearts after like */
  .float{position:absolute;left:50%;top:18%;font-size:20px;opacity:0;pointer-events:none}
  input:checked ~ label .f1{animation:floatUp 1.1s .15s ease-out both}
  input:checked ~ label .f2{animation:floatUp 1.1s .28s ease-out both;left:58%}
  input:checked ~ label .f3{animation:floatUp 1.1s .4s ease-out both;left:42%}
  @keyframes floatUp{0%{opacity:0;transform:translateY(10px) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translateY(-95px) scale(1.25) rotate(14deg)}}

  .hint{margin-top:10px;color:#8f99c4;font-size:13px}
  .hint b{color:#fff;background:#ff2e63;padding:3px 8px;border-radius:20px;font-size:12px;letter-spacing:.06em}
  .status{margin-top:12px;font-weight:800;letter-spacing:.14em;font-size:12px;color:#8f99c4;text-transform:uppercase}
  .status .yes{display:none;color:#06d6a0}
  .status .no{display:inline}
  input:checked ~ .status .yes{display:inline}
  input:checked ~ .status .no{display:none}

  /* confetti rays behind button when liked */
  .rays{position:absolute;inset:-22px;border-radius:50%;opacity:0;pointer-events:none;background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.14) 0 10deg, transparent 10deg 22deg)}
  input:checked ~ label .rays{animation:raysGo 1s ease-out both}
  @keyframes raysGo{0%{opacity:1;transform:scale(.8) rotate(0)}100%{opacity:0;transform:scale(1.7) rotate(70deg)}}
  input:focus-visible ~ label{outline:3px solid #f9ed69;outline-offset:6px}
  @media (max-width:420px){.wrap{transform:scale(.88)}}
</style>
</head>
<body>
  <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  <main class="stage">
    <span class="badge">✦ Pure CSS • Zero JavaScript ✦</span>
    <h1>Tap to go<br><em>absolutely wild.</em></h1>
    <p class="sub">One sneaky checkbox, a few pseudo-elements and a lot of keyframes. No scripts were harmed — none were used.</p>
    <div class="code"><span>&lt;input type="checkbox"&gt;</span><span>:checked</span><span>@keyframes burst</span><span>transform + filter</span></div>

    <div class="wrap">
      <input type="checkbox" id="like" aria-label="Like button">
      <label class="btn" for="like" title="Click me">
        <span class="rays"></span>
        <span class="ring r1"></span><span class="ring r2"></span><span class="ring r3"></span>

        <span class="heart" aria-hidden="true">
          <svg viewBox="0 0 100 100"><path d="M50 88 C20 62 8 44 8 28 C8 14 19 6 31 6 C41 6 48 12 50 20 C52 12 59 6 69 6 C81 6 92 14 92 28 C92 44 80 62 50 88 Z"/></svg>
          <span class="shine"></span>
        </span>

        <span class="p"></span><span class="p circle"></span><span class="p"></span><span class="p circle"></span>
        <span class="p"></span><span class="p circle"></span><span class="p"></span><span class="p circle"></span>
        <span class="p"></span><span class="p"></span><span class="p circle"></span><span class="p"></span>
        <span class="p circle"></span><span class="p"></span><span class="p circle"></span><span class="p"></span>
        <span class="p heartp"><svg viewBox="0 0 100 100"><path d="M50 88 C20 62 8 44 8 28 C8 14 19 6 31 6 C41 6 48 12 50 20 C52 12 59 6 69 6 C81 6 92 14 92 28 C92 44 80 62 50 88 Z" fill="#ff2e63"/></svg></span>
        <span class="p heartp"><svg viewBox="0 0 100 100"><path d="M50 88 C20 62 8 44 8 28 C8 14 19 6 31 6 C41 6 48 12 50 20 C52 12 59 6 69 6 C81 6 92 14 92 28 C92 44 80 62 50 88 Z" fill="#f9ed69"/></svg></span>

        <span class="float f1">💖</span><span class="float f2">✨</span><span class="float f3">💞</span>
        <span class="word"><span class="off">LIKE</span><span class="on">LIKED!</span></span>
      </label>
      <div class="status"><span class="no">○ Not liked yet — go on, press it</span><span class="yes">● Liked! Click again to un-like</span></div>
    </div>
    <p class="hint"><b>CLICK THE HEART</b> &nbsp;or tab to it and press <b>Space</b> &nbsp;•&nbsp; click again to reset the explosion</p>
  </main>
</body>
</html>