Components / Motion / Marquee

Marquee beta

An endless, even loop. Pauses when you reach for it; fades at both edges.

Preview

NORTHWINDhexlabATELIER 9mono&coFieldsetoslo.fm

<div class="k-marquee" style="max-width:520px">
  <div class="k-marquee-track">
    <div class="k-marquee-group">
      <span style="font-weight:600;font-size:15px;color:var(--k-ink-2)">NORTHWIND</span><span style="font-family:var(--k-mono);font-size:13px;color:var(--k-ink-3)">hexlab</span><span style="font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--k-ink-2)">ATELIER&nbsp;9</span><span style="font-family:var(--k-mono);font-size:13px;color:var(--k-ink-3)">mono&amp;co</span><span style="font-weight:600;font-size:15px;color:var(--k-ink-2)">Fieldset</span><span style="font-family:var(--k-mono);font-size:13px;color:var(--k-ink-3)">oslo.fm</span>
    </div>
    <div class="k-marquee-group" aria-hidden="true">
      <span style="font-weight:600;font-size:15px;color:var(--k-ink-2)">NORTHWIND</span><span style="font-family:var(--k-mono);font-size:13px;color:var(--k-ink-3)">hexlab</span><span style="font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--k-ink-2)">ATELIER&nbsp;9</span><span style="font-family:var(--k-mono);font-size:13px;color:var(--k-ink-3)">mono&amp;co</span><span style="font-weight:600;font-size:15px;color:var(--k-ink-2)">Fieldset</span><span style="font-family:var(--k-mono);font-size:13px;color:var(--k-ink-3)">oslo.fm</span>
    </div>
  </div>
</div>

/* KATA Marquee */
.k-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.k-marquee-track{display:flex;gap:0;width:max-content;animation:k-marquee 30s linear infinite}
.k-marquee:hover .k-marquee-track{animation-play-state:paused}
.k-marquee-group{display:flex;align-items:center;gap:44px;padding-right:44px}
@keyframes k-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.k-marquee-track{animation:none}}

Usage

For logo rows and quiet tickers. The track holds the content twice; the second copy is aria-hidden. Speed is the animation duration — slower reads calmer.

Accessibility

The duplicated half is aria-hidden so screen readers hear the list once. Motion stops under prefers-reduced-motion.

Follow Frame

Reorder