Infinite Marquee
Infinite marquee FAQ with looping scroll.
Main Features of Infinite Marquee
How to Use Infinite Marquee in Next.js
Installation Guide for Infinite Marquee
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
faqs | Array<{id: number, q: string, a: string}> | [] | Array of FAQ items with id, question (q) and answer (a). |
backgroundColor | string | #FFFF00 | Background color (hex, rgb, or hsl). |
cardBgColor | string | #000000 | Card background color. |
cardTextColor | string | #ffffff | Card text color. |
cardBorderColor | string | #000000 | Card border color. |
hoverCardBgColor | string | #ffffff | Card background color on hover. |
hoverCardTextColor | string | #000000 | Card text color on hover. |
questionColor | string | #ffffff | Question text color. |
answerColor | string | #ffffff | Answer text color. |
speed1 | number | 20 | Animation speed for first row (seconds). |
speed2 | number | 25 | Animation speed for second row (seconds). |
speed3 | number | 30 | Animation speed for third row (seconds). |
Related Components
When to Use
Ideal for high-energy brands, fashion landing pages, and Next.js sites that want a bold, 'moving-billboard' aesthetic. Use this React component for a high-impact FAQ section with infinite looping marquee text and bold typographic reveals.
Best Practices
Follow React best practices by using bold, high-contrast typography and high-saturation colors. Maintain scalable component architecture by adjusting the marquee speeds to avoid user motion sickness. Optimize for performance by using CSS-based transforms for the infinite scroll.
Why This Component Matters in Modern UI Development
Marquee layouts are a hallmark of modern brutalist and high-fashion web design. This production-ready component helpsคุณ build an interface that feels loud and confident, turning your support content into a primary visual statement.
Frequently Asked Questions
QIs the scrolling smooth?
Yes, it uses a seamless infinite loop with sub-pixel CSS translation to ensure the text moves fluidly without jumps or jitters.
QCan I pause it?
The marquee is designed to pause or slow down on hover to ensure that users can easily read the specific FAQ items of interest.
QHow do I change the text direction?
The rows can be configured to scroll in opposite directions, creating a dynamic 'sawtooth' motion effect across the section.