Embla Carousel Auto-Scroll Logo Marquee — Free Logo Strip Snippet

<section class="eal">
  <p class="eal-kicker">Trusted by 4,000+ teams</p>
  <div class="eal-row">
    <div class="eal-viewport" id="ealTop"><div class="eal-container" id="ealTopList"></div></div>
    <div class="eal-viewport" id="ealBottom"><div class="eal-container" id="ealBottomList"></div></div>
  </div>
  <div class="eal-controls">
    <button type="button" id="ealToggle" aria-pressed="false">Pause</button>
    <label>Speed <input type="range" id="ealSpeed" min="0.4" max="3" step="0.2" value="1.2"></label>
  </div>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.eal{width:100%;max-width:960px;text-align:center}
.eal-kicker{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:22px}
.eal-row{display:grid;gap:14px;
  /* Fade the edges so logos appear and disappear softly. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.eal-viewport{overflow:hidden}
.eal-container{display:flex;touch-action:pan-y pinch-zoom}
.eal-slide{flex:0 0 auto;min-width:0;padding:0 10px}
.eal-logo{display:flex;align-items:center;gap:10px;height:64px;padding:0 22px;border:1px solid #e2e8f0;border-radius:14px;color:#334155;font-weight:700;font-size:17px;white-space:nowrap;opacity:.7;transition:opacity .2s,border-color .2s,transform .2s}
.eal-logo:hover{opacity:1;border-color:#c7d2fe;transform:translateY(-2px)}
.eal-mark{width:26px;height:26px;border-radius:8px;flex:0 0 auto}
.eal-controls{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:22px;font-size:12px;color:#475569}
.eal-controls button{border:1px solid #cbd5e1;background:#fff;border-radius:999px;padding:6px 14px;font:600 12px system-ui;cursor:pointer}
.eal-controls button:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.eal-controls label{display:flex;align-items:center;gap:8px}

var BRANDS = [
  ['Northwind', '#6366f1'], ['Lumen', '#f59e0b'], ['Parcelly', '#10b981'], ['Orbital', '#0ea5e9'],
  ['Kitewire', '#ec4899'], ['Hexa', '#8b5cf6'], ['Tidepool', '#14b8a6'], ['Brightline', '#ef4444'],
  ['Moss & Co', '#65a30d'], ['Quanta', '#3b82f6'],
];

function fill(listId, brands) {
  var el = document.getElementById(listId);
  // Auto-scroll with loop needs enough content to cover the viewport at
  // least once; repeating the set avoids a visible gap on wide screens.
  brands.concat(brands).forEach(function (b) {
    el.insertAdjacentHTML('beforeend',
      '<div class="eal-slide"><div class="eal-logo"><span class="eal-mark" style="background:' + b[1] + '"></span>' + b[0] + '</div></div>');
  });
}
fill('ealTopList', BRANDS);
fill('ealBottomList', BRANDS.slice().reverse());

var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// AutoScroll moves continuously (pixels per frame) instead of jumping
// between slides. dragFree lets a grab-and-throw feel natural.
function make(id, direction) {
  var plugin = EmblaCarouselAutoScroll({
    speed: 1.2,
    direction: direction,
    startDelay: 0,
    stopOnInteraction: false,
    stopOnMouseEnter: true,
    playOnInit: !reduce,
  });
  var api = EmblaCarousel(document.getElementById(id), { loop: true, dragFree: true }, [plugin]);
  return { api: api, plugin: plugin };
}
var rows = [make('ealTop', 'forward'), make('ealBottom', 'backward')];

var toggle = document.getElementById('ealToggle');
var paused = reduce;
function render() {
  toggle.textContent = paused ? 'Play' : 'Pause';
  toggle.setAttribute('aria-pressed', String(paused));
}
render();
toggle.addEventListener('click', function () {
  paused = !paused;
  rows.forEach(function (r) { if (paused) r.plugin.stop(); else r.plugin.play(); });
  render();
});

// Speed is a plugin option, so changing it means re-initialising each
// carousel with a fresh plugin instance.
document.getElementById('ealSpeed').addEventListener('change', function (e) {
  var speed = Number(e.target.value);
  rows = rows.map(function (r, i) {
    r.api.destroy();
    var plugin = EmblaCarouselAutoScroll({
      speed: speed, direction: i === 0 ? 'forward' : 'backward', startDelay: 0,
      stopOnInteraction: false, stopOnMouseEnter: true, playOnInit: !paused,
    });
    var api = EmblaCarousel(document.getElementById(i === 0 ? 'ealTop' : 'ealBottom'), { loop: true, dragFree: true }, [plugin]);
    return { api: api, plugin: plugin };
  });
});