로고 클라우드

<div class="cloud">
  <p class="label">Trusted by teams at</p>
  <div class="marquee"><div class="track" id="track"></div></div>
</div>

.cloud{position:absolute;inset:0;padding:0 3%;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(8px,2vmin,14px);align-items:center}
.label{margin:0;font-size:clamp(8px,1.4vmin,11px);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.marquee{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:clamp(16px,4vmin,34px);width:max-content;animation:scroll 16s linear infinite}
.chip{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:clamp(9px,1.8vmin,14px);
  font-weight:700;color:var(--fg);opacity:.7}
.mark{width:clamp(10px,2.4vmin,18px);height:clamp(10px,2.4vmin,18px);flex:none}
@keyframes scroll{to{transform:translateX(-50%)}}

const NAMES = ['Novex', 'Arclight', 'Quorra', 'Halcyon', 'Fenwick', 'Modu'];
const RADII = ['50%', '8px', '50% 50% 0 50%', '0', '8px 0 8px 0', '50%'];
const ACCENTS = ['var(--accent)', 'var(--accent-2)', 'var(--accent-3)'];
const track = document.getElementById('track');
function group() {
  const g = document.createElement('div');
  g.style.cssText = 'display:flex;gap:inherit';
  NAMES.forEach(function (n, i) {
    const chip = document.createElement('span');
    chip.className = 'chip';
    const mark = document.createElement('i');
    mark.className = 'mark';
    mark.style.background = ACCENTS[i % ACCENTS.length];
    mark.style.borderRadius = RADII[i % RADII.length];
    chip.appendChild(mark);
    chip.append(n);
    g.appendChild(chip);
  });
  return g;
}
track.appendChild(group());
track.appendChild(group());