비주얼 하이어라키

<div class="poster">
  <div class="badge" data-n="1">1</div>
  <div class="h1">New Season</div>
  <div class="badge" data-n="2">2</div>
  <div class="sub">Handpicked drops, every Friday</div>
  <div class="badge" data-n="3">3</div>
  <div class="ln"></div>
  <div class="ln short"></div>
  <div class="badge" data-n="4">4</div>
  <button class="cta">Shop now</button>
</div>

.poster{position:relative;width:82%;max-width:320px;display:grid;gap:8px;justify-items:start}
.h1{font:900 clamp(18px,5vmin,30px)/1.1 sans-serif;color:var(--fg)}
.sub{font:600 clamp(11px,2.6vmin,14px)/1.3 sans-serif;color:var(--fg);opacity:.8}
.ln{width:180px;height:6px;border-radius:3px;background:var(--line)}
.short{width:110px}
.cta{margin-top:4px;border:0;border-radius:8px;padding:8px 16px;background:var(--accent);color:#fff;font-weight:700;font-size:12px}
.badge{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--accent-2);color:#fff;font:800 10px/18px monospace;text-align:center;opacity:0;transform:scale(.5)}
.badge[data-n="1"]{left:-26px;top:-4px}
.badge[data-n="2"]{left:-26px;top:64px}
.badge[data-n="3"]{left:-26px;top:96px}
.badge[data-n="4"]{left:-26px;top:168px}
.badge.show{animation:pop .5s ease forwards}
@keyframes pop{to{opacity:1;transform:scale(1)}}

const badges = [...document.querySelectorAll('.badge')];
function run() {
  badges.forEach(b => b.classList.remove('show'));
  badges.forEach((b, i) => setTimeout(() => b.classList.add('show'), i * 450 + 200));
}
run();
setInterval(run, 3400);