Open demo

CSS code

HTML 
<div><span class="lbl">Single row with faded edges</span>
<section class="mq" aria-labelledby="mq1-title">
  <p class="mq-title" id="mq1-title">Trusted by 4,000+ product teams</p>
  <input class="mq-toggle" type="checkbox" role="switch" id="mq1-motion" checked>
  <label class="mq-switch" for="mq1-motion"><i></i>Motion</label>
  <div class="mq-view">
    <div class="mq-track">
      <ul class="mq-list">
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
      </ul>
      <ul class="mq-list" aria-hidden="true">
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
      </ul>
    </div>
  </div>
</section></div>

<div><span class="lbl">Two rows on tiles, opposite directions</span>
<section class="mq tiles" aria-labelledby="mq2-title">
  <p class="mq-title" id="mq2-title">Stocked in 180 independent shops</p>
  <input class="mq-toggle" type="checkbox" role="switch" id="mq2-motion" checked>
  <label class="mq-switch" for="mq2-motion"><i></i>Motion</label>
  <div class="mq-view">
    <div class="mq-track">
      <ul class="mq-list">
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
      </ul>
      <ul class="mq-list" aria-hidden="true">
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
      </ul>
    </div>
    <div class="mq-track rev">
      <ul class="mq-list">
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
      </ul>
      <ul class="mq-list" aria-hidden="true">
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
      </ul>
    </div>
  </div>
</section></div>

<div><span class="lbl">Announcement band</span>
<section class="mq band" aria-label="Store announcements">
  <input class="mq-toggle" type="checkbox" role="switch" id="mq3-motion" checked>
  <label class="mq-switch" for="mq3-motion"><i></i>Motion</label>
  <div class="mq-view">
    <div class="mq-track">
      <ul class="mq-list">
        <li>Free delivery on orders over $60</li>
        <li>30-day returns, no questions</li>
        <li>Plastic-free packaging</li>
        <li>Order by 2 pm for same-day dispatch</li>
        <li>Gift wrapping on request</li>
      </ul>
      <ul class="mq-list" aria-hidden="true">
        <li>Free delivery on orders over $60</li>
        <li>30-day returns, no questions</li>
        <li>Plastic-free packaging</li>
        <li>Order by 2 pm for same-day dispatch</li>
        <li>Gift wrapping on request</li>
      </ul>
    </div>
  </div>
</section></div>
CSS 
/* Logo marquees in pure CSS: the list is repeated once (aria-hidden) and the track slides by -50%
   in a loop. Hover pauses it, the "Motion" switch (a checkbox) stops it, and reduced motion
   turns it into a static, wrapped row of logos. */
