Horizontal marquee

HorizontalMarquee scrolls overflowing content horizontally with a CSS animation, as a modern replacement for the deprecated <marquee> element.

Example

<HorizontalMarquee className="border rounded p-2">
  <p>
    Idea React · TypeScript-first Bootstrap 6 and React components powered by MobX · built by
    the idea2app community
  </p>
</HorizontalMarquee>

Behavior

Content narrower than the container stays still; overflowing content scrolls in a loop. The animation pauses while hovered so users can read the text.

<HorizontalMarquee>{announcement}</HorizontalMarquee>

See the Vertical marquee for the vertical variant.