Marquee
Continuous scrolling content that pauses on hover, focus and reduced motion.
@luc/ui/motionLive preview
Stops while a pointer is over it, because a strip that cannot be read is decoration.
Momentum
Carry
Value
Quality
Low volatility
<Marquee speed={28} gap="2.5rem" pauseOnHover fade />Other configurations
The same primitive, arranged differently. Each snippet is printed from the props its preview above was rendered with.
Right to left, unhurried
The same strip reading the other way; `speed` is seconds per pass, so a higher number is slower.
Momentum
Carry
Value
Quality
Low volatility
<Marquee speed={60} direction="right" gap="2.5rem" pauseOnHover fade />No fade, tighter gutter
Without the feathered ends the first item is cut by the container edge — the honest trade for a tighter strip.
Momentum
Carry
Value
Quality
Low volatility
<Marquee speed={22} direction="left" gap="1.25rem" pauseOnHover={false} fade={false} />Usage
import { Marquee } from "@luc/ui/motion";<Marquee speed={28} gap="2.5rem" pauseOnHover fade />API
| Export | Kind | Signature |
|---|---|---|
Marquee | 5 documented props | ({ className, children, speed, direction, gap, pauseOnHover, fade, style, ...props }: MarqueeProps) => import("@types/react").JSX.Element |
Marquee props
Type: MarqueeProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
direction? | MarqueeDirection | undefined | — | |
fade? | boolean | undefined | — | Feather the two ends so items dissolve instead of being cut. |
gap? | string | undefined | — | The gutter between items, and between the two copies. Any CSS length. |
pauseOnHover? | boolean | undefined | — | Stop while the pointer is over the strip, so people can actually read it. |
speed? | number | undefined | — | Seconds for one full copy to pass. Lower is faster. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Surfaces
Panels that respond to a pointer, a scroll or a state change.
Related