Lumeo

Marquee

Infinitely scrolling horizontal band of children.

Installation

dotnet add package Lumeo.Motion

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Marquee />

When to Use

  • Showcase partner logos, testimonials, or feature highlights in a continuous loop.
  • Create a live ticker for news headlines, announcements, or metrics.
  • Use PauseOnHover to let users read individual items comfortably.
Acme Corp
Globex
Initech
Umbrella
Stark Industries
Dunder Mifflin
Prestige Worldwide
Blazor
.NET 10
Tailwind CSS
Open Source
Components
UI Library
WASM
Server-Side
Acme Corp
Globex
Initech
Umbrella
Stark Industries
Dunder Mifflin
Prestige Worldwide

Pick a speed to see the scroll rate change live. Hover the marquee to pause.

Acme Corp
Globex
Initech
Umbrella
Stark Industries
Dunder Mifflin
Prestige Worldwide

Switch the scroll direction live.

Blazor
.NET 10
Tailwind CSS
Open Source
Components
UI Library
WASM
Server-Side

API Reference

Marquee

Property Type Default Description
Speed MarqueeSpeed Normal Scroll speed: Slow (60s), Normal (30s), Fast (12s) animation duration.
Direction MarqueeDirection Left Initial scroll direction: Left or Right.
Reverse bool false Inverts the Direction. Shorthand for setting Direction="Right".
PauseOnHover bool false Pauses the animation while the cursor hovers over the marquee.
Vertical bool false Switches to vertical scroll mode.
ChildContent RenderFragment? null Items to scroll. Duplicated automatically to create the infinite loop effect.
Class string? null Additional CSS classes merged onto the root element.

Related Components

  • Carousel — Slide-based rotator with manual navigation controls.
  • TextReveal — Word-by-word reveal animation on scroll.