Is Marquee Text free for commercial use?

Yes. Marquee Text is MIT licensed, so you can use it in personal and commercial projects without attribution.

Is Marquee Text accessible for screen readers and keyboard users?

Yes. The duplicate copy that makes the loop seamless is hidden from assistive technology, so screen readers hear the content exactly once. Keyboard focus inside the marquee pauses the loop through a CSS selector, and with reduced motion enabled the track renders static and horizontally scrollable, so nothing is unreachable. The animation itself is a single transform, handled by the browser compositor.

How do I change the speed or direction of the loop?

Override the --marquee-dur custom property from :root or any ancestor element to change how long one full loop takes, and --marquee-gap to change the spacing between the repeated copies. Set the reverse prop to true to flip the travel direction.

Marquee Text

A free CSS marquee text effect that pauses on hover and focus.

Automated axe check
Reduced-motion tested
SSR build verified
CSS and React
No runtime packages

Marquee Text is a free text effect component for Next.js and React that scrolls a row of content in a seamless, infinite loop. It is driven by a single CSS transform keyframe, styled with Tailwind, and ships with no JavaScript timers, listeners or animation libraries: the content is duplicated once for the wrap and the track simply translates half its own width per cycle.

The loop pauses whenever you hover the marquee or move keyboard focus inside it, using a pure CSS selector rather than event handlers. Screen readers receive the content exactly once because the duplicate copy is hidden from assistive technology, and with prefers-reduced-motion enabled the track stands still and becomes horizontally scrollable, so every item stays reachable.

Template Empire

Motion-first componentsSection-level building blocksAccessible by defaultReduced motion safeZero JavaScript timers

One CSS keyframe moves the whole row; there is no JavaScript running at all. Hover the strip and it pauses in place, and keyboard focus inside it does the same when the content is interactive. Enable reduced motion and it stands still as a scrollable row instead.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/text-marquee

Usage

import { TextMarquee } from "@/components/text-marquee";

export function Example() {
  return (
    <TextMarquee className="border-y border-border py-4 text-xl font-medium">
      <span>Ship faster</span>
      <span aria-hidden="true">&middot;</span>
      <span>Stay accessible</span>
      <span aria-hidden="true">&middot;</span>
      <span>Animate with intent</span>
    </TextMarquee>
  );
}

Props

Prop	Type	Default	Description
children	ReactNode	required	Track content, rendered once and duplicated internally.
reverse	boolean	false	Reverses the travel direction.
className	string	undefined	Additional classes merged onto the outer container.

Customisation

Marquee Text exposes two component tokens, declared in its registry item: --marquee-dur for the time one full loop takes (defaulting to 30s) and --marquee-gap for the gap between repeated track copies (defaulting to 3rem). Override them from :root, or on any ancestor of the component, to retune the pace and spacing without touching the code:

:root {
  --marquee-dur: 45s;
  --marquee-gap: 4.5rem;
}

Frequently asked questions

Is Marquee Text free for commercial use?: Yes. Marquee Text is MIT licensed, so you can use it in personal and commercial projects without attribution.
Is Marquee Text accessible for screen readers and keyboard users?: Yes. The duplicate copy that makes the loop seamless is hidden from assistive technology, so screen readers hear the content exactly once. Keyboard focus inside the marquee pauses the loop through a CSS selector, and with reduced motion enabled the track renders static and horizontally scrollable, so nothing is unreachable. The animation itself is a single transform, handled by the browser compositor.
How do I change the speed or direction of the loop?: Override the --marquee-dur custom property from :root or any ancestor element to change how long one full loop takes, and --marquee-gap to change the spacing between the repeated copies. Set the reverse prop to true to flip the travel direction.

Related components

Want the full page this belongs to?Template Empire builds complete Next.js templates with this motion system throughout. Browse the paid templates that pair with these free components.Explore Template Empire templates