Liveloop

An interactive timeline for social media. Every post is a tiny app you can play, save, and remix.

Product

  • Feed
  • Create
  • Claude Code plugin
  • Blog

Legal

  • Privacy Policy
  • Terms of Service
  • Cookie Policy
  • DMCA

Project

  • Templates
© 2026 Liveloop. All rights reserved.
LiveloopVersion history

v1Current

@sofia_play · 5/21/2026, 7:05:41 PM

Initial version — all lines are new.

+<style>
+ html,body{height:100%;margin:0}
+ body{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#f3eefc,#f7f4ee);font-family:system-ui,-apple-system,Segoe UI,sans-serif}
+ #w{width:100%;max-width:340px;padding:1.25rem;text-align:center}
+ h2{margin:.2rem 0 .6rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#8E8AC8}
+ #emoji{font-size:5rem;line-height:1.2}
+ .opts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}
+ .opt{padding:.9rem;border:2px solid #e5e7eb;border-radius:1rem;background:#fff;font-size:1.05rem;font-weight:600;cursor:pointer;transition:.12s}
+ .opt:active{transform:scale(.96)}
+ .ok{background:#dcfce7;border-color:#16a34a}
+ .no{background:#fee2e2;border-color:#dc2626}
+ #score{margin-top:1rem;color:#6b7280;font-size:.9rem}
+</style>
+<div id="w">
+ <h2>Pick the Word</h2>
+ <div id="emoji"></div>
+ <div class="opts" id="opts"></div>
+ <div id="score">Score: 0</div>
+</div>
+<script>
+ var bank=[{e:"🐱",w:"cat"},{e:"🌳",w:"tree"},{e:"🔑",w:"key"},{e:"🍕",w:"pizza"},{e:"✈️",w:"plane"},{e:"🎸",w:"guitar"},{e:"🌙",w:"moon"},{e:"🧊",w:"ice"},{e:"👟",w:"shoe"},{e:"🦷",w:"tooth"},{e:"🔥",w:"fire"},{e:"🥚",w:"egg"}];
+ var score=0,cur,locked=false;
+ var emoji=document.getElementById("emoji"),opts=document.getElementById("opts"),scoreEl=document.getElementById("score");
+ function shuffle(a){for(var i=a.length-1;i>0;i--){var j=Math.floor(Math.random()*(i+1));var t=a[i];a[i]=a[j];a[j]=t;}return a;}
+ function round(){
+ locked=false;cur=bank[Math.floor(Math.random()*bank.length)];emoji.textContent=cur.e;
+ var choices=[cur.w];while(choices.length<4){var r=bank[Math.floor(Math.random()*bank.length)].w;if(choices.indexOf(r)<0)choices.push(r);}
+ shuffle(choices);opts.innerHTML="";
+ choices.forEach(function(c){var b=document.createElement("button");b.className="opt";b.textContent=c;b.onclick=function(){
+ if(locked)return;locked=true;
+ if(c===cur.w){b.className="opt ok";score++;}else{b.className="opt no";[].forEach.call(opts.children,function(x){if(x.textContent===cur.w)x.className="opt ok";});}
+ scoreEl.textContent="Score: "+score;setTimeout(round,800);
+ };opts.appendChild(b);});
+ }
+ round();
+</script>

v1Current

@sofia_play · 5/21/2026, 7:05:41 PM

Initial version — all lines are new.

+<style>
+ html,body{height:100%;margin:0}
+ body{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#f3eefc,#f7f4ee);font-family:system-ui,-apple-system,Segoe UI,sans-serif}
+ #w{width:100%;max-width:340px;padding:1.25rem;text-align:center}
+ h2{margin:.2rem 0 .6rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#8E8AC8}
+ #emoji{font-size:5rem;line-height:1.2}
+ .opts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}
+ .opt{padding:.9rem;border:2px solid #e5e7eb;border-radius:1rem;background:#fff;font-size:1.05rem;font-weight:600;cursor:pointer;transition:.12s}
+ .opt:active{transform:scale(.96)}
+ .ok{background:#dcfce7;border-color:#16a34a}
+ .no{background:#fee2e2;border-color:#dc2626}
+ #score{margin-top:1rem;color:#6b7280;font-size:.9rem}
+</style>
+<div id="w">
+ <h2>Pick the Word</h2>
+ <div id="emoji"></div>
+ <div class="opts" id="opts"></div>
+ <div id="score">Score: 0</div>
+</div>
+<script>
+ var bank=[{e:"🐱",w:"cat"},{e:"🌳",w:"tree"},{e:"🔑",w:"key"},{e:"🍕",w:"pizza"},{e:"✈️",w:"plane"},{e:"🎸",w:"guitar"},{e:"🌙",w:"moon"},{e:"🧊",w:"ice"},{e:"👟",w:"shoe"},{e:"🦷",w:"tooth"},{e:"🔥",w:"fire"},{e:"🥚",w:"egg"}];
+ var score=0,cur,locked=false;
+ var emoji=document.getElementById("emoji"),opts=document.getElementById("opts"),scoreEl=document.getElementById("score");
+ function shuffle(a){for(var i=a.length-1;i>0;i--){var j=Math.floor(Math.random()*(i+1));var t=a[i];a[i]=a[j];a[j]=t;}return a;}
+ function round(){
+ locked=false;cur=bank[Math.floor(Math.random()*bank.length)];emoji.textContent=cur.e;
+ var choices=[cur.w];while(choices.length<4){var r=bank[Math.floor(Math.random()*bank.length)].w;if(choices.indexOf(r)<0)choices.push(r);}
+ shuffle(choices);opts.innerHTML="";
+ choices.forEach(function(c){var b=document.createElement("button");b.className="opt";b.textContent=c;b.onclick=function(){
+ if(locked)return;locked=true;
+ if(c===cur.w){b.className="opt ok";score++;}else{b.className="opt no";[].forEach.call(opts.children,function(x){if(x.textContent===cur.w)x.className="opt ok";});}
+ scoreEl.textContent="Score: "+score;setTimeout(round,800);
+ };opts.appendChild(b);});
+ }
+ round();
+</script>
← Version history