Marquee

An infinite, seamless horizontal scroller with edge fading.

MotionDesignAnimateExportCreate

Example.tsx

import { Marquee } from "@/components/better/marquee"

const items = ["Motion", "Design", "Animate", "Export", "Create"]

export function Example() {
  return (
    <Marquee duration={14} reverse={false} hover="slow" slowFactor={3}>
      {items.map((t) => (
        <span key={t} className="rounded-full border border-border px-4 py-1.5 text-sm font-medium">
          {t}
        </span>
      ))}
    </Marquee>
  )
}

Dependencies

None — just React and Tailwind CSS.

Props

Prop	Type	Default	Description
children*	React.ReactNode	—
className	string	—
duration	number	20	Seconds for one full loop.
reverse	boolean	false	Scroll right-to-left by default; reverse flips it.
hover	"pause" \| "slow" \| "none"	"pause"	What hovering does. One choice, not two flags — pausing and slowing are mutually exclusive, so they can't both be asked for. /
slowFactor	number	3	How many times slower on hover when `hover` is "slow".
gap	string	"1.5rem"	Gap between repeated groups (any CSS length).