Carousels & Tickers
Text Marquee
CSS-only scrolling text strip for announcements, joining phrases with a separator glyph and looping infinitely.
$ velocityx add text-marqueeBuilt for astro.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| items | string[] | Yes | ||
| separator | string | No | '✦' | |
| speed | number | No | 22 | |
| direction | 'left' | 'right' | No | 'left' | |
| size | 'sm' | 'md' | 'lg' | No | 'md' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/text-marquee/TextMarquee.astroUsing the Text Marquee component
Install it with velocityx add text-marquee.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Carousels & Tickers.
Top-of-page rotating announcement bar with dot indicators and a session-persistent dismiss control, vanilla JS only.
astroFramework-free vanilla-JS one-up carousel for arbitrary slotted content, with arrows, dots, keyboard and swipe.
astroCSS-only infinite marquee of client/partner logos that loops seamlessly in either direction and pauses on hover or focus.
astroBreaking-news style ticker with a fixed live tag and a CSS-only infinite-scrolling headline marquee.
astro