.mq{--mq-speed:38s;--mq-gap:56px;--mq-ink:#475569;--mq-accent:#0f766e;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px 16px}
.mq-title{font-size:.95rem;font-weight:600;color:#0f172a}
.mq-toggle{position:absolute;width:1px;height:1px;opacity:0}
.mq-switch{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:#334155;cursor:pointer;user-select:none}
.mq-switch i{position:relative;width:34px;height:20px;border-radius:999px;background:#64748b;transition:background .2s}
.mq-switch i::before{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
.mq-toggle:checked + .mq-switch i{background:var(--mq-accent)}
.mq-toggle:checked + .mq-switch i::before{transform:translateX(14px)}
.mq-toggle:focus-visible + .mq-switch i{outline:3px solid var(--mq-accent);outline-offset:2px}
.mq-view{grid-column:1/-1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq-slide var(--mq-speed) linear infinite}
.mq-track.rev{animation-direction:reverse;--mq-speed:46s}
.mq-list{display:flex;align-items:center;gap:var(--mq-gap);padding-right:var(--mq-gap);list-style:none}
.mq-list li{display:flex;align-items:center;gap:10px;color:var(--mq-ink);font-size:1.2rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.mq-mark{width:26px;height:26px;flex:none}
.mq-view:hover .mq-track,.mq-toggle:not(:checked) ~ .mq-view .mq-track{animation-play-state:paused}
@keyframes mq-slide{to{transform:translateX(-50%)}}

/* Two rows on a panel: logos sit on tiles, the second row runs the other way */
.mq.tiles{--mq-gap:14px;padding:30px;border-radius:24px;background:#e6f2f0}
.mq.tiles .mq-view{display:grid;gap:14px}
.mq.tiles .mq-list li{padding:16px 24px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06);font-size:1.05rem}
.mq.tiles .mq-mark{width:22px;height:22px;color:var(--mq-accent)}

/* Announcement band: the same technique carrying store messages instead of logos */
.mq.band{--mq-speed:30s;--mq-gap:28px;padding:6px 8px 6px 0;border-radius:14px;background:#0f766e;color:#fff}
.mq.band .mq-view{grid-column:auto;order:-1}
.mq.band .mq-list li{gap:var(--mq-gap);color:#fff;font-size:.88rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mq.band .mq-list li::after{content:"✦";content:"✦" / "";color:#99f6e4}
.mq.band .mq-switch{color:#fff}
.mq.band .mq-switch i{background:transparent;box-shadow:inset 0 0 0 2px #fff}
.mq.band .mq-switch i::before{top:4px;left:4px;width:12px;height:12px}
.mq.band .mq-toggle:checked + .mq-switch i{background:#fff}
.mq.band .mq-toggle:checked + .mq-switch i::before{background:#0f766e}
.mq.band .mq-toggle:focus-visible + .mq-switch i{outline-color:#fff}
@media (max-width:640px){.mq{--mq-gap:40px}.mq.tiles{--mq-gap:12px;padding:22px 16px}.mq.band{--mq-gap:22px}}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none;width:auto}
  .mq-list{flex-wrap:wrap;justify-content:center;row-gap:18px;padding:0}
  .mq.band{padding:14px 18px}.mq.band .mq-list{row-gap:6px}
  .mq.band .mq-list li{white-space:normal;text-align:center}.mq.band .mq-list li::after{display:none}
  .mq-list[aria-hidden=true],.mq-track.rev,.mq-toggle,.mq-switch{display:none}
  .mq-view{-webkit-mask-image:none;mask-image:none}
  .mq-switch i,.mq-switch i::before{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Single row with faded edges</span>
<section class="mq d-grid align-items-center" style="grid-template-columns:1fr auto" aria-labelledby="mq1-title">
  <p class="mq-title" id="mq1-title">Trusted by 4,000+ product teams</p>
  <div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="mq1-motion" checked><label class="form-check-label" for="mq1-motion">Motion</label></div>
  <div class="mq-view" style="grid-column:1/-1">
    <div class="mq-track">
      <ul class="list-unstyled d-flex align-items-center m-0 mq-list">
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
      </ul>
      <ul class="list-unstyled d-flex align-items-center m-0 mq-list" aria-hidden="true">
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
      </ul>
    </div>
  </div>
</section></div>

<div><span class="lbl">Two rows on tiles, opposite directions</span>
<section class="mq tiles d-grid align-items-center" style="grid-template-columns:1fr auto" aria-labelledby="mq2-title">
  <p class="mq-title" id="mq2-title">Stocked in 180 independent shops</p>
  <div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="mq2-motion" checked><label class="form-check-label" for="mq2-motion">Motion</label></div>
  <div class="mq-view" style="grid-column:1/-1">
    <div class="mq-track">
      <ul class="list-unstyled d-flex align-items-center m-0 mq-list">
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
      </ul>
      <ul class="list-unstyled d-flex align-items-center m-0 mq-list" aria-hidden="true">
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
      </ul>
    </div>
    <div class="mq-track rev">
      <ul class="list-unstyled d-flex align-items-center m-0 mq-list">
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
      </ul>
      <ul class="list-unstyled d-flex align-items-center m-0 mq-list" aria-hidden="true">
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li class="d-flex align-items-center"><svg class="mq-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
      </ul>
    </div>
  </div>
</section></div>

<div><span class="lbl">Announcement band</span>
<section class="mq band d-grid align-items-center" style="grid-template-columns:1fr auto" aria-label="Store announcements">
  <div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="mq3-motion" checked><label class="form-check-label" for="mq3-motion">Motion</label></div>
  <div class="mq-view">
    <div class="mq-track">
      <ul class="list-unstyled d-flex align-items-center m-0 mq-list">
        <li class="d-flex align-items-center">Free delivery on orders over $60</li>
        <li class="d-flex align-items-center">30-day returns, no questions</li>
        <li class="d-flex align-items-center">Plastic-free packaging</li>
        <li class="d-flex align-items-center">Order by 2 pm for same-day dispatch</li>
        <li class="d-flex align-items-center">Gift wrapping on request</li>
      </ul>
      <ul class="list-unstyled d-flex align-items-center m-0 mq-list" aria-hidden="true">
        <li class="d-flex align-items-center">Free delivery on orders over $60</li>
        <li class="d-flex align-items-center">30-day returns, no questions</li>
        <li class="d-flex align-items-center">Plastic-free packaging</li>
        <li class="d-flex align-items-center">Order by 2 pm for same-day dispatch</li>
        <li class="d-flex align-items-center">Gift wrapping on request</li>
      </ul>
    </div>
  </div>
</section></div>
CSS 
/* Logo marquees in pure CSS with Bootstrap utilities and a .form-switch for "Motion".
   The list is repeated once (aria-hidden) and the track slides by -50% in a loop. Hover pauses it,
   switching Motion off stops it (via :has()), and reduced motion shows a static, wrapped row. */
.mq{--mq-speed:38s;--mq-gap:56px;--mq-ink:#475569;--mq-accent:#0f766e;gap:18px 16px}
.mq-title{font-size:.95rem;font-weight:600;color:#0f172a;margin:0}
.mq .form-switch{display:flex;align-items:center;gap:8px;min-height:0;margin:0;padding:0}
.mq .form-switch .form-check-input{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.8' fill='%23fff'/%3e%3c/svg%3e");
  width:34px;height:20px;margin:0;float:none;border:0;background-color:#64748b;cursor:pointer}
.mq .form-switch .form-check-input:checked{background-color:var(--mq-accent)}
.mq .form-switch .form-check-input:focus{box-shadow:none}
.mq .form-switch .form-check-input:focus-visible{outline:3px solid var(--mq-accent);outline-offset:2px}
.mq .form-check-label{font-size:.82rem;font-weight:600;color:#334155;cursor:pointer}
.mq-view{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq-slide var(--mq-speed) linear infinite}
.mq-track.rev{animation-direction:reverse;--mq-speed:46s}
.mq-list{gap:var(--mq-gap);padding-right:var(--mq-gap)}
.mq-list li{gap:10px;color:var(--mq-ink);font-size:1.2rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.mq-mark{width:26px;height:26px;flex:none}
.mq-view:hover .mq-track,.mq:has(.form-check-input:not(:checked)) .mq-track{animation-play-state:paused}
@keyframes mq-slide{to{transform:translateX(-50%)}}
.mq.tiles{--mq-gap:14px;padding:30px;border-radius:24px;background:#e6f2f0}
.mq.tiles .mq-view{display:grid;gap:14px}
.mq.tiles .mq-list li{padding:16px 24px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06);font-size:1.05rem}
.mq.tiles .mq-mark{width:22px;height:22px;color:var(--mq-accent)}

/* Announcement band: the same technique carrying store messages instead of logos */
.mq.band{--mq-speed:30s;--mq-gap:28px;padding:6px 8px 6px 0;border-radius:14px;background:#0f766e;color:#fff}
.mq.band .mq-view{order:-1}
.mq.band .mq-list li{gap:var(--mq-gap);color:#fff;font-size:.88rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mq.band .mq-list li::after{content:"✦";content:"✦" / "";color:#99f6e4}
.mq.band .form-check-label{color:#fff}
.mq.band .form-switch .form-check-input{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-color:transparent;box-shadow:inset 0 0 0 2px #fff}
.mq.band .form-switch .form-check-input:checked{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3e%3ccircle r='3' fill='%230f766e'/%3e%3c/svg%3e");background-color:#fff}
.mq.band .form-switch .form-check-input:focus-visible{outline-color:#fff}
@media (max-width:640px){.mq{--mq-gap:40px}.mq.tiles{--mq-gap:12px;padding:22px 16px}.mq.band{--mq-gap:22px}}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none;width:auto}
  .mq-list{flex-wrap:wrap;justify-content:center;row-gap:18px;padding:0}
  .mq.band{padding:14px 18px}.mq.band .mq-list{row-gap:6px}
  .mq.band .mq-list li{white-space:normal;text-align:center}.mq.band .mq-list li::after{display:none}
  .mq-list[aria-hidden=true],.mq-track.rev,.mq .form-switch{display:none!important}
  .mq-view{-webkit-mask-image:none;mask-image:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#64748b] uppercase">Single row with faded edges</span>
<section class="grid grid-cols-[1fr_auto] items-center gap-x-4 gap-y-[18px] [--gap:40px] sm:[--gap:56px]" aria-labelledby="mq1-title">
  <p class="text-[.95rem] font-semibold" id="mq1-title">Trusted by 4,000+ product teams</p>
  <input class="peer sr-only motion-reduce:hidden" type="checkbox" role="switch" id="mq1-motion" checked>
  <label class="inline-flex cursor-pointer items-center gap-2 text-[.82rem] font-semibold text-[#334155] select-none peer-checked:*:bg-mq-accent peer-checked:*:before:translate-x-3.5 peer-focus-visible:*:outline-3 peer-focus-visible:*:outline-offset-2 peer-focus-visible:*:outline-mq-accent motion-reduce:hidden" for="mq1-motion"><i class="relative h-5 w-[34px] rounded-full bg-[#64748b] transition-colors duration-200 before:absolute before:top-[3px] before:left-[3px] before:size-3.5 before:rounded-full before:bg-white before:transition-transform before:duration-200 motion-reduce:transition-none"></i>Motion</label>
  <div class="col-span-full overflow-hidden [mask-image:linear-gradient(90deg,transparent,#000_9%,#000_91%,transparent)] hover:*:[animation-play-state:paused] peer-[:not(:checked)]:*:[animation-play-state:paused] motion-reduce:[mask-image:none]">
    <div class="flex w-max animate-marquee motion-reduce:w-auto motion-reduce:animate-none">
      <ul class="flex items-center gap-(--gap) pr-(--gap) motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-[18px] motion-reduce:pr-0">
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
      </ul>
      <ul class="flex items-center gap-(--gap) pr-(--gap) motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-[18px] motion-reduce:pr-0 motion-reduce:hidden" aria-hidden="true">
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li class="flex items-center gap-2.5 text-[1.2rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink"><svg class="size-[26px] flex-none" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
      </ul>
    </div>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#64748b] uppercase">Two rows on tiles, opposite directions</span>
<section class="grid grid-cols-[1fr_auto] items-center gap-x-4 gap-y-[18px] rounded-3xl bg-[#e6f2f0] px-4 py-[22px] [--gap:12px] sm:p-[30px] sm:[--gap:14px]" aria-labelledby="mq2-title">
  <p class="text-[.95rem] font-semibold" id="mq2-title">Stocked in 180 independent shops</p>
  <input class="peer sr-only motion-reduce:hidden" type="checkbox" role="switch" id="mq2-motion" checked>
  <label class="inline-flex cursor-pointer items-center gap-2 text-[.82rem] font-semibold text-[#334155] select-none peer-checked:*:bg-mq-accent peer-checked:*:before:translate-x-3.5 peer-focus-visible:*:outline-3 peer-focus-visible:*:outline-offset-2 peer-focus-visible:*:outline-mq-accent motion-reduce:hidden" for="mq2-motion"><i class="relative h-5 w-[34px] rounded-full bg-[#64748b] transition-colors duration-200 before:absolute before:top-[3px] before:left-[3px] before:size-3.5 before:rounded-full before:bg-white before:transition-transform before:duration-200 motion-reduce:transition-none"></i>Motion</label>
  <div class="grid gap-3.5 col-span-full overflow-hidden [mask-image:linear-gradient(90deg,transparent,#000_9%,#000_91%,transparent)] hover:*:[animation-play-state:paused] peer-[:not(:checked)]:*:[animation-play-state:paused] motion-reduce:[mask-image:none]">
    <div class="flex w-max animate-marquee motion-reduce:w-auto motion-reduce:animate-none">
      <ul class="flex items-center gap-(--gap) pr-(--gap) motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-[18px] motion-reduce:pr-0">
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
      </ul>
      <ul class="flex items-center gap-(--gap) pr-(--gap) motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-[18px] motion-reduce:pr-0 motion-reduce:hidden" aria-hidden="true">
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
      </ul>
    </div>
    <div class="flex w-max animate-marquee-rev motion-reduce:hidden">
      <ul class="flex items-center gap-(--gap) pr-(--gap) motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-[18px] motion-reduce:pr-0">
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
      </ul>
      <ul class="flex items-center gap-(--gap) pr-(--gap) motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-[18px] motion-reduce:pr-0 motion-reduce:hidden" aria-hidden="true">
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 9h8M8 13h8M8 17h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span>Fieldnote</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 15a9 9 0 0 1 18 0z"/><path d="M3 18h18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg><span>Halcyon</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill-opacity=".55"/></svg><span>Tandem</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l9 5v10l-9 5-9-5V7z"/></svg><span>Quarry & Co</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 20L12 4l8 16h-5l-3-6-3 6z"/></svg><span>Northwind</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16" stroke="#fff" stroke-width="2.5"/></svg><span>Lumenfold</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 13c5-1 8-4 10-9 1 4 4 6 8 6-3 2-6 3-9 3l-3 7-1-6z"/></svg><span>Kestrel</span></li>
        <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-6 py-4 text-[1.05rem] font-bold tracking-[-.01em] whitespace-nowrap text-mq-ink shadow-[0_1px_2px_rgba(15,23,42,.06)]"><svg class="size-[22px] flex-none text-mq-accent" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3a9 9 0 1 1-6.4 2.6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg><span>Orbitra</span></li>
      </ul>
    </div>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#64748b] uppercase">Announcement band</span>
<section class="grid grid-cols-[1fr_auto] items-center gap-x-4 rounded-[14px] bg-mq-accent py-1.5 pr-2 text-white [--gap:22px] sm:[--gap:28px] motion-reduce:px-[18px] motion-reduce:py-3.5" aria-label="Store announcements">
  <input class="peer sr-only motion-reduce:hidden" type="checkbox" role="switch" id="mq3-motion" checked>
  <label class="inline-flex cursor-pointer items-center gap-2 text-[.82rem] font-semibold text-white select-none peer-checked:*:bg-white peer-checked:*:before:translate-x-3.5 peer-checked:*:before:bg-mq-accent peer-focus-visible:*:outline-3 peer-focus-visible:*:outline-offset-2 peer-focus-visible:*:outline-white motion-reduce:hidden" for="mq3-motion"><i class="relative h-5 w-[34px] rounded-full shadow-[inset_0_0_0_2px_#fff] transition-colors duration-200 before:absolute before:top-1 before:left-1 before:size-3 before:rounded-full before:bg-white before:transition-transform before:duration-200 motion-reduce:transition-none"></i>Motion</label>
  <div class="-order-1 overflow-hidden [mask-image:linear-gradient(90deg,transparent,#000_9%,#000_91%,transparent)] hover:*:[animation-play-state:paused] peer-[:not(:checked)]:*:[animation-play-state:paused] motion-reduce:[mask-image:none]">
    <div class="flex w-max animate-marquee-band motion-reduce:w-auto motion-reduce:animate-none">
      <ul class="flex items-center gap-(--gap) pr-(--gap) motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-1.5 motion-reduce:pr-0">
        <li class="flex items-center gap-(--gap) text-[.88rem] font-semibold tracking-[.06em] whitespace-nowrap text-white uppercase after:text-[#99f6e4] after:content-['✦'] motion-reduce:text-center motion-reduce:whitespace-normal motion-reduce:after:hidden">Free delivery on orders over $60</li>
        <li class="flex items-center gap-(--gap) text-[.88rem] font-semibold tracking-[.06em] whitespace-nowrap text-white uppercase after:text-[#99f6e4] after:content-['✦'] motion-reduce:text-center motion-reduce:whitespace-normal motion-reduce:after:hidden">30-day returns, no questions</li>
        <li class="flex items-center gap-(--gap) text-[.88rem] font-semibold tracking-[.06em] whitespace-nowrap text-white uppercase after:text-[#99f6e4] after:content-['✦'] motion-reduce:text-center motion-reduce:whitespace-normal motion-reduce:after:hidden">Plastic-free packaging</li>
        <li class="flex items-center gap-(--gap) text-[.88rem] font-semibold tracking-[.06em] whitespace-nowrap text-white uppercase after:text-[#99f6e4] after:content-['✦'] motion-reduce:text-center motion-reduce:whitespace-normal motion-reduce:after:hidden">Order by 2 pm for same-day dispatch</li>
        <li class="flex items-center gap-(--gap) text-[.88rem] font-semibold tracking-[.06em] whitespace-nowrap text-white uppercase after:text-[#99f6e4] after:content-['✦'] motion-reduce:text-center motion-reduce:whitespace-normal motion-reduce:after:hidden">Gift wrapping on request</li>
      </ul>
      <ul class="flex items-center gap-(--gap) pr-(--gap) motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-1.5 motion-reduce:pr-0 motion-reduce:hidden" aria-hidden="true">
        <li class="flex items-center gap-(--gap) text-[.88rem] font-semibold tracking-[.06em] whitespace-nowrap text-white uppercase after:text-[#99f6e4] after:content-['✦'] motion-reduce:text-center motion-reduce:whitespace-normal motion-reduce:after:hidden">Free delivery on orders over $60</li>
        <li class="flex items-center gap-(--gap) text-[.88rem] font-semibold tracking-[.06em] whitespace-nowrap text-white uppercase after:text-[#99f6e4] after:content-['✦'] motion-reduce:text-center motion-reduce:whitespace-normal motion-reduce:after:hidden">30-day returns, no questions</li>
        <li class="flex items-center gap-(--gap) text-[.88rem] font-semibold tracking-[.06em] whitespace-nowrap text-white uppercase after:text-[#99f6e4] after:content-['✦'] motion-reduce:text-center motion-reduce:whitespace-normal motion-reduce:after:hidden">Plastic-free packaging</li>
        <li class="flex items-center gap-(--gap) text-[.88rem] font-semibold tracking-[.06em] whitespace-nowrap text-white uppercase after:text-[#99f6e4] after:content-['✦'] motion-reduce:text-center motion-reduce:whitespace-normal motion-reduce:after:hidden">Order by 2 pm for same-day dispatch</li>
        <li class="flex items-center gap-(--gap) text-[.88rem] font-semibold tracking-[.06em] whitespace-nowrap text-white uppercase after:text-[#99f6e4] after:content-['✦'] motion-reduce:text-center motion-reduce:whitespace-normal motion-reduce:after:hidden">Gift wrapping on request</li>
      </ul>
    </div>
  </div>
</section></div>
CSS 
@theme {
  --color-mq-ink: #475569;
  --color-mq-accent: #0f766e;
  --animate-marquee: marquee 38s linear infinite;
  --animate-marquee-rev: marquee 46s linear infinite reverse;
  --animate-marquee-band: marquee 30s linear infinite;
  @keyframes marquee { to { transform: translateX(-50%); } }
}

About this set

Endless scrolling rows built with CSS alone. Single row with faded edges is the classic trusted-by strip: eight customer logos, each a small mark and a name, sliding past with the edges faded out by a mask. Two rows on tiles puts the logos on white tiles on a tinted panel, with the second row running the other way at a slower speed. Announcement band carries store messages, such as free delivery and returns, on a teal bar. Each list is written twice, the second copy hidden from screen readers, and the track slides by exactly half its width in a loop, so the seam never shows. Hovering pauses the motion, and every marquee has a Motion switch, a real checkbox with role=”switch”, that stops it for good. With prefers-reduced-motion the animation is removed, the copy disappears and the logos or messages wrap into a still, centred row. The Bootstrap version uses .form-switch for the Motion control and :has() to read it.

What’s included

  • No JavaScript: a CSS keyframe loop over a duplicated list
  • Hover pause plus a Motion switch that stops the animation
  • Still, wrapped layout under prefers-reduced-motion
  • Duplicate list hidden from screen readers with aria-hidden
  • Three styles: faded strip, two opposing rows on tiles, announcement band

Accessibility

Logo names are real text, read once, because the repeated list is aria-hidden. The Motion switch is a labelled checkbox with role="switch", reachable by Tab and toggled with Space, and its track gets a 3px outline on keyboard focus; switching it off stops the movement, which meets WCAG 2.2.2 for content that moves for more than five seconds. Under prefers-reduced-motion nothing moves and the switch is hidden.

Customise it

Set --mq-speed for the loop time, --mq-gap for the spacing and --mq-accent for the switch and tile marks on .mq. In Tailwind the speeds are the --animate-marquee values in @theme and the spacing is the --gap arbitrary property on each section.