@joaobarrosfranca · 7/2/2026, 7:51:27 PM
Initial version — all lines are new.
+<!doctype html>+<html>+<head>+<meta charset="utf-8" />+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />+<style>+ * { margin: 0; padding: 0; box-sizing: border-box; }+ html, body { width: 100%; height: 100%; overflow: hidden; }+ body {+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;+ background: #1a1030;+ color: #fdf6ef;+ position: relative;+ }+ /* Soft warm gradient wash */+ .bg {+ position: absolute; inset: 0;+ background:+ radial-gradient(60% 45% at 22% 18%, rgba(255,164,110,.55) 0%, transparent 60%),+ radial-gradient(55% 45% at 82% 26%, rgba(178,120,255,.55) 0%, transparent 60%),+ radial-gradient(80% 60% at 50% 108%, rgba(255,122,158,.45) 0%, transparent 65%),+ linear-gradient(160deg, #241546 0%, #1a1030 60%, #2a1533 100%);+ }+ /* Floating orbs */+ .orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .8; mix-blend-mode: screen; }+ .o1 { width: 220px; height: 220px; left: -50px; top: 90px;+ background: radial-gradient(circle at 35% 30%, #ffd9a8, #ff9a6b 70%); animation: drift 13s ease-in-out infinite; }+ .o2 { width: 150px; height: 150px; right: -30px; top: 210px;+ background: radial-gradient(circle at 35% 30%, #e6c6ff, #b278ff 70%); animation: drift 17s ease-in-out infinite reverse; }+ .o3 { width: 120px; height: 120px; left: 60px; bottom: 150px;+ background: radial-gradient(circle at 35% 30%, #ffc2d4, #ff7a9e 70%); animation: drift 11s ease-in-out infinite; }+ @keyframes drift { 0%,100% { transform: translate(0,0) } 50% { transform: translate(18px,-26px) } }++ .stage { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;+ padding: 92px 30px 120px; }+ /* Brand top-LEFT (top-right corner reserved for platform chrome) */+ .brand { position: absolute; top: 22px; left: 24px; display: flex; align-items: center; gap: 9px;+ font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }+ .brand .dot { width: 12px; height: 12px; border-radius: 50%;+ background: radial-gradient(circle at 35% 30%, #ffd9a8, #ff7a9e); box-shadow: 0 0 14px #ff9a6b; }++ .kicker { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin-bottom: 14px; }+ h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400;+ font-size: 42px; line-height: 1.08; letter-spacing: -.01em; margin-bottom: 8px; }+ h1 .swap { color: #ffb98a; font-style: italic; display: inline-block; min-width: 5.5ch;+ transition: opacity .4s ease, transform .4s ease; }+ .sub { margin-top: 18px; font-size: 16px; line-height: 1.55; opacity: .9; max-width: 22em; }++ .chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }+ .chip { font-size: 13px; padding: 8px 13px; border-radius: 999px;+ background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); }++ /* Action at the BOTTOM per HUD convention */+ .cta { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);+ display: flex; align-items: center; gap: 9px; z-index: 3;+ background: #fdf6ef; color: #3a1d5c; border: 0; cursor: pointer;+ font-weight: 700; font-size: 15px; padding: 14px 22px; border-radius: 999px;+ box-shadow: 0 12px 34px rgba(0,0,0,.35); }+ .cta:active { transform: translateX(-50%) scale(.96); }+ .cta .play { width: 0; height: 0; border-left: 11px solid #7a3fb0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }+</style>+</head>+<body>+ <div class="bg"></div>+ <div class="orb o1"></div><div class="orb o2"></div><div class="orb o3"></div>++ <div class="brand"><span class="dot"></span>Liveloop</div>++ <div class="stage">+ <div class="kicker">a new kind of feed</div>+ <h1>Every post is<br>a tiny <span class="swap" id="swap">game</span></h1>+ <p class="sub">Scroll a timeline of little interactive apps. Tap to play. Remix any of them into your own — or make one from scratch with your own AI. No engagement traps. Open by design. And now it lives on the Fediverse. 👋</p>++ <div class="chips">+ <span class="chip">🎮 play</span>+ <span class="chip">🔁 remix</span>+ <span class="chip">✨ create</span>+ <span class="chip">🌐 ActivityPub</span>+ </div>+ </div>++ <button class="cta" id="cta"><span class="play"></span> Open on Liveloop</button>++ <script>+ const words = ["game", "quiz", "toy", "poll", "story", "world"];+ let i = 0;+ const el = document.getElementById('swap');+ setInterval(() => {+ el.style.opacity = 0; el.style.transform = 'translateY(-6px)';+ setTimeout(() => {+ i = (i + 1) % words.length;+ el.textContent = words[i];+ el.style.opacity = 1; el.style.transform = 'translateY(0)';+ }, 380);+ }, 1700);++ // The CTA is a friendly nudge inside the sandbox; the platform chrome+ // handles real navigation. A tiny confetti-free celebration:+ document.getElementById('cta').addEventListener('click', () => {+ document.querySelectorAll('.orb').forEach((o) => o.animate(+ [{ transform: 'scale(1)' }, { transform: 'scale(1.25)' }, { transform: 'scale(1)' }],+ { duration: 500, easing: 'ease-out' }+ ));+ });+ </script>+</body>+</html>