NS Design System
v3.0.0 · 257 tokens

16Marquee

A continuously scrolling strip — logos, credentials, certifications. Two identical tracks translated 50%, which is the only implementation that loops without a visible seam.

Use it for

  • Ambient content: partner logos, certifications, “now teaching”
  • A band that needs motion without asking for attention

Not for

  • Anything the reader NEEDS. It is infinite — look away and it is gone, with no way back
  • Navigation or actions as the only route to them
  • More than one per page: two strips moving at once is a fairground

Logos, windowed

--window fades both edges with a mask rather than clipping, so it reads as a view onto something longer. A mask works over any background; a gradient overlay would have to know the surface colour and would be wrong on a dark band.

Acme CloudNorthwindGlobexInitechUmbrella Ops
markup
<div class="ns-marquee ns-marquee--window">
  <div class="ns-marquee__track">
    <a class="ns-marquee__item" href="#0">Acme Cloud</a><a class="ns-marquee__item" href="#0">Northwind</a><a class="ns-marquee__item" href="#0">Globex</a><a class="ns-marquee__item" href="#0">Initech</a><a class="ns-marquee__item" href="#0">Umbrella Ops</a>
  </div>
  <div class="ns-marquee__track" aria-hidden="true">
    <span class="ns-marquee__item">Acme Cloud</span><span class="ns-marquee__item">Northwind</span><span class="ns-marquee__item">Globex</span><span class="ns-marquee__item">Initech</span><span class="ns-marquee__item">Umbrella Ops</span>
  </div>
</div>

Reverse and slow

A second strip running the other way is the one case for two — stacked, they read as a texture rather than a race.

AdministratorPlatform Developer ISales Cloud ConsultantData Architect
markup
<div class="ns-marquee ns-marquee--window ns-marquee--slow ns-marquee--reverse">
  <div class="ns-marquee__track">
    <span class="ns-marquee__item">Administrator</span><span class="ns-marquee__item">Platform Developer I</span><span class="ns-marquee__item">Sales Cloud Consultant</span><span class="ns-marquee__item">Data Architect</span>
  </div>
  <div class="ns-marquee__track" aria-hidden="true">
    <span class="ns-marquee__item">Administrator</span><span class="ns-marquee__item">Platform Developer I</span><span class="ns-marquee__item">Sales Cloud Consultant</span><span class="ns-marquee__item">Data Architect</span>
  </div>
</div>

Display scale

The poster band. Type-fx's .ns-kinetic stays separate — that one is a typographic effect with its own outline treatment; this is the general-purpose strip.

APEXLWCFLOWSOQL
markup
<div class="ns-marquee ns-marquee--window ns-marquee--display ns-marquee--tight">
  <div class="ns-marquee__track">
    <span class="ns-marquee__item">APEX</span><span class="ns-marquee__item ns-marquee__item--outline">LWC</span><span class="ns-marquee__item">FLOW</span><span class="ns-marquee__item ns-marquee__item--outline">SOQL</span>
  </div>
  <div class="ns-marquee__track" aria-hidden="true">
    <span class="ns-marquee__item">APEX</span><span class="ns-marquee__item ns-marquee__item--outline">LWC</span><span class="ns-marquee__item">FLOW</span><span class="ns-marquee__item ns-marquee__item--outline">SOQL</span>
  </div>
</div>

Accessibility contract

  • The duplicate track is aria-hidden, so nothing is announced twice — the second track is the wrap, not decoration
  • Pauses on hover AND focus-within, so a keyboard user can reach a link inside it without chasing a moving target
  • Stops entirely under prefers-reduced-motion via the global guard
  • Speed is a distance-per-second, not a UI timing — Principle 5 governs response to input, and nothing here responds to anything