Marquee

An auto‑scrolling content strip with CSS‑only animation. It displays testimonials or logos in a continuous loop and supports pause on hover, reverse direction, and configurable speed.

Use Cases

• Customer testimonials / reviews section
• Partner or client logo strip
• Social proof section on landing pages
• Trust indicators (awards, certifications)

Properties

items

Array of items to display in the marquee. Type: array. Required.

speed

Scroll speed (1 = slow, 10 = fast). 3 is a comfortable reading speed. Type: number. Default: 3.

reverse

Whether the second row scrolls in the opposite direction. Type: boolean. Default: true.

pauseOnHover

Pause animation when user hovers over the marquee. Type: boolean. Default: true.

variant

testimonial = card with name/title/body. logo = compact logo display. Type: string. Options: testimonial, logo. Default: testimonial.

customCss

Custom CSS property pairs. Type: string.

Best Practices

• Use 6 + items for smooth continuous scrolling
• Keep testimonial body text to 1-2 sentences
• Set pauseOnHover to true so users can read individual items
• Use reverse: true for visual interest (second row goes opposite direction)
• For logo variant, use transparent PNG or SVG logos

Common Mistakes

Using only 2-3 items

Why it's a problem: With few items, the gap between repeats is visible and the loop looks jarring

Fix: Use at least 6 items. The component repeats items 4x to create a seamless loop.

Writing very long testimonial body text

Why it's a problem: Cards scroll past too quickly to read long text

Fix: Keep body text to 1-2 sentences max (under 100 characters ideal)