Marquee
A marquee component with hover to slow down the animation.
RankFlow UI has completely transformed my workflow. The components are stunning and so easy to customize.
The attention to detail in these animations is next level. It's the premium feel we've been looking for.
Finally, a UI library that doesn't just look good but feels incredibly smooth. Highly recommended!
Building our landing page was a breeze. Our conversion rates improved immediately after switching.
RankFlow UI has completely transformed my workflow. The components are stunning and so easy to customize.
The attention to detail in these animations is next level. It's the premium feel we've been looking for.
Finally, a UI library that doesn't just look good but feels incredibly smooth. Highly recommended!
Building our landing page was a breeze. Our conversion rates improved immediately after switching.
RankFlow UI has completely transformed my workflow. The components are stunning and so easy to customize.
The attention to detail in these animations is next level. It's the premium feel we've been looking for.
Finally, a UI library that doesn't just look good but feels incredibly smooth. Highly recommended!
Building our landing page was a breeze. Our conversion rates improved immediately after switching.
RankFlow UI has completely transformed my workflow. The components are stunning and so easy to customize.
The attention to detail in these animations is next level. It's the premium feel we've been looking for.
Finally, a UI library that doesn't just look good but feels incredibly smooth. Highly recommended!
Building our landing page was a breeze. Our conversion rates improved immediately after switching.
Dependencies
Install the following dependencies to use this component:
npm install motion clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
npx rankflow-ui@latest add marquee
Props
1interface MarqueeProps {2 /**3 * The content to scroll.4 */5 children: ReactNode;67 /**8 * The scroll direction.9 * @default left10 */11 direction?: left | right;1213 /**14 * The speed of the animation.15 * @default 2016 */17 speed?: number;1819 /**20 * Whether to pause the animation on hover.21 * @default true22 */23 pauseOnHover?: boolean;2425 /**26 * Additional CSS classes.27 * @default ''28 */29 className?: string;30}