Skip to content

Reverse Marquee

A copy-paste marquees & tickers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

Marquees & TickersHTMLCSSany framework

Copy into your project

HTML
<div class="nuda-marquee nuda-marquee--reverse" aria-hidden="true">
  <div class="nuda-marquee__track">
    <span class="nuda-marquee__text">&#9733; Design &bull; Build &bull; Ship &bull; Repeat &bull;&nbsp;</span>
    <span class="nuda-marquee__text">&#9733; Design &bull; Build &bull; Ship &bull; Repeat &bull;&nbsp;</span>
  </div>
</div>
CSS
/* Reverse Marquee
   Same as text marquee but scrolls right-to-left (reversed).
   Add .nuda-marquee--reverse modifier to the marquee. */

.nuda-marquee--reverse .nuda-marquee__track {
  animation-direction: reverse;
}

How to use Reverse Marquee

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More marquees & tickers components

← Browse all NudaUI components