Marquee

Continuously scrolling horizontal content.

html

<div class="mot-marq-stage" data-direction="left" style="background:#241430;">
  <div class="mot-marq-track mot-marq-track--pausable">
    <span>Breaking: new release ships today • Breaking: new release ships today • Breaking: new release ships today • </span>
  </div>
</div>
<style>
.mot-marq-stage { width: 100%; max-width: 320px; overflow: hidden; border-radius: 10px; padding: 12px 0; }
.mot-marq-track { white-space: nowrap; color: #FAF7F2; font: 600 14px system-ui, sans-serif; }
@media (prefers-reduced-motion: no-preference) {
  [data-direction="left"] .mot-marq-track { animation: mot-marq-left 8s linear infinite; }
  [data-direction="right"] .mot-marq-track { animation: mot-marq-right 8s linear infinite; }
  .mot-marq-track--pausable:hover { animation-play-state: paused; }
  @keyframes mot-marq-left { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }
  @keyframes mot-marq-right { from { transform: translateX(-33.33%); } to { transform: translateX(0); } }
}
</style>

tailwind

<div class="w-full max-w-[320px] overflow-hidden rounded-[10px] py-3" data-direction="left" style="background:#241430;">
  <div class="tw-marq-track tw-marq-pausable whitespace-nowrap text-[#FAF7F2] font-semibold text-sm">
    <span>Breaking: new release ships today • Breaking: new release ships today • Breaking: new release ships today • </span>
  </div>
</div>
<style>
@media (prefers-reduced-motion: no-preference) {
  [data-direction="left"] .tw-marq-track { animation: mot-marq-tw-left 8s linear infinite; }
  [data-direction="right"] .tw-marq-track { animation: mot-marq-tw-right 8s linear infinite; }
  .tw-marq-pausable:hover { animation-play-state: paused; }
  @keyframes mot-marq-tw-left { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }
  @keyframes mot-marq-tw-right { from { transform: translateX(-33.33%); } to { transform: translateX(0); } }
}
</style>

react

export function Marquee({
  text = "Breaking: new release ships today • ",
  duration = 8,
  direction = "left",
  pauseOnHover = true,
  accent = "#241430",
}) {
  const name = direction === "left" ? "mot-marq-left" : "mot-marq-right";
  return (
    <div style={{ width: "100%", maxWidth: 320, overflow: "hidden", borderRadius: 10, padding: "12px 0", background: accent }}>
      <div className={pauseOnHover ? "track pausable" : "track"} style={{ whiteSpace: "nowrap", color: "#FAF7F2", fontWeight: 600, fontSize: 14 }}>
        <span>{text}{text}{text}</span>
      </div>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .track { animation: ${name} ${duration}s linear infinite; }
          .pausable:hover { animation-play-state: paused; }
          @keyframes mot-marq-left { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }
          @keyframes mot-marq-right { from { transform: translateX(-33.33%); } to { transform: translateX(0); } }
        }
      `}</style>
    </div>
  );
}