Infinite Media Marquee

The Magic UI marquee repeats React children in horizontal or vertical CSS tracks. It differs from the beUI version by exposing repeat and reverse props and configuring timing through a CSS variable.

Better with your agent

Give your agent taste.

The best way to use Rendyn is through MCP. Let your agent find the right component, compare previews and bring the source into your project.

All components are free. Sign up only to connect MCP.

Connect to MCP for free

Interactive exampleReact Tailwind CSS

Practical React example

A repeated strip of decorative media or short labels can fill a wide landing-page section. Use this variant when you want to tune the number of repeated tracks as well as their direction.

Before you copy and paste

Add the Magic UI Marquee component, cn utility and marquee.css from the Code tab. The CSS file defines its horizontal and vertical animation utilities for Tailwind.

Use the Code tab for the component files and installation instructions, then adapt the imports in this example to your project.

Tune a repeated media strip with CSS variables

import { Marquee } from "@/components/magicui/marquee";
import "@/components/magicui/marquee.css";

const labels = ["Design", "Review", "Ship"];

export function WorkflowStrip() {
  return (
    <section aria-label="Workflow">
      <p className="sr-only motion-reduce:not-sr-only">Design, review, ship.</p>
      <Marquee
        aria-hidden="true"
        pauseOnHover
        repeat={3}
        reverse
        className="[--duration:35s] [--gap:2rem] motion-reduce:hidden"
      >
        {labels.map((label) => <span key={label}>{label}</span>)}
      </Marquee>
    </section>
  );
}

The source repeats the complete child list three times here. It does not hide repeated tracks from assistive technology, so this decorative example hides the whole animated strip and supplies one readable alternative.

Customization

repeat / reverse / vertical: Repeat defaults to four tracks; use a small positive integer. Reverse changes direction. Vertical switches to a column animation, which needs a container height.
pauseOnHover: Unlike the beUI marquee, this variant defaults hover pause to false. Enable it explicitly when readers need to inspect moving content.
--duration / --gap: Set timing and spacing through CSS variables, such as [--duration:35s] and [--gap:2rem]. This variant has no numeric speed prop.

Integration notes

Repeated interactive children create repeated links and focus stops. Keep this example decorative or adapt the source so duplicated tracks are hidden and inert before using interactive content.
Add a persistent pause control for continuous motion when needed. Hover pause and a reduced-motion alternative serve different needs.
Keep this variant on its existing public URL. The other marquee pages use different prop contracts, even though all three share the same display name.

Component source: Magic UI documentation . These examples describe the version imported into Rendyn. Upstream APIs may have changed; retain the source licence notices when adapting the code.