<div class="cnc-com">
  <div class="cnc-com-block">
    <div class="cnc-com-pill">Community Milestone</div>
    <div class="cnc-com-counter-wrap">
      <div class="cnc-com-deco">+</div>
      <span class="cnc-com-counter-val"><span class="cnc-com-val" data-target="250">0</span><span class="cnc-com-counter-suffix">K</span></span>
    </div>
    <div class="cnc-com-tagline"><em>makers, builders &amp; dreamers</em><br>have joined the Forma community.</div>
    <div class="cnc-com-ticker">
      <div class="cnc-com-ticker-inner">
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">🧑</div><div class="cnc-com-tick-text"><strong>@lucasdev</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👤</div><div class="cnc-com-tick-text"><strong>@yuki_m</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👩</div><div class="cnc-com-tick-text"><strong>@hannadesign</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">🧑</div><div class="cnc-com-tick-text"><strong>@tanyabuild</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👨</div><div class="cnc-com-tick-text"><strong>@arjun.io</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👩</div><div class="cnc-com-tick-text"><strong>@camille_ux</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">🧑</div><div class="cnc-com-tick-text"><strong>@lucasdev</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👤</div><div class="cnc-com-tick-text"><strong>@yuki_m</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👩</div><div class="cnc-com-tick-text"><strong>@hannadesign</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">🧑</div><div class="cnc-com-tick-text"><strong>@tanyabuild</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👨</div><div class="cnc-com-tick-text"><strong>@arjun.io</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👩</div><div class="cnc-com-tick-text"><strong>@camille_ux</strong> just joined</div></div>
      </div>
    </div>
    <div class="cnc-com-live-count">
      <div class="cnc-com-live-dot"></div>
      <span class="cnc-com-live-text"><strong>+<span class="cnc-com-live">0</span> this week</strong> · growing fast</span>
    </div>
  </div>
</div>

.cnc-com { display: grid; place-items: center; padding: 32px 16px; background: #f9f4ee; font-family: 'DM Sans', sans-serif; }
.cnc-com *, .cnc-com *::before, .cnc-com *::after { box-sizing: border-box; }
.cnc-com-block { width: 480px; display: flex; flex-direction: column; align-items: center; padding: 32px; }
.cnc-com-pill { background: #111; color: #f9f4ee; font-size: 10px; letter-spacing: 5px; text-transform: uppercase; font-weight: 400; padding: 8px 20px; border-radius: 100px; margin-bottom: 28px; opacity: 0; animation: cnc-com-drop 0.5s ease 0.0s forwards; }
.cnc-com-counter-wrap { position: relative; text-align: center; opacity: 0; animation: cnc-com-drop 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; }
.cnc-com-counter-val { font-family: 'Anton', sans-serif; font-size: clamp(96px, 20vw, 160px); line-height: 1; letter-spacing: -4px; color: #111; display: block; position: relative; z-index: 1; }
.cnc-com-counter-suffix { font-family: 'Anton', sans-serif; font-size: 0.45em; color: #d63f00; letter-spacing: -1px; vertical-align: baseline; }
.cnc-com-deco { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Anton', sans-serif; font-size: 260px; color: transparent; -webkit-text-stroke: 1px rgba(0,0,0,0.05); pointer-events: none; user-select: none; line-height: 1; animation: cnc-com-spin 60s linear infinite; z-index: 0; }
@keyframes cnc-com-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cnc-com-tagline { font-size: 15px; font-weight: 300; color: #888; text-align: center; margin-top: 12px; line-height: 1.6; max-width: 320px; opacity: 0; animation: cnc-com-drop 0.6s ease 0.3s forwards; }
.cnc-com-tagline em { font-style: italic; color: #111; }
.cnc-com-ticker { margin-top: 40px; width: 100%; overflow: hidden; opacity: 0; animation: cnc-com-drop 0.5s ease 0.5s forwards; }
.cnc-com-ticker-inner { display: flex; gap: 0; animation: cnc-com-tickerScroll 16s linear infinite; width: max-content; }
@keyframes cnc-com-tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cnc-com-tick-item { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-left: 1px solid rgba(0,0,0,0.08); white-space: nowrap; }
.cnc-com-tick-av { width: 24px; height: 24px; border-radius: 50%; background: #ddd; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.cnc-com-tick-text { font-size: 12px; color: #888; }
.cnc-com-tick-text strong { color: #111; font-weight: 400; }
.cnc-com-live-count { margin-top: 24px; display: flex; align-items: center; gap: 8px; opacity: 0; animation: cnc-com-drop 0.5s ease 0.6s forwards; }
.cnc-com-live-dot { width: 7px; height: 7px; background: #d63f00; border-radius: 50%; box-shadow: 0 0 0 0 rgba(214,63,0,0.4); animation: cnc-com-ripple 1.5s ease-out infinite; }
@keyframes cnc-com-ripple { 0% { box-shadow: 0 0 0 0 rgba(214,63,0,0.4); } 70% { box-shadow: 0 0 0 8px rgba(214,63,0,0); } 100% { box-shadow: 0 0 0 0 rgba(214,63,0,0); } }
.cnc-com-live-text { font-size: 12px; color: #aaa; }
.cnc-com-live-text strong { color: #d63f00; font-weight: 400; }
@keyframes cnc-com-drop { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cnc-com-pill, .cnc-com-counter-wrap, .cnc-com-tagline, .cnc-com-ticker, .cnc-com-live-count, .cnc-com-deco, .cnc-com-ticker-inner, .cnc-com-live-dot { animation: none; opacity: 1; transform: none; }
}

(function () {
  var root = document.querySelector('.cnc-com');
  if (!root) return;
  function ease(t) { return 1 - Math.pow(1 - t, 4); }
  var valEl = root.querySelector('.cnc-com-val');
  setTimeout(function () {
    var start = performance.now(), dur = 2000, target = parseFloat(valEl.dataset.target) || 250;
    function tick(now) {
      var t = Math.min((now - start) / dur, 1), v = ease(t) * target;
      valEl.textContent = v < 100 ? v.toFixed(1) : Math.round(v);
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }, 300);
  var liveEl = root.querySelector('.cnc-com-live');
  var liveCount = 0;
  function tickLive() {
    liveCount += Math.floor(Math.random() * 3) + 1;
    liveEl.textContent = liveCount.toLocaleString();
    setTimeout(tickLive, Math.random() * 1400 + 400);
  }
  setTimeout(tickLive, 1200);
})();