Marquee

Back

Satu Visual Component

An infinite scrolling row (or column) of content.

Next.jsReactTailwindTypeScriptFramerVercel

Installation

Add it with the CLI:

Terminal

Or open the Code tab above and copy it in manually — it relies on the standard cn() helper from @/lib/utils.

Usage

Repeats its children and scrolls them seamlessly. Set speed with the [--duration] utility.

Props

Prop	Type	Default	Description
children	ReactNode	—	Items to scroll.
reverse	boolean	false	Reverse scroll direction.
pauseOnHover	boolean	false	Pause on hover.
vertical	boolean	false	Scroll vertically.
repeat	number	4	How many times to repeat children.

Requirements

No external npm dependencies. ✨

Add this to your Tailwind config:

tailwind.config.ts

// tailwind.config.ts → theme.extend
animation: {
  marquee: "marquee var(--duration) linear infinite",
  "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
},
keyframes: {
  marquee: {
    from: { transform: "translateX(0)" },
    to: { transform: "translateX(calc(-100% - var(--gap)))" },
  },
  "marquee-vertical": {
    from: { transform: "translateY(0)" },
    to: { transform: "translateY(calc(-100% - var(--gap)))" },
  },
},