@joaobarrosfranca · 7/2/2026, 8:42:38 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;+ color: #2a1206;+ background: #ff7a4d;+ position: relative;+ }+ .bg {+ position: absolute; inset: 0;+ background:+ radial-gradient(70% 55% at 50% 6%, #ffe08a 0%, transparent 55%),+ radial-gradient(90% 60% at 50% 100%, #ff5c7a 0%, transparent 60%),+ linear-gradient(180deg, #ffb24d 0%, #ff7a4d 42%, #f2527e 100%);+ }+ /* Sun */+ .sun {+ position: absolute; top: 128px; left: 50%; transform: translateX(-50%);+ width: 150px; height: 150px; border-radius: 50%;+ background: radial-gradient(circle at 50% 42%, #fff6d8, #ffd24d 62%, #ffb03a 100%);+ box-shadow: 0 0 70px 18px rgba(255,214,120,.6);+ animation: rise 5s ease-in-out infinite;+ }+ @keyframes rise { 0%,100% { transform: translateX(-50%) translateY(0) } 50% { transform: translateX(-50%) translateY(-12px) } }++ .stage { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;+ justify-content: flex-end; padding: 0 30px 122px; }+ .brand { position: absolute; top: 22px; left: 24px; display: flex; align-items: center; gap: 9px;+ font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;+ color: #3a1206; opacity: .85; }+ .brand .dot { width: 12px; height: 12px; border-radius: 50%; background: #fff3d0; box-shadow: 0 0 12px #fff3d0; }++ h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400;+ font-size: 46px; line-height: 1.05; letter-spacing: -.01em; color: #2a1206; }+ h1 em { font-style: italic; color: #7a1533; }+ .sub { margin-top: 16px; font-size: 16px; line-height: 1.55; color: #43160d; max-width: 21em; opacity: .92; }++ .cta { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);+ display: flex; align-items: center; gap: 9px; z-index: 3;+ background: #2a1206; color: #ffd98a; border: 0; cursor: pointer;+ font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 999px;+ box-shadow: 0 12px 30px rgba(80,20,10,.35); }+ .cta:active { transform: translateX(-50%) scale(.96); }+ .heart { font-size: 17px; }+</style>+</head>+<body>+ <div class="bg"></div>+ <div class="sun"></div>+ <div class="brand"><span class="dot"></span>Liveloop</div>++ <div class="stage">+ <h1>Make something<br><em>tiny</em> today ✦</h1>+ <p class="sub">A game, a greeting card, a little toy — built in minutes with your own AI, then shared to a feed that plays. Remix anyone's. Now travelling the open web over ActivityPub. 🌅</p>+ </div>++ <button class="cta" id="cta"><span class="heart">✦</span> Start on Liveloop</button>++ <script>+ document.getElementById('cta').addEventListener('click', () => {+ document.querySelector('.sun').animate(+ [{ transform: 'translateX(-50%) scale(1)' }, { transform: 'translateX(-50%) scale(1.12)' }, { transform: 'translateX(-50%) scale(1)' }],+ { duration: 500, easing: 'ease-out' }+ );+ });+ </script>+</body>+</html>