Marquee Ribbon
A full-width ribbon that loops short phrases with a symbol between each one.
- Dependencies
- No extra packages
- Size
- 112 lines
- Controls
- 7 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/marquee-ribbon.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/marquee-ribbon.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the marquee-ribbon.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | string[] | — | Phrases written twice per half; extra sets are added only when the band is wider. |
| separator | string | "✳" | Glyph between phrases (aria-hidden). |
| duration | number | 42 | Seconds per loop at two sets; scaled when more sets are needed. |
| direction | "left" | "right" | "left" | Travel direction. |
| pauseOnHover | boolean | false | Pause the band under the pointer. |
| background / foreground | string | "#b2bc98" / "#33402a" | Band colours. |
| overlap | number | 0 | Negative top margin in px to tuck the band under the section above (the original uses 22). |
| decorative | boolean | true | Hide from assistive tech; set false to expose the phrases once. |