BricksLab Catalog

@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 •

With Pause on Hover

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

Reverse Direction

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

Vertical Marquee

📱 Vertical • Scrolling ↓ • News Feed

Props Table

Prop	Type	Défaut	Requis	Description
`children`	`React.ReactNode`	—	✓	Content to scroll infinitely.
`reverse`	`boolean`	`false`	—	Reverse scroll direction.
`pauseOnHover`	`boolean`	`false`	—	Pause animation on hover.
`vertical`	`boolean`	`false`	—	Scroll vertically instead of horizontally.
`repeat`	`number`	`3`	—	Number of times to repeat content.
`className`	`string`	—	—	Additional 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>