iconiq
—Open GitHub

Infinite Ribbon

A full-width looping ribbon for announcement strips, launch banners, and kinetic section dividers. It repeats the supplied content into a seamless track and can run in either direction.

Craft crisp dashboards, lively landing pages, and polished product flows with components that feel ready from the first click.
Craft crisp dashboards, lively landing pages, and polished product flows with components that feel ready from the first click.

Installation

npx shadcn@latest add @iconiq/infiniteribbon

Props

InfiniteRibbon

6 props

Full-width looping ribbon that duplicates its children into a continuous marquee track and optionally rotates the whole strip.
childrenReact.ReactNode
Required
Content repeated across the moving ribbon. Short announcement copy works best because it stays legible while scrolling.
repeatnumber
Default5
Number of copies rendered per half of the seamless track. Higher values keep wider ribbons filled with repeated content.
durationnumber
Default10
Loop duration in seconds. Lower values move the ribbon faster; values below 0.1 are clamped.
reverseboolean
Defaultfalse
Runs the marquee from left to right instead of the default right-to-left movement.
rotationnumber
Default0
Degrees applied to the root strip with CSS transform, useful for diagonal banner layouts.
classNamestring
Optional class names merged onto the root ribbon for positioning, colors, spacing, or typography.

Notes

The animated track is marked aria-hidden and a single screen-reader-only copy of children is rendered before it.
The component ships its own keyframes, so no global Tailwind animation extension is required.
Reduced-motion users receive a single near-instant pass instead of a continuously looping marquee.
Because rotation is applied as an inline transform, wrap the ribbon when you need additional transform utilities on the same element.