Animated Text
Staggered text reveal for headings, pull quotes, and short supporting copy. Install Animated Text from the VLLNT UI registry with the shadcn CLI.
Supported platforms:WebNative
12 storiesView componentMarquee
Compare Marquee for React and React Native in VLLNT UI 0.4.0. Explore source, dependencies and native capabilities. Native is source-only; npm publication is pending.
Supported platforms:WebNative
What it is and when to use
Marquee is a utility that scrolls its children in a continuous, seamless loop — ideal for logo walls, badge rows, testimonials, or status chips. It duplicates the track so the animation never shows a gap, and supports horizontal or vertical direction, reverse, an adjustable gap, a repeat count, and three speed presets (slow, normal, fast) or an explicit duration. Edge fade and pause-on-hover are optional, and it respects prefers-reduced-motion by halting the animation.
UtilityPreview
Switch between light and dark to inspect the embedded Storybook preview.
Continuously scrolling content lane for badges, logos, and status chips. Part of the utility family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | @vllnt/ui-native, react-native | Native-adapted interaction and accessibility |
Installation
Add Marquee to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/marquee.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Marquee?
- Marquee is a React component that scrolls its children in an infinite, seamless loop. It is commonly used for logo clouds, badge rows, and scrolling testimonials or status chips.
- How do I add Marquee to my app?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/marquee.json`, then wrap your items: `<Marquee pauseOnHover speed="slow">…</Marquee>`.
- Can Marquee pause on hover and respect reduced motion?
- Yes. Set `pauseOnHover` to stop the scroll while hovered, and Marquee honors `prefers-reduced-motion` by disabling the animation. You can also set `vertical` or `reverse` for direction, and `speed` or `duration` for pace.