Star on GitHub0

Marquee

Marquee Component

The Marquee component is a versatile UI element that creates a scrolling marquee effect. It is highly customizable and can adapt to various use cases, such as displaying text or other content in a continuous loop.

Features

  • Customizable Speed: Adjust the scrolling speed dynamically.
  • Responsive Design: Automatically adapts to the container's dimensions.
  • Interactive: Supports hover and scroll-based interactions.
  • Smooth Animations: Uses spring-based animations for fluid transitions.
  • Lightweight: Optimized for performance with minimal dependencies.
Loading component preview...

Source Code

Props

PropertyTypeDefaultDescription
children
React.ReactNode
required
The content to be rendered inside the marquee.
className
string
undefined
Additional class names for custom styling of the marquee items.
containerClassName
string
undefined
Additional class names for custom styling of the marquee container.
duration
number
1
The duration of the marquee animation in seconds.
reverse
boolean
false
Determines whether the marquee scrolls in reverse direction.
activeScroll
boolean
false
Enables dynamic speed adjustment based on scroll velocity.
activeHover
boolean
false
Pauses the marquee animation when hovered.

Dependencies

This component uses the following third-party dependencies: