Brickslab.

@brickslab/ui-web

Infinite scroll component for horizontal or vertical marquee effects. Automatically repeats content with smooth CSS animation. Perfect for displaying logos, testimonials, or scrolling text.

Aperçu

Basic Horizontal Marquee

⭐ Smooth scrolling animation • Never stops • Great for logos • Perfect for testimonials •
⭐ Smooth scrolling animation • Never stops • Great for logos • Perfect for testimonials •

With Pause on Hover

Hover to pause • Perfect for interactive demos • Resume on mouse leave •
Hover to pause • Perfect for interactive demos • Resume on mouse leave •

Reverse Direction

← Scrolling right to left • Reverse animation • Alternative direction •
← Scrolling right to left • Reverse animation • Alternative direction •

Vertical Marquee

📱 Vertical • Scrolling ↓ • News Feed
📱 Vertical • Scrolling ↓ • News Feed
📱 Vertical • Scrolling ↓ • News Feed

Props Table

PropTypeDéfautRequisDescription
childrenReact.ReactNodeContent to scroll infinitely.
reversebooleanfalseReverse scroll direction.
pauseOnHoverbooleanfalsePause animation on hover.
verticalbooleanfalseScroll vertically instead of horizontally.
repeatnumber3Number of times to repeat content.
classNamestringAdditional CSS class for custom styling.

Usage

tsx
import { Marquee } from "@brickslab/ui-web";

// Basic horizontal scroll
<Marquee>
  <div style={{ padding: "0 20px" }}>Sliding text content...</div>
</Marquee>

// Pause on hover
<Marquee pauseOnHover>
  <span style={{ marginRight: "40px" }}>⭐ Feature 1</span>
</Marquee>

// Reverse direction
<Marquee reverse>
  <span>Reversed content →</span>
</Marquee>

// Vertical scroll
<Marquee vertical style={{ height: "200px" }}>
  <div style={{ padding: "20px 0" }}>Vertical item 1</div>
</Marquee>