Marquee

Endless scrolling row of logos and testimonials. Pro · Effects › Borders, text and numbers

An endless scroller for logos, testimonials or tags. The content is repeated as many times as it takes to fill the width, and every copy slides by exactly its own size, so the loop is seamless at any width; the copies are hidden from assistive technology and keyboard focus. Eases to a stop on hover and focus (and back up to speed), pauses off screen and in hidden tabs; with reduced motion the items sit still in a wrapped row (or a scrollable column).

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add marquee

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Marquee } from 'valyro-ui-pro';

Props

Prop	Type	Default
`speed`	`number`	`40`	Scroll speed, px per second — the same for short and long content.
`vertical`	`boolean`	`false`	Scroll vertically. Give the marquee a height.
`reverse`	`boolean`	`false`	Scroll the other way: towards the inline end, or downwards.
`pauseOnHover`	`boolean`	`true`	Pause while the pointer is over the marquee or anything inside has keyboard focus.
`fade`	`boolean`	`true`	Fade the content out at the edges.
`gap`	`number \| string`		Space between items (and between copies), px or any CSS length.

Related components

Animated Border — Light beam running around a border
Shimmer Text — Shine sweeping across text
Text Reveal — Word-by-word reveal and typewriter text
Number Ticker — Animated counter with Intl formatting
Glass Lens — Glass lens with real refraction
Morphing Capsule — Capsule that flows between states
Floating Tab Bar — Floating glass tab bar
Aurora Background — Slow aurora behind your content
Gradient Background — Slowly shifting gradient
Bubble Background — Soft colored bubbles, one follows the cursor
Stars Background — Starry sky with cursor parallax
Hexagon Background — Hexagon grid with a glowing trail

Previous: Number Ticker · Next: Cursor Glow · All Effects