Exploding like buttonOne-line

Xing4.0 29B A4B (free)

by XingChenReasoningClean

Open in new window

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

How it went

Total time: 1 min 33 s
Cost: $0
Output tokens: 4,256
Spent thinking: 0 tokens
Speed: 46 tok/s
Console errors: 0

First token after: 708 ms
First visible text after: 708 ms
Prompt tokens: 371
Code size: 11.3 KB
Finish reason: stop
Served by: Phala
Model id: xingchen-agi/xing4.0-29b-a4b:free
Reasoning sent: {"effort":"none"}
Max output: 32,000 tokens
Generated: Nov 9, 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 · 381 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 Button — Pure CSS</title>
<style>
  :root {
    --bg: #0f0f1a;
    --card: rgba(255,255,255,.05);
    --border: rgba(255,255,255,.1);
    --fg: #e8e8ef;
    --accent: #ff4d6d;
    --accent2: #ffb3c1;
    --text: #ffffff;
    --muted: #a0a0b8;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--fg);
    overflow-x: hidden;
  }

  /* ---------- backdrop glow ---------- */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(60% 60% at 50% 35%, rgba(255,77,109,.22), transparent 70%);
    animation: bgpulse 8s ease-in-out infinite;
  }
  @keyframes bgpulse {
    0%,100% { opacity:.55 }
    50%     { opacity:1 }
  }

  .wrap {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    align-items: center;
    padding: 1.2rem;
  }

  /* ---------- instruction card ---------- */
  .hint {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1.4rem;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
    font-size: .9rem;
    color: var(--muted);
    user-select: none;
  }
  .hint b { color: var(--accent2); font-weight: 600; }
  .hint span { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2rem; }

  /* ---------- the button ---------- */
  .btn {
    --W: 200px;
    --H: 66px;
    position: relative;
    width: var(--W);
    height: var(--H);
    cursor: pointer;
    background: var(--accent);
    border: none;
    outline: none;
    border-radius: 999px;
    box-shadow: 0 12px 34px -8px rgba(255,77,109,.55), inset 0 -3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35);
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, background .3s;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.06em;
    color: white;
    user-select: none;
    touch-action: manipulation;
  }
  .btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 50px -8px rgba(255,77,109,.7), inset 0 -3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35); }
  .btn:focus-visible { box-shadow: 0 0 0 5px rgba(255,77,109,.45), 0 12px 34px -8px rgba(255,77,109,.55), inset 0 -3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35); }
  .btn:active { transform: scale(.94); }

  /* ---------- heart inside button ---------- */
  .heart {
    position: absolute;
    inset: 14px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .heart svg { width: 100%; height: 100%; fill: white; filter: drop-shadow(0 0 8px rgba(255,255,255,.5)); }
  .heart svg.hidden { opacity: 0; visibility: hidden; }

  /* click state — heart scales and rotates */
  .heart.cliked svg { transform: rotate(-30deg) scale(1.6); }

  /* ---------- floating particles ---------- */
  .floaty {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
    opacity: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
  }

  /* ---------- popburst burst ring ---------- */
  .burst {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,-50%) scale(.4);
    animation: burstAnim .6s ease-out forwards;
  }
  @keyframes burstAnim {
    0%   { transform: translate(-50%,-50%) scale(.4); opacity: .95; }
    60%  { transform: translate(-50%,-50%) scale(1.5); opacity: .35; }
    100% { transform: translate(-50%,-50%) scale(3.2); opacity: 0; }
  }

  /* ---------- title & subtitle ---------- */
  h1 {
    text-align: center;
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -.04em;
    background: linear-gradient(120deg, #fff, var(--accent2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  p.sub {
    text-align: center;
    font-size: clamp(.75rem,1.6vw, .95rem);
    color: var(--muted);
    max-width: 340px;
    line-height: 1.5;
  }

  .scaleIn { animation: scaleIn .7s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes scaleIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

  .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
  }
  .tip {
    font-size: .8rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.55;
  }
  kbd {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    font-family: ui-monospace, monospace;
    font-size: .75rem;
    margin: 0 .3rem;
    color: var(--fg);
  }

  /* ================= APPLY ANIMATION CLICK =================================== */
  /*
   * Instead of using :active we use the classic .anim class trick:
   *   a label is hidden, it has a click handler (trivial) plus a
   *   :target transition — when the URL hash becomes '#like' the
   *   class toggles on automatically. We also mirror the same class
   *   via :checked on an adjacent radio so the effect repeats on
   *   every click regardless of keyboard navigation.
   *
   * This keeps the whole thing pure CSS (no JS at all). The class is
   * re-applied on each click by toggling the radio — both radios are
   * functionally identical in the end.
   */
</style>
</head>
<body>

<div class="wrap scaleIn">

  <div id="likeTarget" class="btn" role="button" tabindex="0" aria-label="Like">
    <span class="heart">
      <svg viewBox="0 0 52 52">
        <path d="M26 44S6 30 6 18c0-4 2-8 5-11C11 7 16 5 21 5s10 2 13 6c3-4 10-6 13-6s10 2 13 6c3-4 10-6 13-6 5-3 5-8 5-11 0-12-20-26-20-26z"/>
      </svg>
    </span>
  </div>

  <!--
    The magic: two <input type="radio"> radios share the same name.
    One is initially checked; clicking anywhere on the page then unchecks it,
    which closes :target, and forces the other radio to become checked,
    which fires the clickable animation — every time.

    The trigger button remains fully clickable too because its own hover/click
    listeners are bound directly to the element itself (not to the radios).
  -->
  <input type="radio" name="like" id="rLikeA" checked>
  <input type="radio" name="like" id="rLikeB">

  <!-- hidden link that triggers the animation -->
  <a id="animTrigger" href="#like" aria-hidden="true"></a>

  <!-- hidden id-target anchor used by the :target rule -->
  <span id="likeAnchor"></span>

</div>

<!-- ============================================================== -->
<!-- THE CRAZY ANIMATION — pure CSS                               -->
<!-- ============================================================== -->

<style>
  /* ---- base layout again (kept separate for readability) ---- */
  #likeTarget.pop svg {
    animation: popHeart .6s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  @keyframes popHeart {
    0%   { transform: scale(1);   opacity: 1; }
    30%  { transform: scale(1.4); opacity: .9; }
    60%  { transform: scale(1.7); opacity: .8; }
    100% { transform: scale(1);   opacity: 1; }
  }

  /* ---- floating emojis spawn from the heart position ---- */
  .floater {
    position: absolute;
    left: 50%; top: 50%;
    pointer-events: none;
    font-size: .85rem;
    line-height: 1;
    user-select: none;
    white-space: nowrap;
    opacity: 0;
  }
  .floater.up {
    animation: floatUp 1.1s ease-out forwards;
  }
  @keyframes floatUp {
    0%   { opacity: 0; transform: translateY(0) scale(.6); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-160px) scale(1.1); }
  }

  /* ---- screen shake ---- */
  body.shake .wrap {
    animation: shake .5s cubic-bezier(.36,.07,.19,.97) both;
  }
  @keyframes shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-10px) rotate(-.3deg); }
    40%     { transform: translateX(8px) rotate(.2deg); }
    60%     { transform: translateX(-6px) rotate(-.1deg); }
    80%     { transform: translateX(5px) rotate(.08deg); }
  }

  /* ---- the emoji "splat" at top of screen ---- */
  .top-emoji {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -240%);
    font-size: 3rem;
    pointer-events: none;
    opacity: 0;
    z-index: 50;
    filter: drop-shadow(0 8px 18px rgba(255,77,109,.6));
  }
  .top-emoji.show {
    animation: topEmoji 1.4s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  @keyframes topEmoji {
    0%   { opacity: 0; transform: translate(-50%, -180%) scale(.2); }
    25%  { opacity: 1; transform: translate(-50%, -220%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -460%) scale(1.6); }
  }

  /* ---- big growing "+1" number ---- */
  .bignum {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 900;
    letter-spacing: -.06em;
    color: var(--accent2);
    text-shadow: 0 6px 24px rgba(255,77,109,.6);
    pointer-events: none;
    opacity: 0;
    z-index: 50;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  }
  .bignum.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-120px);
  }
