Infinite Marquee React component
A seamless scrolling text marquee with solid/gradient/outline text styles, a separator, double-row mode, and edge fade.
About the Infinite Marquee component
Infinite Marquee is a free scrolling text band: a phrase repeated with a separator glyph that loops seamlessly left or right, with an optional second row running the other way. The loop is a CSS keyframe that moves the track by half its width, timed from the measured width so the speed stays the same for any text length.
text is required, and separator (default ✦), repeatCount, gap and separatorGap set the content. textStyle chooses solid (textColor), gradient (gradientFrom, gradientTo, gradientAngle) or outline (strokeColor, strokeWidth). doubleRow, rowGap, fadeEdges, fadeWidth, backgroundColor, paddingTop, paddingBottom and borderRadius handle the layout. The band has role="marquee" with the text as its label and the moving copies are aria-hidden. The animation stops under prefers-reduced-motion and pauses while the band is off screen.
When to use it
Use it for announcement bands, sale or launch callouts, section dividers and big brand statements between sections.
For scrolling logos use Logo Marquee. For image cards, use Cards Hover Marquee.
Installation
Add the Infinite Marquee component to your project with the shadcn CLI. It lands in components/infinite-marquee.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/infinite-marqueeOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<InfiniteMarquee /> accepts 29 props (required ones are marked *). It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| text* | string | — |
| separator | string | "✦" |
| speed | number | 80 |
| direction | "left" | "right" | "left" |
| pauseOnHover | boolean | false |
| repeatCount | number | 6 |
| fontSize | number | 48 |
| fontWeight | number | string | 700 |
| fontFamily | string | "Inter, sans-serif" |
| letterSpacing | number | -1 |
| uppercase | boolean | true |
| gap | number | 32 |
- text*string
- separatorstringDefault: "✦"
- speednumberDefault: 80
- direction"left" | "right"Default: "left"
- pauseOnHoverbooleanDefault: false
- repeatCountnumberDefault: 6
- fontSizenumberDefault: 48
- fontWeightnumber | stringDefault: 700
- fontFamilystringDefault: "Inter, sans-serif"
- letterSpacingnumberDefault: -1
- uppercasebooleanDefault: true
- gapnumberDefault: 32
Show all 29 propsShow fewer
| separatorGap | number | 32 |
| textStyle | "solid" | "gradient" | "outline" | "solid" |
| textColor | string | "#FFFFFF" |
| gradientFrom | string | "#FF6B6B" |
| gradientTo | string | "#4ECDC4" |
| gradientAngle | number | 90 |
| strokeColor | string | "#FFFFFF" |
| strokeWidth | number | 1.5 |
| separatorColor | string | "#FFFFFF" |
| doubleRow | boolean | false |
| rowGap | number | 0 |
| fadeEdges | boolean | false |
| fadeWidth | number | 100 |
| backgroundColor | string | "#000000" |
| paddingTop | number | 20 |
| paddingBottom | number | 20 |
| borderRadius | number | 0 |
- separatorGapnumberDefault: 32
- textStyle"solid" | "gradient" | "outline"Default: "solid"
- textColorstringDefault: "#FFFFFF"
- gradientFromstringDefault: "#FF6B6B"
- gradientTostringDefault: "#4ECDC4"
- gradientAnglenumberDefault: 90
- strokeColorstringDefault: "#FFFFFF"
- strokeWidthnumberDefault: 1.5
- separatorColorstringDefault: "#FFFFFF"
- doubleRowbooleanDefault: false
- rowGapnumberDefault: 0
- fadeEdgesbooleanDefault: false
- fadeWidthnumberDefault: 100
- backgroundColorstringDefault: "#000000"
- paddingTopnumberDefault: 20
- paddingBottomnumberDefault: 20
- borderRadiusnumberDefault: 0
Collections
Use-case pages that compare Infinite Marquee with the other components that do a similar job.
- React Text Animation ComponentsReact text animation components: scramble and decrypt effects, scroll-driven word reveals, 3D tilt text, liquid distortion, particle text and kinetic typography.
- React Marquee ComponentsInfinite scrolling React marquees: text tickers, logo clouds, review walls, image card rows and marquee hero sections. Seamless loop, pause on hover, Tailwind.
npm dependencies
Installed for you by the shadcn CLI.
Infinite Marquee FAQ
- What unit is speed?
- Pixels per second (default 80). The duration is half the track width divided by speed, so long and short texts move at the same pace.
- Can it pause on hover?
- Yes. With pauseOnHover, both rows stop while the pointer is over the band.
- Why is my text uppercase?
- uppercase defaults to true. Set uppercase={false} to keep your own casing.
- Why is there a gap in the loop?
- The track holds two copies of repeatCount items (default 6, minimum 2). If one copy is narrower than the band, raise repeatCount.
