Rope Marquee
A marquee strung on a real rope — type flows along a verlet-simulated line you can grab, yank, and pluck while it sways back into its swags.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/rope-marquee.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/rope-marquee.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The line of type strung on the rope. Repeated to fill it. |
| speed | number | 42 | Flow speed in px/s along the rope. Negative flows the other way. |
| pins | number | 3 | Pinned points along the rope — 2 is one swag, 3 a double swag, and so on. |
| slack | number | 0.08 | Extra rope length as a fraction of width — more slack, deeper sag. |
| height | number | 190 | Container height in px. |
| gravity | number | 1500 | Downward pull in px/s² — higher snaps back harder. |
| interactive | boolean | true | Allow grabbing and plucking the rope. |
| textClassName | string | "font-serif text-[26px] italic" | Classes for the glyphs — font, size, fill. |
| className | string | — | Additional CSS classes. |