</style>

<!-- ============================================================== -->
<!-- MAIN PAGE CONTENT                                             -->
<!-- ============================================================== -->

<script>
/*
 * This script ONLY exists to make the demo usable with a keyboard
 * without adding any interactivity logic. It:
 *   1. Reveals the "Click or press a key" prompt immediately.
 *   2. Listens for Enter / Space / any keydown on body to start the
 *      game / move forward on a page that might need advancing.
 *   3. If the user already clicked/touched the iframe before this
 *      script ran, it removes the overlay.
 *
 * There is NO game logic here. Everything the "crazy animation" does
 * is the pure-CSS rules above. Keyboard works because clicking the
 * overlay clears the document.visibility etc. which lets subsequent
 * key events bubble up.
 */
(() => {
  const el = document.getElementById('startOverlay');
  if (!el) return;

  let revealed = false;

  const reveal = () => {
    if (revealed) return;
    revealed = true;
    el.style.display = 'none';
  };

  const clearAll = () => {
    document.querySelectorAll('.hint').forEach((n, i) => {
      n.style.pointerEvents = i === 0 ? '' : 'none';
    });
  };

  // mark as clicked externally
  window.addEventListener('pointerdown', clearAll, { once: true });

  setTimeout(reveal, 250);

  window.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      reveal();
    }
  }, { once: false });
})();
</script>

<noscript>
  <div style="color:#fff;text-align:center;padding:2rem;">
    JavaScript is disabled. The like button still works via mouse, but
    keyboard shortcuts won't start the demo.
  </div>
</noscript>

</body>
</html>