<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0f0f10;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.stage{position:absolute;inset:0;display:grid;place-items:center;container-type:size}
body,.stage{background:#f4efe6}.in{display:flex;align-items:center;gap:1.4cqw;background:#fff;border:1px solid #e3dccf;border-radius:999px;padding:1.6cqw 1.6cqw 1.6cqw 3cqw;width:70cqw;box-shadow:0 10px 30px -18px rgba(0,0,0,.4);font-size:2.6cqw;color:#1c1917}
.tx{flex:1;white-space:nowrap;overflow:hidden}.cr{display:inline-block;width:2px;height:1em;background:#1c1917;vertical-align:-.12em;animation:bl .8s steps(1) infinite}
@keyframes bl{50%{opacity:0}}.sd{width:5cqw;height:5cqw;border-radius:50%;background:#d6d3d1;display:grid;place-items:center;color:#fff;font-weight:900;transition:all .25s}.sd.on{background:#1f6f5c;transform:scale(1.12)}
</style></head>
<body><div class="stage"><div class="in"><div class="tx"><span id="t"></span><span class="cr"></span></div><div class="sd" id="s">↑</div></div></div><script>var s="Make a 6s logo reveal for addmotion",t=document.getElementById("t"),b=document.getElementById("s");function run(){var i=0;t.textContent="";b.className="sd";var iv=setInterval(function(){t.textContent=s.slice(0,++i);if(i>=s.length){clearInterval(iv);setTimeout(function(){b.className="sd on";setTimeout(function(){b.style.transform="scale(1)"},200)},300);setTimeout(function(){b.style.transform="";run()},2600)}},45)}run();</script></body></html>