build69 / Components / Motion — Transitions & Decorative / Marquee

Marquee

v1.0.1Updated 21 Jul 2026

Horizontal or vertical scrolling banner (pure CSS, MagicUI source). Use for logo strips, news tickers, and tag clouds — the seamless loop is built in.

View source ← Back to catalog

Preview

Live · 9 stories

Logos StripOpen ↗

▸Why this is recommendedmarqueescrolltickerlogos+4

Marquee — logos strip.

Recommended for+14

✓Logo strip on landing pages
✓News / announcement ticker
✓Tag cloud strip
✓Public form decorative bands

Tags+6

marqueescrolltickerlogosmarketingbannermagicuistrip

Features+4

Speed presets: slow / normal / fast
Horizontal direction (left / right) + vertical mode
pauseOnHover toggle
reverse flip
Edge fade mask for a soft start/end
Configurable gap between items
Low-level MarqueePrimitive export (pure-CSS loop) for custom patterns

Not recommended for−2

✕Interactive lists (use a DataTable or grid)
✕Dense data-heavy surfaces

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Marquee" })

Usage

import { Marquee } from '@/components/motion/marquee';

<Marquee speed="slow" pauseOnHover fade>
  {logos.map(l => <img key={l.id} src={l.src} alt={l.name} className="h-8" />)}
</Marquee>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

speed

Animation speed token

'slow' | 'normal' | 'fast'—

direction

Horizontal scroll direction

'left' | 'right'—

pauseOnHover

Pause when hovered

boolean—

reverse

Flip the configured direction

boolean—

vertical

Scroll vertically

boolean—

fade

Apply edge fade mask

boolean—

Platform docs All components Source files

Marquee

Preview

Install

Usage

Props

Related